引子

上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了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. ZOJ-2112-Dynamic Rankings(线段树套splay树)

    题意: 完成两个操作: 1.询问一个区间里第k小的数: 2.修改数列中一个数的值. 分析: 线段树套平衡树,线段树中的每个节点都有一棵平衡树,维护线段树所记录的这个区间的元素.这样处理空间上是O(nl ...

  2. Pen Editor

    Pen Editor

  3. 我家用的网络IP地址给定,MAC绑定,我买了个无线路由器,请问怎么设定能让我的电脑和手机都能上网

    我家用的网络IP地址给定,MAC绑定,我买了个无线路由器,请问怎么设定能让我的电脑和手机都能上网   房东给的IP地址是:192.168.1.5 255.255.255.0 192.168.1.1 2 ...

  4. [已解决问题] Could not find class XXX referenced from method XXX.<YYY>

    导入Jar包的问题,有时候即使引入了Jar包也会报错,比如我在引入了libsvm.jar后仍然会报此错 解决方法是: Step 1. 创建User library,随便命一个名,然后把Jar包导入 S ...

  5. CentOS-6.4-i386硬盘安装

    由于安装程序不能识别NTFS分区上的镜像,因此需要变通,网上可参考的文章分为两种方法: 1.使用分区工具创建EXT分区,再用Windows下可访问EXT分区的软件,将安装镜像拷入进行安装. 2.使用分 ...

  6. XPath总结(转)

    XPath简介 XPath是W3C的一个标准.它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计.目前有XPath1.0和XPath2.0两个版本.其中Xpath1.0是199 ...

  7. NuGet 无法连接到远程服务器-解决方法

    一. Entity Framework以下简称EF 安装EF4.3的步骤是首先安装VS扩展 NuGet,然后再使用NuGet安装EF程序包 安装完NuGet就可以安装EF了,有两种方式可以安装EF: ...

  8. android scrollview组件禁止滑动的方法

    xml配置:           android:id="@+id/sc_freement"             android:layout_width="fill ...

  9. 谋哥:App自推广这个概念就由我来创立了!

    [谋哥每天一干货,第六十四篇] 昨天谋天团新增加了一名90后会员崔崔(微信号cuinianyyyy9),之前请教过我关于怎样从.Net到移动IOS开发然后创业的问题.我说你转到IOS,你须要自己学新语 ...

  10. html contenteditable

    contenteditable 是html中的一個屬性,在HTML中,某些元素設置 contenteditable='true'  屬性時可以開啟該元素的編輯模式,contenteditable 可以 ...