javascript代码实例教程-沙箱模式(Sandbox Pattern)

发布时间:2019-02-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-沙箱模式(Sandbox Pattern)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了JSer对此也有解决办法,由于不是特别喜欢这种模式,但是在YUI3中大量的用到了这种模式,顾从网上扒了一篇来说明一下,这种模式就是沙箱模式。

 

什么是沙箱模式

 

沙箱模式(Sandbox Pattern),顾名思义沙箱模式是创建了一个"沙箱",可以理解为创建了一个黑盒,我们不管在里面做什么都不会影响到外面。而在JavaScript中就意味着,在沙箱中的操作被限死在当前作用域,不会对其他模块和个人沙箱造成任何影响。

 

具体实现

 

废话不多说。我们来看看沙箱模式的具体实现,如下代码所示:

 

    function Sandbox() {

        VAR args = Array.PRototyPE.slice.call(arguments),

            callback = args.pop(),

            modules = (args[0] && typeof args[0] === "string") ? args : args[0],

            i;

        if (!(this instanceof Sandbox)) {

            return new Sandbox(modules, callback);

        }

        this.a = 1;

        this.b = 2;

        if (!modules || modules === '*') {

            modules = [];

            for (i in Sandbox.modules) {

                if (Sandbox.modules.hasOwnProperty(i)) {

                    modules.push(i);

                }

            }

        }

        for (i = 0; i < modules.length; i++) {

            Sandbox.modules[modules[i]](this);

        }

        callback(this);

    }

    Sandbox.prototype = {

        name: ";my Sandbox",

        version: "1.0",

        getName: function() {

            return this.name;

        }

    }

存在一个类型检查语句,检查this是否为Sandbox的实例,如果为否,则是忽略了new的调用,那么我们会再次以构造函数的形式调用该函数

所需的模块可以通过数组的形式传递,或者单个参数传递,也可以通过通配符*的形式传递。

该构造函数的最后一个参数是一个回调函数。该回调函数将会在使用新创建的实例时最后被调用。这个回调函数实际上就是我们所用的沙箱,它获得了一个填充了所需功能的box对象。

应用场景

 

当然我们最关心的还是沙箱模式主要应用在哪些场景,下面是沙箱模式几个经典的应用场景:

 

    //使用new操作符

    new Sandbox(function(box) {

        console.LOG(box);

    })

    //忽略new操作符的方法

    Sandbox(['ajax', 'event'], function(box) {

        console.log(box);

    })

    //直接传单个参数

    Sandbox('ajax', 'dom', function(box) {

        console.log(box);

    })

    //Sandbox的嵌套

    Sandbox('dom', 'event', function(box) {

        //一些代码

        Sandbox('ajax', function(box) {

            //这里的box和外部对象的box并不相同

        })

    })

从上面的代码可以发现沙箱模式可以通过将代码包装到回调函数中从而保护全局命名空间,而且他依赖注入的方式也很好的说明了他需要哪些模块,清晰了整个代码的结构。

 

添加模块

 

沙箱模式可以通过对构造函数添加静态属性扩展模块

 

Sandbox.modules={};

    Sandbox.modules.dom=function(box){

        box.getElement=function(){};

        box.getStyle=function(){};

        box.foo="bar";

    }

    Sandbox.modules.event=function(box){

        box.attachEvent=function(){};

        box.dettachEvent=function(){};

    }

    Sandbox.modules.ajax=function(box){

        box.makeRequest=function(){};

        box.getRequest=function(){};

    }

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-沙箱模式(Sandbox Pattern)全部内容,希望文章能够帮你解决javascript代码实例教程-沙箱模式(Sandbox Pattern)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。