Javascript Modularized programming memory/ performance usage: good or bad -- opinions?

Question

I believe what I'm doing is called 'modular' (??) . Just learning Javascript.

I am currently keeping each module in a separate .js file. This makes for easy maintenance and troubleshooting.

Each file is formatted as a variable. This is an example of the wrapper for each of many javascript files:

var FreeHand = function( pixy ) { };

Let's say that file above (FreeHand.js) (along with many others) is called like so:

        var theBakery = coolCakeBakeryWithOnlineCakeDesign = 'the Pixy Cakes Bakery in Avondale, Arizona';

        var pixy = new Pixy( theBakery );
        var coffee = new Coffee( pixy );
        var decorator = new Decorator ( pixy );
        var freeHand = new FreeHand( pixy );
        var info = new InfoPanel ( pixy );
        var oven = new Oven( pixy );
        var pixyDust = new MagicPixyColors( pixy );
        var tips = new HandyTips( pixy );
        var signals = pixy.signals;

    </script>

signals.js is used for communication between each module, in the few cases where it's needed.

My question is, is this a good format for 'optimal memory design' or -- basically assume I'm a novice, and is this a good format at all. Opinions? Help?

PS: if you want to see a LIVE EXAMPLE (where I copied this format from) (this is my first JS project), and see it working, check out: http://threejs.org/editor/

The Alpha · Answer 1 · 2014-05-03T00:06:23.037

Actually you are doing very basic OOP by creating some object instances from some constructor functions using new keyword and I think you are referring to modular pattern but in this case it's one of broad concepts of design patterns and you are not doing that. This is the fundamental construct in modular pattern:

(function () {
    // All vars and functions are in this scope only
    // still maintains access to all globals
}());

You may read these: 1. JavaScript Module Pattern: In-Depth. 2. Learning JavaScript Design Patterns.

score 0 · Answer 2 · answered May 03 '14 at 00:30

This is great for organizing your code in development, but for production your website will take a performance hit by having to perform so many independent GET requests:

<script src="../examples/js/controls/EditorControls.js"></script>
<script src="../examples/js/controls/TransformControls.js"></script>
<script src="../examples/js/loaders/BabylonLoader.js"></script>
<script src="../examples/js/loaders/ColladaLoader.js"></script>
<script src="../examples/js/loaders/OBJLoader.js"></script>
<script src="../examples/js/loaders/PLYLoader.js"></script>
<script src="../examples/js/loaders/STLLoader.js"></script>
<script src="../examples/js/loaders/UTF8Loader.js"></script>
etc.

One solution to this is Browserify, which allows you to modularize your javascript but compile them all into one .js file for production. Then in the browser you only need to load one script instead of dozens.

Workflow-wise, you may want to look into Grunt or Gulp. These are task runners than can watch your .js files for changes, and automate your build steps. So for example, every time you make a change to a file, the browserify task will run automatically and you don't have to trigger it on the command line.

Javascript Modularized programming memory/ performance usage: good or bad -- opinions?

2 Answers2