Good Practice with External JavaScript files - Stack Overflow

admin管理员组

文章数量:1352069

I'm new to JavaScript.

How should I split my functions across external scripts? What is considered good practice? should all my functions be crammed into one external .js file or should I group like functions together?

I would guess more files mean more HTTP requests to obtain the script and that could slow down performance? However more files keep things organized: for example, onload.js initializes things on load, data.js retrieves data from the server, ui.js refer to UI handlers...

What's the pros advice on this?

Thanks!

I'm new to JavaScript.

How should I split my functions across external scripts? What is considered good practice? should all my functions be crammed into one external .js file or should I group like functions together?

I would guess more files mean more HTTP requests to obtain the script and that could slow down performance? However more files keep things organized: for example, onload.js initializes things on load, data.js retrieves data from the server, ui.js refer to UI handlers...

What's the pros advice on this?

Thanks!

• javascript

Share Improve this question Follow edited Nov 17, 2016 at 18:45 SharpC 7,48444 gold badges5252 silver badges4545 bronze badges asked Nov 19, 2012 at 14:31 Georges KrinkerGeorges Krinker 2,30944 gold badges2626 silver badges2424 bronze badges 4

• 5 You can keep the source in separate files for code clarity and then use a tool to bine and press them at build time. – Pointy Commented Nov 19, 2012 at 14:32
• 2 @Pointy This should be an answer – Bruno Vieira Commented Nov 19, 2012 at 14:34
• Can you point me to one such tool? – Georges Krinker Commented Nov 19, 2012 at 14:37
• A lot of what you do will be decided by the nature of your application. Is it a collection of pages that all use similar widgets? Is it a site with several significantly different kinds of pages? Is it a single-page application optimized for mobile use? There's not "one true way" here. I can't offer specifics on tools to bine files; it's a fairly simple thing to do and exactly how it works depends on the nature of your code. Personally I have an Ant build and a home-grown task that leverages the Freemarker template engine. – Pointy Commented Nov 19, 2012 at 14:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

As Pointy mentioned, you should try a tool. Try Grunt of Brunch, both are meant to help you in the build process, and you can configure them to bine all your files when you are ready for prod (also, minify, etc), while keeping separate files when you are developing.

When releasing a product, you generally want as little HTTP requests as possible to load a page (Hence image sprites, for example)

So I'd suggest concatenating your .js's for release, but keeping them separated in a way that works well for you, during development.

Keep in mind that if you "use strict", concatenating scripts might be a source of errors.
(more info on js strict mode here)

It depends on the size, count of your scripts and how many of them you use at any time.

Many performance good practices claim (and there's good logic in this) that it's good to inline your JavaScript if it's small enough. This leads to lower count of HTTP requests but it also prevents the browser from caching the JavaScript so you should be very careful. That's why there're a practices even to inline your images (using base64 encoding) in some special cases (for example look at Bing., all their JavaScript is inline).

If you have a lot of JavaScript files and you're using just a little part of them at any time (not only as count but as size) you can load them asynchronously (for example using require.js). But this will require a lot of changes in your application design if you haven't considered it at the beginning (and also make your application plexity bigger).

There are practices even to cache your CSS/JavaScript into the localStorage. For further information you can read the Web Performance Daybook

So let's make something like a short retrospection. If you have your JavaScript inline this will reduce the first load of the page. The inline JavaScript won't be cached by the browser so every next load of your page will be slower that if you have used external files.

If you are using different external files make sure that you're using all of them or at least big part of them because you can have redundant HTTP requests for files which actually are unnecessary loaded. This will lead to better organization of your code but probably greater load time (still don't forget the browser cache which will help you).

To put everything in at single file will reduce your HTTP requests but you'll have one big file which will block your page loading (if you're using synchronous loading of the JS file) until the file have been loaded pletely. In such case I can remend you to put this big file in the end of the body.

For performance tracking you can use tools like YSlow.

When I think about good practice, then I think of MVC patterns. One might argue if this is the way to go in development, but many people use it to structure what the want to achieve. Usually it is not advisable to use MVC at all if the project is just too small - just like creating a full C++ windows app if you just needed a simple C program with a for loop.

In any case, MVC or MV* in javascript will help you structure your code to the extent that all the actions are part of the controllers, while object properties are just stored in the model. The views then are just for showing purposes and are rendered for the user via special requests or rendinering engines. When I stared using MV*, I stared with BackboneJS and the Guide "Developing BackboneJS Applications" from Addy Osmani. Of course there are a multitude of other frameworks that you can use to structure your code. They can be found on the TodoMVC website.

What you can also do is derive your own structure from their apps and then use the directory structure for your development (but without the MV* framework).

I do not agree to your concern that using such a structure lead to more files, which mean more HTTP requests. Of course this is true during development, BUT remember, the user should get a performance enhanced (i.e. piled) and minified version as a script. Therefore even if you are developing in such an organized way, it makes more sense to minify/uglify and pile your scripts with closure piler from Google.

本文标签： Good Practice with External JavaScript filesStack Overflow