Blog

자바스크립트 샌드박스 패턴

On 3 2월, 2015 By With 0 Comments

자바스크립트 샌드박스 패턴

어떤 모듈이 다른 모듈과 그 모듈의 샌드박스에 영향을 미치지 않고 동작할 수 있는 환경을 제공한다. 라고 책에 나와있던데 모듈네임스페이스만 보호하면 SandBox내부에서 아무 작업이나 해도 되는듯 싶다.

싱글톤에 이은 신세계발견

정리

샌드박스는 말그대로 유일무이한 샌드박스 공간을 제공한다.

샌드박스 생성자 함수의 프로퍼티로 사용할 모듈들을 정의하여 샌드박스 호출시 선택적으로 모듈을 사용할 수 있다.(프로포타입에 추가할 경우 모든 모듈(메서드)을 공유하게 된다)

샌드박스 모듈은 샌드박스의 scope를 파라미터로 받아서 해당 scope에 접근이 가능하며 콜백함수 역시 파라미터로  this를 참조한다.

샌드박스의 프로토타입에 메소드를 선언하면 모든 인스턴스가 해당 내용을 공유하지만 모듈에서 scope만 참조하도록하면 생성자 함수의 인스턴스(this)를 참조하기 때문에 개별 scope를 가지게 된다.


JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var SandBox = function(){
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);
}
 
if(!modules || modules === "*" || modules[0] === "*"){
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);
}
 
if(callback !== undefined && typeof callback == "function"){
callback(this);
}
};
SandBox.prototype = {
design: "SandBox Pattern",
version: 1.10,
getName: function(){
return this.name;
},
getSandBox: function(){
console.log(this);
}
}
SandBox.modules = {};
SandBox.modules.dom = function(box){
box.getElement = function(){};
box.getStyle = function(){};
box.foo = "bar";
};
SandBox.modules.event = function(box){
box.constructor.prototype.m = "mmm";
box.attachEvent = function(){ console.log("attachEvent!!")};
box.detachEvent = function(){ console.log("detachEvent!!")};
};
 
SandBox(['dom','event'],jaewonPlayGround)
function jaewonPlayGround(box){
box.attachEvent();
box.getSandBox();
console.log(box.design)
}
SandBox(['dom','event'],jaewonPlayGround1)
function jaewonPlayGround1(box){
box.detachEvent();
box.getSandBox();
console.log(box.design)
}
,