引子

上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了JSer对此也有解决办法,由于不是特别喜欢这种模式,但是在YUI3中大量的用到了这种模式,顾从网上扒了一篇来说明一下,这种模式就是沙箱模式。

什么是沙箱模式

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

具体实现

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

```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
  • 存在一个类型检查语句,检查this是否为Sandbox的实例,如果为否,则是忽略了new的调用,那么我们会再次以构造函数的形式调用该函数
  • 所需的模块可以通过数组的形式传递,或者单个参数传递,也可以通过通配符*的形式传递。
  • 该构造函数的最后一个参数是一个回调函数。该回调函数将会在使用新创建的实例时最后被调用。这个回调函数实际上就是我们所用的沙箱,它获得了一个填充了所需功能的box对象。

应用场景

当然我们最关心的还是沙箱模式主要应用在哪些场景,下面是沙箱模式几个经典的应用场景:
```javascript
//使用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并不相同
})
})
```

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

添加模块

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

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

结语

从哪搬得砖

  • http://www.microsoft.com/en-GB/developers/articles/scalable-javascript-application-architecture
  • http://www.g7blogs.com/
  • http://snipplr.com/view/60088/

初涉JavaScript模式 (12) : 沙箱模式的更多相关文章

  1. JavaScript设计模式-12.门面模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 初涉JavaScript模式系列 阶段总结及规划

    总结 不知不觉写初涉JavaScript模式系列已经半个月了,没想到把一个个小点进行放大,竟然可以发现这么多东西. 期间生怕对JS的理解不到位而误导各位,读了很多书(个人感觉JS是最难的oo语言),也 ...

  3. 关于javascript的沙箱模式以及缓存方法

    在javascript函数代码中,经常会不经意出现全局变量,很可能造成对全局对象的污染,由于这种弊端的存在,那么沙箱模式油然而生.沙箱模式又称为沙盒模式.隔离模式.在js中只有函数可以限定变量作用域, ...

  4. 初涉JavaScript模式 (11) : 模块模式

    引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中去,在北川的提醒下,我才发觉这是非常不严谨的,于是我把这些内容拎出来,这就是这篇的由来. 什么是模块模式 在 ...

  5. 初涉JavaScript模式 (7) : 原型模式 【三】

    组合使用构造函数模式和原型模式 上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式.构造函数用来定义 ...

  6. 初涉JavaScript模式 (5) : 原型模式 【一】

    什么是原型模式? 原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象.--引自JavaScript设计模式 我们创建的每一个函数都有一个prototype ...

  7. 初涉JavaScript模式 (4) : 构造函数

    什么是构造函数? 构造函数 是一种特殊的方法 主要用来在创建对象时初始化对象 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中 特别的一个类可以有多个构造函数 可根据其参数个数的不 ...

  8. javascript沙箱模式

    沙箱模式解决了命名空间模式的如下几个缺点: 1.对单个全局变量的依赖变成了应用程序的全局变量依赖.在命名空间模式中,是没有办法使同一个应用程序或库的2个版本运行在同一个页面中.2.对这种以点分割的名字 ...

  9. 读书笔记之 - javascript 设计模式 - 享元模式

    本章探讨另一种优化模式-享元模式,它最适合于解决因创建大量类似对象而累及性能的问题.这种模式在javascript中尤其有用,因为复杂的javascript代码很快就会用光浏览器的所有可用内存,通过把 ...

随机推荐

  1. 【最小生成树】Codeforces 707B Bakery

    题目链接: http://codeforces.com/problemset/problem/707/B 题目大意: 给你N个点M条无向边,其中有K个面粉站,现在一个人要在不是面粉站的点上开店,问到面 ...

  2. android.process.acore和system进程

    从源码看来,android.process.acore进程应该是一些基本功能的载入程序. android-4.3_r2.2中,它包括以下项目: 1.UserDictionaryProvider < ...

  3. Eclipse集成环境中Android SDK下载及更新失败解决方案

    由于公司新项目比较忙,有好长一段时间没碰Android开发咯! 近期闲来在网上下了个开源的应用想拿来自己学习下其中的源码及整体设计,当我把下下来的项目导入Eclipse中时,报如下警告: 原因是我本地 ...

  4. Selenium webdriver 操作IE浏览器

    V1.0版本:直接新建WebDriver使用 import org.openqa.selenium.WebDriver; import org.openqa.selenium.ie.InternetE ...

  5. 武汉Uber优步司机奖励政策(1月18日~1月24日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. 低版本Xcode 出现could not find developer disk image问题

    解决Xcode在ipad/iphone9.2系统真机测试时出现could not find developer disk image问题,只要拷贝这个文件(链接: http://pan.baidu.c ...

  7. ASP.NET MVC3 ModelState.IsValid为false的问题

    模型验证通常在submit后调用Action之前进行验证,eg: public class ZhengXing    {        [Key]        public int ZhengXin ...

  8. Rational Rose与UML教程

    在学UML的过程中,Rational Rose的角色无比重要.现在能找到的大多数是2003的,但下面连接是2007. http://blog.csdn.net/skl_TZ/article/detai ...

  9. IE JavaScript字符串转换成Date后出现NaN错误

    参考的博文:http://blog.csdn.net/zhu7478848/article/details/53388582 在IE浏览器下, JavaScript字符串转换成Date后会出现NaN错 ...

  10. Miller-Rabin质数测试

    Miller-Rabin质数测试 本文主要讨论使用Miller-Rabin算法编写素数的判定算法,题目来源于hihocoder. 题目 题目要求 时间限制:10000ms 单点时限:1000ms 内存 ...