Disadvantages of separating JavaScript Codes?

Question

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?

Answer 1

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.

Answer 2

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.