JavaScript Patterns 5.5 Sandbox Pattern

浏览数：31 / 时间：2015年06月12日

Drawbacks of the namespacing pattern

• Reliance on a single global variable to be the application’s global. In the namespacing pattern, there is no way to have two versions of the same application or library run on the same page, because they both need the same global symbol name, for example, MYAPP.

• Long, dotted names to type and resolve at runtime, for example, MYAPP.utilities.array.

A Global Constructor

Using the sandbox will look like this:

new Sandbox(function (box) {

    // your code here...

});

The object box will be like MYAPP in the namespacing example—it will have all the library functionality you need to make your code work.

Sandbox([‘ajax‘, ‘event‘], function (box) {

    // console.log(box);

});

module names are passed as individual argument

Sandbox(‘ajax‘, ‘dom‘, function (box) {

    // console.log(box);

});

when no modules are passed, the sandbox will assume ‘*‘.

Sandbox(‘*‘, function (box) {

    // console.log(box);

});

Sandbox(function (box) {

    // console.log(box);

});

protect the global namespace by having your code wrapped into callback functions.

Sandbox(‘dom‘, ‘event‘, function (box) {

    // work with dom and event
    
    Sandbox(‘ajax‘, function (box) {

        // another sandboxed "box" object

        // this "box" is not the same as

        // the "box" outside this function

        //...

        // done with Ajax

    });

    // no trace of Ajax module here

});

Adding Modules

Sandbox.modules = {};

Sandbox.modules.dom = function (box) {

    box.getElement = function () {};

    box.getStyle = function () {};

    box.foo = "bar";

};

Sandbox.modules.event = function (box) {

    // access to the Sandbox prototype if needed:

    // box.constructor.prototype.m = "mmm";

    box.attachEvent = function () {};

    box.dettachEvent = function () {};

};

Sandbox.modules.ajax = function (box) {

    box.makeRequest = function () {};

    box.getResponse = function () {};

};

Implementing the Constructor

function Sandbox() {

    // turning arguments into an array

    var args = Array.prototype.slice.call(arguments),

        // the last argument is the callback

        callback = args.pop(),

        // modules can be passed as an array or as individual parameters

        modules = (args[0] && typeof args[0] === "string") ? args : args[0],

        i;

    // make sure the function is called

    // as a constructor

    if (!(this instanceof Sandbox)) {

        return new Sandbox(modules, callback);

    }

    // add properties to `this` as needed:

    this.a = 1;

    this.b = 2;

    // now add modules to the core `this` object

    // no modules or "*" both mean "use all modules"

    if (!modules || modules === ‘*‘) {

        modules = [];

        for (i in Sandbox.modules) {

            if (Sandbox.modules.hasOwnProperty(i)) {

                modules.push(i);

                // Sandbox.modules[i](this);

            }

        }

    }

    // initialize the required modules (Kaibo: The code below in yellowcan be omitted by the code in yellow above to avoid the 2nd loop)

    for (i = 0; i < modules.length; i += 1) {

        Sandbox.modules[modules[i]](this);

    }

    // call the callback

    callback(this);

}

// any prototype properties as needed

Sandbox.prototype = {

    name: "My Application",

    version: "1.0",

    getName: function () {

        return this.name;

    }

};