Question

I’m building a JavaScript engine. I used a simple function as a class, added subfunctions, strings… and used prototypes to add other objects…

Everything is fine. The problem now, is that I’m using one class (or main function), because I need it to be so. It’s becoming huge, to the point that I can’t control it any more and debugging the code is becoming as hard as hell.

I’m a C# developer, who used Visual Studio. I never come across this problem, because I have different files/classes/forms…

I wonder how developers here deal with large JavaScript files. What tools/strategies/techniques do you use to solve this issue.

Thanks

Answer 1

You can still create multiple objects analogous to your classes and objects in C#.

I suggest you go look at some JavaScript frameworks like YUI3 ( http://developer.yahoo.com/yui/3/ )

These provide nice mechanisms for structuring your JavaScript code and behaviours. For example YUI3 provides the Y.extend method to allow you to extend one object from another much like you do in C#. There’s a whole suite of other mechanisms you can use in JavaScript that are actually a lot more powerful than what you’ve learnt in C#.

Go look up prototypal inheritance, and maybe watch some of the videos by Douglas Crockford on the YUI Theater ( http://developer.yahoo.com/yui/theater/ ). All really excellent stuff that’ll show you how you can do this sort of thing in JavaScript without the major headache of giant scripts.

To answer you question more specifically, I use the module pattern in YUI3 to allow me to split my code up into mulitple files. It allows a mechanism where you can define modules then use them from other files, while auto-resolving the required dependancies. So you define multiple JavaScript files containing your behaviours and code defining various modules, which can then be ‘used’ in other files.

YUI().use('my-module', 'my-other-module', function(Y) {
    Y.MyModule.doSomething();
    Y.MyOtherModule.doSomethingElse();
});

‘my-module’ and ‘my-other-module’ can be defined in completely different JS files, which I then tell the YUI loader where to find, and it automatically includes them into my pages.

This is really powerful, and lets you break up your code for maximum reuse and simplicity. Lots of other developers are also putting their code up on the YUI Gallery so you can mix and match behaviours into your projects.