引子

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

    CA Loves GCD Accepts: 135 Submissions: 586 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 2621 ...

  2. Majority Element II——LeetCode

    Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...

  3. datagridview bindingsource刷新数据

    调用bindindsource的ResetBindings() 方法

  4. 配置Chrome启动参数支持本地AJAX请求,解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题

    直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...

  5. the identity used to sign the executable is no longer valid.解决方法

    the identity used to sign the executable is no longer valid.解决方法 一.重新下载Provisioning Profile 1.到devel ...

  6. linux —— 学习笔记(环境变量的设置)

    目录 环境变量概要 与环境变量相关的文件 设置环境变量 注意以及相关 1.环境变量概要 环境变量,简单来说,是储存了环境信息的变量.它可以让你在不指明全部路径的情况下执行某脚本或某应用程序,比如在 l ...

  7. 为什么使用spring Struts 等框架开发

    转载自:http://www.cnblogs.com/sharpxiajun/p/3936268.html 今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入, ...

  8. boost库在工作(32)网络服务端之二

    在这个例子里,服务器对象主要使用boost::asio::io_service对象,这个对象主要用来构造异步接收数据使用,接着定义boost::asio::ip::tcp::acceptor对象,这个 ...

  9. 文字保护纱-Material Design

    Ok,关于这个Material Design 都快被说烂了,他被开发者越来越熟悉的程度,却与市场上的单薄身影形成了鲜明的对比,以至于每当我提及Material Design时就像祥林嫂附身一样. 有些 ...

  10. css之选择器

    我们都用过jquery,使用jquery选择器,非常的简单,最近刚好有项目上手,拿起书本看了一下,发现好多的东西都忘掉了,好记性不如烂笔头,就将这章内容记录下来,现在我们看下css原生的选择器. 选择 ...