Thực hiện ví dụ mẫu hộp cát Javascript

Question

Trên trang 101 của cuốn sách tuyệt vời của Stoyan Stefanov "Các mẫu JavaScript", ông giải thích mẫu sandbox. Tôi thích cuốn sách của anh ấy nhiều nhưng tôi thực sự đã bỏ lỡ một số ví dụ thực tế về cuộc sống ở đây và sau đó để hiểu rõ hơn về những gì anh ấy nói. Like the sandbox pattern!

Tôi đang tìm một triển khai thực tế hoạt động thực tế, như một điểm bắt đầu dán &, chỉ là một ví dụ đơn giản sẽ hoạt động để hiểu đầy đủ.

Có cái nào không?

Answer 1

Tôi đã đơn giản hóa ví dụ của Stoyan trong một nỗ lực để làm cho nó dễ dàng hơn để hiểu những gì đang xảy ra. Tôi cũng đã nhận xét kỹ hơn.

/*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

Vì vậy, tôi đã cố gắng và đã đưa ra giải pháp này: http://jsfiddle.net/FhHSv/2/

Nhưng tôi thời tiết thực sự không chắc chắn đây là những gì tôi cần phải làm. Đặc biệt việc thêm "mô-đun" hơi khó hiểu. Cũng sớm hơn trong cuốn sách, ông sử dụng mẫu không gian tên cho nhiệm vụ này, nhưng không phải ở đây. Tại sao? Bạn không thể làm điều đó ở đây? Nhưng tôi đã không kết hợp hai mẫu này.

mẫu Namespace dụ lấy cảm hứng từ cuốn sách: http://jsfiddle.net/uWXgj/

Answer 3

Stoyan Stefanov đề cập đến trong chương tương tự mà YUI version 3 implements the Sandbox pattern. The YUI add method(API) đăng ký mô-đun và the use method(API) tải các chỉ định được chỉ định trong trường hợp sandbox. Có các liên kết đến tệp js nguồn trong tài liệu API. Hầu như tất cả mã YUI examples sử dụng mẫu này để làm việc với thư viện YUI. Xác định một mô-đun là hiếm khi cần thiết - YUI có nhiều lõi và có một page cho các mô-đun tùy chỉnh được cộng đồng thêm vào.

Answer 4

Dưới đây là ví dụ với ý kiến ​​chi tiết:

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

Liên kết đến JSFiddle: http://jsfiddle.net/Lodse4hj/