I have a page which has many event handlers. The code now reached 1000+ lines of codes and I'm beginning to have difficulty reading the codes. I'm now planning to separate the codes to different files. My question is, is there any disadvantages in separating JS codes into different files?
5
-
4One thing that comes immediately to my mind is another network request. I would suggest to have a readable dev file or multiple files but one minified and or gzipped file for production.Kumar– Kumar2012-03-27 05:23:08 +00:00Commented Mar 27, 2012 at 5:23
-
(Edit: Kumar beat me to it, but I think the lack of concurrent requests still holds.) The only significant one I can think of is that loading different JS files can be a bit slow. Since they can conflict, only one can load at a time (though browsers may have started working around that -- haven't checked in the past few years). Though you could always just glob some files together in the production build.Corbin– Corbin2012-03-27 05:23:53 +00:00Commented Mar 27, 2012 at 5:23
-
agree with Kumar - although will say that you will not see that much of performance difference unless you have many more files with much more code.dbrin– dbrin2012-03-27 05:28:40 +00:00Commented Mar 27, 2012 at 5:28
-
3I use a template engine, separating javascript in multiple files but the output is always one filepylover– pylover2012-03-27 05:35:52 +00:00Commented Mar 27, 2012 at 5:35
-
@pylover Template engine? Hm I'm using Visual Studio, is there any plugin for it? :)kazinix– kazinix2012-03-27 05:46:43 +00:00Commented Mar 27, 2012 at 5:46
Add a comment
|
6 Answers
The best practice is to create relatively small files for development purposes where each file contains a module of functionality that is all related (whatever is most efficient for development/debugging/editing/source control. You can give each file a meaningful name that describes what is in it. Each of these files can be managed separately (their own version history in your source control system, check in/check out, etc...). It's often easier to have multiple tabs open with separate files in your editor than trying to use bookmarks to jump around between different places in one large file, etc...
Then, when you go to deploy your app, you use a tool (like Google closure or YUI Compressor) to minimize and combine all your smaller files into one deployment file. This preserves the development advantages of smaller files that contain related code while preserving the deployment advantage of having most/all the code in one larger external javascript file that can be downloaded in one http request and can be cached very effectively.
Comments
disdvantages?
another HTTP request. developers advise that files be compressed and be in as few files as possible for optimization. the less files you request, the faster (since there is less round trips)
if you use a text-editor with an auto-complete, some of these editors won't pick-up the stuff from the other file for auto-complete. this can be a problem if you don't memoize the functions you have.
if one of these inter-dependent files failed to load, your app will break.
Comments
The disadvantage would be the added complexity of making sure you're including everything correctly. But 1000 lines is getting unwieldy. Here's a related page about calling JavaScript objects in separate files
Comments
Here is a bolg post about JSminify and similar tools to use with VisualStudio and build automation: http://encosia.com/automatically-minify-and-combine-javascript-in-visual-studio/
Comments
Having code separate in different files helps you for maintenance. I will suggest to you to split it in modules compatible with CommonJS, if you're working in a browser environment you can use RequireJS to load them. You can also use the utility provided to create a single file when you deploy your website / webapp in order to optimize the http requests.
