Javascript沙箱模式示例实现

Question

在Stoyan Stefanov伟大的书籍“JavaScript模式”的第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

所以，我想和这个解决方案提出了： http://jsfiddle.net/FhHSv/2/

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

命名空间格局例如： http://jsfiddle.net/uWXgj/

Answer 3

斯托扬斯特凡提到在同一章是YUI version 3 implements the Sandbox pattern。 The YUI add method(API)寄存器模块和the use method(API)在沙盒实例中加载指定的模块。在API文档中有链接到源js文件。 几乎所有的YUI代码examples都使用此模式来处理YUI库。很少需要定义模块--YUI有许多核心模块，并且社区添加了定制模块的page。

Answer 4

下面是例子有详细的注释：

(function(){ 

/* function constructor */ 
function Sandbox(){ 
    //Change arguments to array, as you know 'arguments' are not a true JS array 
    //Array.prototype.slice will provide shallow copy of 'arguments' 
    var args = Array.prototype.slice.call(arguments), 
     //remove last element from array and return it to caller 
     //our last argument is callback 
     callback = args.pop(), 
     //We can pass modules as strings or as array 
     //if first element is a string, take all arguemnts 
     //otherwise take one element (array) 
     modules = (args[0] && typeof args[0] === "string") ? args : args[0], 
     modulesLength = modules.length, 
     i; 

    //handle calling function constructor without 'new' keyword 
    if(!(this instanceof Sandbox)){ 
     //Invoke me again! 
     return new Sandbox(modules, callback); 
    } 

    //we can add properties to 'this' 
    this.someProp = "Initialized property"; 

    //Initialize all required modules 
    for(i = 0; i < modulesLength ; i++){ 
     //pass reference to 'this' for each required module and invoke it 
     //'this' is poiting to new object which was created 
     //after calling new Sandbox() 
     Sandbox.modules[modules[i]](this); 
    } 

    //Invoke callback and pass 'this' 
    //now 'this' cotains all methods and properties 
    //attached in modules functions 
    callback(this); 
}; 

//We can optionally create Sandbox methods 
Sandbox.prototype = { 
    version: "1.0.1", 
    createdAt: new Date() 
}; 

/* function as a first class object - saving all modules*/ 
Sandbox.modules = {}; 

/*Create $http,$scope and $ajax modules */ 
/*We need box object to add new functionality*/ 
/*We are creating new methods by attatching them to box obect*/ 
/*box is a reference to 'this' called as initializator from function constructor*/ 
Sandbox.modules.$http = function(box){ 

    box.get = function(){ 
     console.log("$http.get"); 
    }; 

    box.post = function(){ 
     console.log("$http.post"); 
    }; 

    box.prop = "I'm $http property"; 
}; 

Sandbox.modules.$scope = function(box){ 

    box.inject = function(param1, param2){ 
     console.log("$scope.inject: " + param1 + " " + param2); 
    }; 

    box.destroy = function(o){ 
     console.log("$scope.destroy: " + o + " has been destroyed!"); 
    }; 

}; 

Sandbox.modules.$ajax = function(box){ 
    box.call = function(){ 
     console.log("$ajax.call"); 
    };  
}; 

//Sandbox without calling 'new' was handled in function constructor 
//We are requesting for 2 modules: $scope and $http 
//callback function is our new playground 
//box object has $scope and $http methods and properties inside, we are ready to go! 
Sandbox(["$scope", '$http'], function(box){ 
    console.log(box); //contains methods from $scope and $http 
    console.log(box.inject("John", "Doe")); 
    console.log(box.post()); 

    //we can event nest our playgrounds 
    Sandbox(["$ajax"], function(box){ 
     console.log(box); //contains only $ajax methods and properties 
     console.log(box.call()); 

     //we can't invoke $scope or $http functions here 
    }); 

    //we can't invoke $ajax functions here 
}); 
})(); 

链接的jsfiddle：http://jsfiddle.net/Lodse4hj/