初涉JavaScript模式 (12) : 沙箱模式

引子

上一篇說了模塊模式，而對於其中的命名空間模式其實也是有着一些問題，比如每添加一個模塊或則深入疊加都會導致長命名，並且對於多個庫的不同版本同時運行，一不小心就會污染全局標識，而這兩天也發現了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 < 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對象。

應用場景

當然我們最關心的還是沙箱模式主要應用在哪些場景，下面是沙箱模式幾個經典的應用場景：

```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/