CODEWITHSUNDEEP
javascript
Cyril Silverman
Cyril Silverman

Reputation: 479

How do I make my JavaScript project more manageable?

Currently I'm building a JS library that can attach to and interacts with to any HTML5 Canvas element context.

However, the project is starting to get extensive with lots of files and thousands of lines of code. Each file represents a different object/module. Each file is currently laid out like this, and I'd really like to preserve some semblance of this style:

Object = function() { 
    // constructor
}

Object.prototype.method1 = function() {
    // Logic
}

Object.prototype.method2 = function() {}; // .... etc

And in the development version of the HTML I have a bajillion script tags (one for each file) that need to be in a precise order (for dependencies). I realize that this is very inefficient, and not very maintainable. But I'm not sure what is the best direction to go in to try and make my project easier to build and maintain. Port to NodeJS for the convenience of the tools and CommonJS module system? Convert to RequireJS? I'm just starting to read about Grunt, is that useful for my situation?

Improving my organization and introducing some sort of build system are both things I've put off doing for a while. And man do I regret it now.

Upvotes: 3

Views: 169

Answers (2)

Domenic
Domenic

Reputation: 112817

You need a module system.

RequireJS, with the RequireJS optimizer, is the canonical solution here. You can use browserify if you're more Node.js-leaning, or use the cjsTranslate feature of the RequireJS optimizer if you dislike the AMD cruft (define(function (require, exports, module) { ... });)---possibly in conjunction with Cajon in development.

A build tool, like Grunt, is not the most important factor here. That is useful mainly when you have multiple build steps---e.g., run the RequireJS optimizer, and then compile your SASS to raw CSS, then concatenate the CSS, then turn your images into sprites, then... etc.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

It's important to note that for every one of those <script> tags, the browser is having to make one more HTTP request - even if it's being loaded from cache, the browser has to ask the server if the file's been changed.

I would suggest writing a small program, such as this PHP script, to combine all your .js files into one:

<?php
function loop($dir="./") {
    $ret = Array();
    foreach(glob($dir."*",GLOB_ONLYDIR) as $d) $ret = array_merge($ret,loop($d));
    foreach(glob($dir."*.js") as $f) $ret[] = $f;
    return $ret;
}
$out = fopen("__main.js","w");
foreach(loop() as $file) {
    if( $file == "./__main.js") continue; // don't include "main" script
    fwrite($out,file_get_contents($file));
}
fclose($out);
?>

Now you can just have one <script> tag pointing to that __main.js file and all your scripts will be there.

If your scripts must be in a certain order, then you're doing something wrong. If you're only defining objects in these files, it shouldn't depend on other ones since references should be in methods (consider using an init method, for instance).

Upvotes: 0

Related Questions