JavaScript 샌 드 박스 디자인 모드 (회전)

샌 드 박스 모드 는 YUI 3 core 에서 흔히 볼 수 있 습 니 다. 같은 구조 기 (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 에 추가 합 니 다.
일반적으로 이것 은 명명 충돌 을 피 하 는 비교적 좋 은 방법 으로 많은 항목 에 응용 되 지만 이런 방법 은 약간의 단점 이 있다.
4. 567917. 모든 추가 할 함수, 변수 에 접 두 사 를 붙 여야 합 니 다
4. 567917. 전체 대상 이 하나 밖 에 없 기 때문에 일부 코드 가 전체 대상 을 임의로 수정 하여 다른 코드 의 수 동적 인 업 데 이 트 를 초래 할 수 있다 는 것 을 의미한다
전역 구조 기
전역 대상 이 아 닌 전역 구조 기 를 사용 할 수 있 습 니 다. 우 리 는 이 구조 기 에 Sandbox () 라 고 이름 을 지 을 수 있 습 니 다. 이 구조 기 를 사용 하여 대상 을 만 들 수 있 습 니 다. 구조 기 에 리 셋 함 수 를 매개 변수 로 전달 할 수 있 습 니 다. 이 리 셋 함 수 는 코드 를 저장 하 는 독립 된 샌 드 박스 환경 입 니 다.
코드 목록 2: 샌 드 박스 사용

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

모래 상자 에 다른 특성 을 첨가 합 시다.
4. 567917. 샌 드 박스 를 만 들 때 'new' 연산 자 를 사용 하지 않 아 도 됩 니 다
4. 567917. 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' 라 는 속성 을 추가 할 수 있 습 니 다. 이 속성 은 키 쌍 을 포함 하 는 대상 이 될 것 입 니 다. 그 중에서 키 쌍 중 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 은 구조 기 를 실현 하 는 방법 을 묘 사 했 는데 그 중에서 관건 적 인 몇 가지 요점 은 다음 과 같다.
4. 567917. 우 리 는 this 가 Sandbox 의 인 스 턴 스 인지 확인 합 니 다. 그렇지 않 으 면 Sandbox 가 new 연산 자 에 의 해 호출 되 지 않 았 음 을 증명 합 니 다. 우 리 는 구조 기 방식 으로 그것 을 다시 호출 할 것 입 니 다
4. 567917. 구조 기 내부 에서 this 에 속성 을 추가 할 수 있 고 구조 기의 원형 에 속성 을 추가 할 수 있 습 니 다
4. 567917. 모듈 이름 은 배열, 독립 매개 변수, 어댑터 '*' 등 여러 가지 형식 으로 구조 기 에 전달 된다
4. 567917. 이 예 에서 우 리 는 외부 파일 에서 모듈 을 불 러 올 필요 가 없 지만 YUI 3 와 같은 경우 기본 모듈 (보통 피 드 (seed) 만 불 러 올 수 있 고 다른 모든 모듈 은 외부 파일 에서 불 러 옵 니 다. 4. 567918.
4. 567917. 우리 가 필요 한 모듈 을 알 고 초기 화 하면 각 모듈 의 입구 함 수 를 호출 한 것 을 의미한다.
4. 567917. 리 셋 함 수 는 매개 변수 로 마지막 으로 구조 기 에 들 어 갑 니 다. 최신 생 성 된 인 스 턴 스 를 사용 하여 마지막 에 실 행 됩 니 다. 4. 567918.
코드 목록 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 'this' as needed:
    this.a = 1;
    this.b = 2;
    // now add modules to the core 'this' object
    // no modules or "*" both mean "use all modules"
    if (!modules || modules === '*') {
        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>

간단명료 한 현대 마법 에서 나 온 것 이다.