javascript - Javascriptサンドボックスパターンの実装例

Question

Stoyan Stefanovのすばらしい本「JavaScriptPatterns」の101ページで、彼はサンドボックスパターンについて説明しています。私は彼の本がとても好きでしたが、彼が何について話しているのかをよりよく理解するために、ここで実際の例をいくつか見逃しました。 サンドボックスパターンのように！

コピー＆ペーストの開始点のような、実際に機能する実装を探しています。これは、それを完全に理解するために機能する単純な例です。

ありますか？

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バージョン3がサンドボックスパターンを実装していると述べています。YUI addメソッド （API）はモジュールを登録し、useメソッド （API）は指定されたモジュールをサンドボックスインスタンスにロードします。APIドキュメントにソースjsファイルへのリンクがあります。事実上すべてのYUIコード例は、このパターンを使用してYUIライブラリを操作します。モジュールの定義が必要になることはめったにありません。YUIには多くのコアモジュールがあり、コミュニティによって追加されたカスタムモジュールのページがあります。

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

しかし、私は本当に天気がよくわからないので、これが私がすべきことです。特に「モジュール」を追加するのはやや混乱します。また、本の前半で、彼はこのタスクに名前空間パターンを使用していますが、ここでは使用していません。なんで？ここでもできませんか？しかし、私はこれら2つのパターンを組み合わせることができませんでした。

本に触発された名前空間パターンの例：

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()
);

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/