JavaScript SandBox 샌드박스 디자인 패턴

샌드박스 모드는 YUI3 코어에서 일반적입니다. 전역 개체를 오염시키지 않기 위해 동일한 생성자(Constructor)를 사용하여 독립적이고 간섭하지 않는(자체 포함) 인스턴스 개체를 생성하는 방법입니다.

네임스페이스

JavaScript 자체는 네임스페이스 메커니즘을 제공하지 않으므로 다양한 함수, 개체 및 변수 이름으로 인해 전역 공간이 오염되는 것을 방지하기 위해 일반적인 접근 방식은 애플리케이션 또는 라이브러리 고유한 전역 개체를 만들고 이 개체에 모든 메서드와 속성을 추가합니다.

코드 목록 1: 기존 네임스페이스 모드

/* BEFORE: 5 globals */
// constructors
function Parent() {}
function Child() {}
// a variable
var some_var = 1;
// some objects
var module1 = {};
module1.data = {a: 1, b: 2};
var module2 = {};
/* AFTER: 1 global */
// global object
var MYAPP = {};
// constructors
MYAPP.Parent = function() {};
MYAPP.Child = function() {};
// a variable
MYAPP.some_var = 1;
// an object
MYAPP.modules = {};
// nested objects
MYAPP.modules.module1 = {};
MYAPP.modules.module1.data = {a: 1, b: 2};
MYAPP.modules.module2 = {};

이 코드에서는 전역 객체 MYAPP를 생성하고 다른 모든 객체와 함수를 MYAPP에 속성으로 연결합니다.

일반적으로 이 방법은 이름 충돌을 피하는 더 좋은 방법이며 많은 프로젝트에서 사용되지만 이 방법에는 몇 가지 단점이 있습니다.

추가해야 하는 모든 함수와 변수에는 접두사를 추가해야 합니다.

전역 개체가 하나만 있기 때문에 일부 코드가 전역 개체를 임의로 수정하고 나머지 코드가 수동적으로 업데이트될 수 있음을 의미합니다.

전역 생성자

전역 객체 대신 전역 생성자를 사용할 수 있습니다. 이 생성자를 Sandbox()라고 명명했습니다. 콜백 함수를 전달할 수도 있습니다. 이 콜백 함수는 코드를 저장하는 독립적인 샌드박스 환경입니다.

코드 목록 2: 샌드박스 사용

new Sandbox(function(box){
    // your code here...
});

샌드박스에 몇 가지 다른 기능을 추가해 보겠습니다.

'new' 연산자를 사용하지 않고도 샌드박스를 생성할 수 있습니다.

Sandbox() 생성자는 객체를 생성하는 데 필요한 모듈의 이름을 정의하는 몇 가지 추가 구성 매개변수를 허용합니다. 우리는 코드를 더욱 모듈화하기를 원합니다.

위의 기능을 갖춘 후 객체를 초기화하는 방법을 살펴보겠습니다.

코드 목록 3은 'new' 연산자 없이 'ajax' 및 'event' 모듈을 사용하여 객체를 생성할 수 있음을 보여줍니다.

코드 목록 3: 배열 형식으로 모듈 이름 전달

Sandbox(['ajax', 'event'], function(box){
    // console.log(box);
});

코드 목록 4: 독립 매개변수 형식으로 모듈 이름 전달

Sandbox('ajax', 'dom', function(box){
    // console.log(box);
});

코드 목록 5 와일드카드 문자 '*'를 생성자에 인수로 전달할 수 있음을 보여줍니다. 이는 사용 가능한 모든 모듈이 호출된다는 것을 의미합니다. 편의상 모듈 이름이 생성자에 인수로 전달되지 않으면, 생성자는 '*'를 누락된 모듈로 처리하여 전달할 매개변수를 저장합니다.

코드 목록 5: 사용 가능한 모듈 호출

Sandbox('*', function(box){
    // console.log(box);
});
Sandbox(function(box){
    // console.log(box);
});

코드 목록 6은 샌드박스 개체를 여러 번 초기화할 수 있으며 서로 걱정하지 않고 중첩할 수도 있음을 보여줍니다. 갈등.

코드 목록 6: 중첩된 샌드박스 인스턴스

Sandbox('dom', 'event', function(box){
    // work with dom and event
    Sandbox('ajax', function(box) {
    // another sandboxed "box" object
    // this "box" is not the same as
    // the "box" outside this function
    //...
    // done with Ajax
    });
    // no trace of Ajax module here
});

위의 예에서 볼 수 있듯이 샌드박스 모드를 사용하면 모든 코드 로직을 콜백 함수로 래핑하여 다양한 인스턴스를 생성합니다. 필요한 모듈을 기반으로 하며 이러한 인스턴스는 서로 간섭하지 않고 독립적으로 작동하므로 전역 네임스페이스를 보호합니다.

이제 Sandbox() 생성자를 구현하는 방법을 살펴보겠습니다.

모듈 추가

기본 생성자를 구현하기 전에 Sandbox() 생성자에 모듈을 추가하는 방법을 살펴보겠습니다.

Sandbox() 생성자 함수도 객체이기 때문에 'modules'라는 속성을 추가할 수 있습니다. 이 속성은 키-값 쌍 집합을 포함하는 객체가 됩니다. -value Key는 등록해야 하는 모듈의 이름이고, Value는 모듈의 진입 함수입니다. 생성자가 초기화되면 현재 인스턴스가 첫 번째 매개변수로 진입 함수에 전달됩니다. 함수는 인스턴스와 메서드에 추가 속성을 추가할 수 있습니다.

코드 목록 7에서는 'dom', 'event' 및 'ajax' 모듈을 추가했습니다.

코드 목록 7: 등록 모듈

Sandbox.modules = {};
Sandbox.modules.dom = function(box) {
    box.getElement = function() {};
    box.getStyle = function() {};
    box.foo = "bar";
};
Sandbox.modules.event = function(box) {
    // access to the Sandbox prototype if needed:
    // box.constructor.prototype.m = "mmm";
    box.attachEvent = function(){};
    box.dettachEvent = function(){};
};
Sandbox.modules.ajax = function(box) {
    box.makeRequest = function() {};
    box.getResponse = function() {};
};

생성자 구현

코드 목록 8은 몇 가지 핵심 사항을 포함하여 생성자를 구현하는 방법을 설명합니다.

샌드박스의 인스턴스인지 확인합니다. 그렇지 않으면 샌드박스가 new 연산자에 의해 호출되지 않았음을 증명하고 생성자로 다시 호출합니다.

생성자 내부에서 이것에 속성을 추가할 수 있고, 생성자의 프로토타입에도 속성을 추가할 수 있습니다.

모듈 이름은 배열, 독립 매개변수, 와일드카드 문자 '*' 등 다양한 형식으로 생성자에 전달됩니다.

이 예에서는 외부 파일에서 모듈을 로드할 필요가 없지만 YUI3와 같은 시스템에서는 기본 모듈(종종 시드라고 함)만 로드할 수 있으며 기타 모든 모듈을 로드할 수 있습니다. 외부 파일에서 로드됩니다.

一旦我们知道了所需的模块，并初始化他们，这意味着调用了每个模块的入口函数。

回调函数作为参数被最后传入构造器，它将使用最新生成的实例并在最后执行。

代码清单8:实现Sandbox构造器

<script>
function Sandbox() {
    // turning arguments into an array
    var args = Array.prototype.slice.call(arguments),
    // the last argument is the callback
    callback = args.pop(),
    // modules can be passed as an array or as individual parameters
    modules = (args[0] && typeof args[0] === "string") ?
    args : args[0],
    i;
    // make sure the function is called
    // as a constructor
    if (!(this instanceof Sandbox)) {
        return new Sandbox(modules, callback);
    }
    // add properties to &#39;this&#39; as needed:
    this.a = 1;
    this.b = 2;
    // now add modules to the core &#39;this&#39; object
    // no modules or "*" both mean "use all modules"
    if (!modules || modules === &#39;*&#39;) {
        modules = [];
            for (i in Sandbox.modules) {
                if (Sandbox.modules.hasOwnProperty(i)) {
                    modules.push(i);
            }
        }
    }
    // init the required modules
    for (i = 0; i < modules.length; i++) {
        Sandbox.modules[modules[i]](this);
    }
    // call the callback
    callback(this);
}
// any prototype properties as needed
Sandbox.prototype = {
    name: "My Application",
    version: "1.0",
    getName: function() {
        return this.name;
    }
};
</script>