Javascript Sandbox模式示例实现 [英] Javascript Sandbox Pattern example implementation

问题描述

在斯托夫诺夫斯蒂芬诺夫（Stoyan Stefanov）的伟大书JavaScript模式第101页上，他解释了沙盒模式。
我很喜欢他的书，但我真的很想念这里的一些现实生活中的例子，然后更好地了解他所谈论的内容。
像沙盒模式一样！ 阅读此处

我正在寻找一个真实的工作实现，就像一个复制和粘贴的起点，只是一个简单的例子，可以充分了解它。
有没有？

解决方案

我已经简化了Stoyan的例子，以便更容易理解什么上。我也更彻底地评论了。

  / *首先定义沙箱的模块。这些将被定义为
作为构造函数的属性，因为这是一个
方便的地方来保留它们。* / 
 
 Sandbox.modules = {}; 
 
 Sandbox.modules.returnNumbers = function（MYAPP）{
 MYAPP.return100 = function（）{return 100;}; 
}; 
 
 Sandbox.modules.returnLetters = function（MYAPP）{
 MYAPP.returnABC = function（）{returnABC;}; 
}; 
 
 
函数Sandbox（）{
 
 / *由于Sandbox是一个构造函数，因此新对象将自动创建
。因为我们在构造函数中，我们将这个新对象
称为this。 
 
构造函数通常用作赋值的一部分，例如
 myObject = new Sandbox（）。 
 
但是，使用没有
的构造函数也是合法的javascript，只需编写新的Sandbox（）即可。 
构造函数确实返回一个对象，只是它没有将
分配给任何被丢弃的东西。 
 
我们要向this对象添加功能（方法），但是
而不是返回它，我们将它传递给回调函数，所以
方法可以立即使用。 
 * / 
 
 var args = Array.prototype.slice.call（arguments）; //将调用的参数
 //添加到名为args的数组中的Sandbox构造函数。 
 
 var callback = args.pop（）; //最后一个参数是回调
 var requiredmodules = args; //剩下的参数是require 
 // modules 
 
 //对于'requiredmodules'中的每个模块，将模块的
 //方法添加到'this'
 for（i = 0; i< requiredmodules.length; i ++）{
 Sandbox.modules [requiredmodules [i]]（this）; 
} 
 
 
 //'这个'现在有方法returnNumbers和returnLetters 
 
 //调用回调。在下面的例子中，'这个'将被称为
 // MYAPP，它在回调中将具有
 //所需模块的所有方法。 
 
回调（this）; 
 
} 
 
 
 
 //最后这里是一个使用示例
 
 new Sandbox（'returnNumbers'，'函数（MYAPP）{
 
 console.log（MYAPP.return100（））; 
 console.log（MYAPP.returnABC（））; 
}）; 
  

On Page 101 of Stoyan Stefanov's great book "JavaScript Patterns" he explains the sandbox pattern. I liked his book much but I really missed some real life examples here and then to better understand what he talks about. Like the sandbox pattern! Read here

I'm looking for a real life working implementation, like a copy&paste starting point, just a simple example that will work to fully understand it. Is there any?

解决方案

I've simplified Stoyan's example in an attempt to make it easier to understand what's going on. I've also commented it more thoroughly.

/*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());
});

这篇关于Javascript Sandbox模式示例实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！