zoukankan      html  css  js  c++  java
  • 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 way to have two 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 will look like this:

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

    The  object  box will  be  like  MYAPP in  the  namespacing  example—it  will  have  all  the library functionality you need to make your code work.

    Sandbox(['ajax', 'event'], function (box) {
    
        // console.log(box);
    
    }); 

    module names are passed as individual argument

    Sandbox('ajax', 'dom', function (box) {
    
        // console.log(box);
    
    }); 

    when no modules are passed, the sandbox will assume '*'.

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

    protect the global namespace by having your code wrapped into callback functions.

    Sandbox('dom', 'event', function (box) {
    
        // work with dom and event
        
        Sandbox('ajax', function (box) {
    
            // another sandboxed "box" object
    
            // this "box" is 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

    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] && typeof args[0] === "string") ? 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);
    
                    // Sandbox.modules[i](this);
    
                }
    
            }
    
        }
    
        // initialize the required modules (Kaibo: The code below in yellowcan be omitted by the code in yellow above to avoid the 2nd loop)
    
        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: "My Application", version: "1.0", getName: function () { return this.name; } };

    References: 

    JavaScript Patterns - by Stoyan Stefanov (O`Reilly)

  • 相关阅读:
    HTML初步学习7
    HTML初步学习6
    HTML初步学习5
    HTML初步学习4
    poj3449Geometric Shapes
    poj2074Line of Sight(直线相交)
    2014 Multi-University Training Contest 4
    poj3347Kadj Squares
    poj1556The Doors
    poj3608Bridge Across Islands(凸包间最小距离)
  • 原文地址:https://www.cnblogs.com/haokaibo/p/Sandbox-Pattern.html
Copyright © 2011-2022 走看看