Javascript沙盒模式示例实现

Question

在Stoyan Stefanov的名著"JavaScript pattern“的第101页上，他解释了沙箱模式。我非常喜欢他的书，但我真的错过了一些现实生活中的例子，以便更好地理解他所说的话。Like the sandbox pattern!

我正在寻找一个现实生活中的工作实现，就像一个复制和粘贴的起点，只是一个简单的例子，将工作完全理解它。

有吗？

Answer 1

我简化了Stoyan的例子，试图让它更容易理解发生了什么。我也对它进行了更彻底的评论。

/*First define the modules of the sandbox.  These will be defined 
as properties on the constructor function because this is a 
convenient place to keep them.*/

Sandbox.modules = {};

Sandbox.modules.returnNumbers = function(MYAPP) {
    MYAPP.return100 = function() {return 100;};
};

Sandbox.modules.returnLetters = function(MYAPP) {
    MYAPP.returnABC = function() {return "ABC";};
};


function Sandbox() {

    /* Because Sandbox is a constructor, an new object is automatically 
    created.  Because we're in the constructor, we refer to this new object 
    as 'this'. 

    A constructor would typically be used as part of an assignment, e.g. 
    myObject = new Sandbox().  

    However, it's also legitimate javascript to use a constructor without 
    the assignment by just writing new Sandbox() with no assignment.  The 
    constructor does return an object, it's just that it doesn't get 
    assigned to anything so  is discarded.

    We're going to add functionality (methods) to the 'this' object, but 
    rather than returning it, we will pass it to the callback function, so 
    the methods can be used immediately.
    */

    var args = Array.prototype.slice.call(arguments);  //Put the arguments 
    //of the call to the Sandbox constructor in an array called args.

    var callback = args.pop(); //The last argument is the callback
    var requiredmodules = args;  //The remaining arguments are the require
    // modules

    //For each of the modules in 'requiredmodules', add the module's 
    //methods to 'this'
    for (i=0; i< requiredmodules.length; i++) {
        Sandbox.modules[requiredmodules[i]](this);
    }


    //'this' now has methods returnNumbers and returnLetters

    //Call the callback.  In the example below, 'this' will be called 
    //MYAPP, which within the callback will have all the methods from 
    //the required modules.

    callback(this);

}



//Finally here is an example of usage

new Sandbox('returnNumbers', 'returnLetters', function (MYAPP) {

    console.log(MYAPP.return100());
    console.log(MYAPP.returnABC());
});

Answer 2

Stoyan Stefanov在同一章中提到了YUI version 3 implements the Sandbox pattern。The YUI add method (API)注册模块，the use method (API)在沙箱实例中加载指定的模块。API文档中有指向源js文件的链接。实际上，所有YUI代码examples都使用此模式来处理YUI库。很少需要定义模块- YUI有许多核心模块，并且有一个由社区添加的自定义模块的page。

Answer 3

所以我试着想出了这个解决方案：

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] && "string" === typeof args[0]) ? 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);
            }
        }
    }

    // initialize the required modules
    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: "Sandbox",
        version: "1.0",
        getName: function() {
            return this.name;
        }
    }
};

Sandbox.modules = {};

Sandbox.modules.color = function (box) {
    // private
    var initialColor = $('#main').css('color');    

    // set a red color
    box.setMainRed = function() {
        $('#main').css('color','red');
        return false;
    },

    // get the current color
    box.getInitialColor = function () {
        return initialColor;
    };
}

// another module
Sandbox.modules.style = function (box) {
    // set a red color
    box.setStyle = function() {
        $('#main').css('font-style','italic');
        return false;
    };
}

// page ready
$.ready(
    Sandbox(['color', 'style'], function (box) {
        console.log(box);
        box.setMainRed();
        box.setStyle();
        console.log('try access initialColor: ', box.initialColor);
        console.log('get initial color: ', box.getInitialColor());
    })
);

但我真的不确定这是否是我应该做的。特别是添加“模块”有点令人困惑。在这本书的前面，他也使用了命名空间模式来完成这个任务，但这里没有。为什么？你不能在这里也做吗？但是我没能把这两种模式结合起来。

受本书启发的命名空间模式示例：

var APP = APP || {};

// namespace function
APP.namespace = function (nsString) {
    var parts = nsString.split('.'),
            parent = APP,
            i;

    // strip redundant leading global
    if ("APP" === parts[0]) {
        parts = parts.slice(1);
    }

    for (i = 0; i < parts.length; i += 1) {
        // create a property if it doesn't exist
        if ("undefined" === typeof parent[parts[i]]) {
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
}

// constructors
APP.namespace('modules.Color');

// immediate function
APP.modules.Color = (function () {
    var currentColor = $('#main').css('color'),    
    // set a red color
    setMainRed = function() {
        $('#main').css('color','red');
        return false;
    },
    // get the current color
    getCurrentColor = function () {
        return currentColor;
    };

    // revealing module pattern
    return {
        setMainRed: setMainRed,
        getCurrentColor: getCurrentColor
    };
}());

var doSomething = function () {
    var color = APP.modules.Color;

    color.setMainRed();
    console.log(color.currentColor);
    console.log(color.getCurrentColor());

    return false;
}

// page ready
$.ready(
    doSomething()
);