How to write simple, extensible, modular Javascript

Question

I need a mechanism whereby people can extend my base code with their own modules - but I'm struggling to come-up with a simple mechanism to do that.

Example: a function called 'test' which users can extend. Each user module is loaded after the original - so each one needs to build on the last (the order they're loaded should not matter or can be controlled by naming)

I started to play with something like this

var test = function() { // the master function
    console.log("1");
}

var ltest = test; // module 1
var test = function() {
    ltest();
    console.log("2");
}

var ltest2 = test; // module 2
var test = function() {
    ltest2();
    console.log("3");
}

Then, when 'test' is called, it will run everyone's code (assuming no-one forgot their callback!!)

That works, but it relies on each module declaring it's own, unique 'callback' variable (ltest, ltest2) - if someone uses the same variable, we'll get a 'call stack exceeded' as those variables are global in scope...

Can anyone suggest a cleverer/better system - or point me to some examples of the same thing?

There's loads of material on inheritance but I don't want to create new things which extend the old one - I just want to extend the old one!!

p.s. taking the anonymous function stuff from the module pattern - I got this

var test = function() {
    console.log("1");
}

(function() {
    var oldtest = test;
    test = function() {
        oldtest();
        console.log("2");
    }
}())

(function() {
    var oldtest = test;
    test = function() {
        oldtest();
        console.log("3");
    }
}())

Which is probably the simplest solution to my question - but not necessarily the best system to use (as it's dependant on the author to remember to callback the code - a dodgy module would break everything)

You might get some ideas from [Addy Osmani's Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/). — Teemu, Jun 25 '13 at 15:17
Did you take a look at TypeScript? http://www.typescriptlang.org — Paul Sinnema, Dec 03 '13 at 12:31

score 1 · Answer 1 · answered Jun 25 '13 at 15:23

1

The Module Pattern is what you need.

In particular the 'Augmentation' or 'Loose Augmentation' patterns :

var MODULE = (function (my) {
    var old_moduleMethod = my.moduleMethod;

    my.moduleMethod = function () {
        // method override, has access to old through old_moduleMethod...
    };

    return my;
}(MODULE || {}));

answered Jun 25 '13 at 15:23

Romain Meresse

3,044
25
29

This is also very interesting - if nothing else my understanding of variable scope and anonymous functions has exploded in the last 20 mins!! – Jun 25 '13 at 15:44
I took the way that pattern uses anonymous functions to encapsulate values and I've updated the first question with it (as code doesn't show well in comments) – Jun 25 '13 at 16:07

Paul S. · Answer 2 · 2013-06-25T15:29:45.133

You could make a function like this

function extendFunction(fn, pre, post) {
    return function () {
        var arg = arguments;
        if (pre) arg = pre.apply(this, arg);   // call pre with arguments
        arg = fn.apply(this, arg);             // call fn with return of pre
        if (post) arg = post.apply(this, arg); // call post with return of fn
        return arg;
    };
}

then extend as follows

var test = function () { // the master function
    console.log("1");
};
test = extendFunction(
    test, // function to extend
    null, // thing to do first
    function() {console.log("2");} // thing to do after
);
test = extendFunction(
    test,
    null,
    function() {console.log("3");}
);
test(); // 1, 2, 3

This is very different to the normal meaning of "extend" though, where you give new properties to Objects or set up prototype chains, and to "module" which normally involves wrapping all your code in a function expression so that you don't pollute the namespace.

This is very interesting - all these functions are part of a chain/waterfall of async events (related to storing or retrieving stuff from a NOSQL database) - so this approach would work really well I think... — , Jun 25 '13 at 15:31

How to write simple, extensible, modular Javascript

2 Answers2