JavaScript Patterns 5.5 Sandbox Pattern

Drawbacks of the namespacing pattern

reliance on a single global variable to be the application ' s global. In the namespacing-pattern, there is no-to-have-versions of the same application or library run on the same page, Because they both need the same global symbol name, for example, MYAPP.

long, dotted names to type and resolve at runtime, for example, MYAPP.utilities.array.

A Global Constructor

Using The sandbox would look like this:

New Sandbox (function  box) {    //  your code here ... });

The object box would be a like MYAPP in the namespacing example-it would have all the library functionality you NE Ed to make your code work.

function (box) {    //  console.log (box); });  

Module names is passed as individual argument

function (box) {    //  console.log (box); });  

When no modules is passed, the sandbox would assume ' * '.

function (box) {    //  console.log (box); }); Sandbox (  box) {    //  console.log (box); });  

Protect the global namespace by has your code wrapped into callback functions.

Sandbox (' Dom ', ' event ',function(box) {//Work with Dom and eventSandbox (' Ajax ',function(box) {//another sandboxed "box" Object        //This "box" was not the same as        //the "box" outside this function        //...        //Done with Ajax    }); //no trace of Ajax module here}); 

Adding Modules

Sandbox.modules = {}; Sandbox.modules.dom=function(box) {box.getelement=function () {}; Box.getstyle=function () {}; Box.foo= "Bar";}; Sandbox.modules.event=function(box) {//access to the Sandbox prototype if needed:    //box.constructor.prototype.m = "MMM";box.attachevent=function () {}; Box.dettachevent=function () {};}; Sandbox.modules.ajax=function(box) {box.makerequest=function () {}; Box.getresponse=function () {};};

Implementing the Constructor

functionSandbox () {//turning arguments to an array    varargs =Array.prototype.slice.call (arguments),//The last argument is the callbackCallback=Args.pop (),//modules can passed as an array or as individual parametersModules= (Args[0] &&typeofArgs[0] = = = "string")? Args:args[0], I; //Make sure the function is called    //As a constructor    if(! ( This instanceofSandbox)) {        return NewSandbox (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(Iinchsandbox.modules) {if(Sandbox.modules.hasOwnProperty (i)) {Modules.push (i);  //  Sandbox.modules[i] (this);             }        }    }    // Initialize the required modules (kaibo:the code below in Yellowcan is omitted by the code in yellow above to avoid t He 2nd loop) for (i = 0; i < modules.length; i + = 1) {Sandbox.modules[modules[i]] (thi    s); }

        //Call the callbackCallback ( This);}//Any prototype properties as neededSandbox.prototype={name:"My Application", Version:"1.0", GetName:function () {        return  This. Name; }};

References :

JavaScript Patterns- by Stoyan Stefanov (O ' Reilly)