집 > 기사 > 웹 프론트엔드 > 백엔드 프로그래머를 위한 JS 모듈식 사용 지침

백엔드 프로그래머를 위한 JS 모듈식 사용 지침

php中世界最好的语言원래의: 2018-06-04 09:57:391260검색

이번에는 백엔드 프로그래머를 위한 JS 모듈화 사용 지침을 가져왔습니다. JS 모듈화 사용 시 백엔드 프로그래머를 위한 주의사항은 무엇인가요?

기본 모드

익명 클로저

익명 클로저는 익명 개체를 선언하고 즉시 실행하는 매우 일반적인 코드 격리 방법입니다. 익명 함수에 선언된 변수 및 메서드와 익명 함수 자체는 함수 외부를 오염시키지 않습니다. 동시에 익명 함수 호출은 함수 외부에 선언된 변수 및 메서드가 클로저를 형성하도록 합니다. 함수 내에서 사용할 수 있습니다.

(function () {    // ... all vars and functions are in this scope only
    // still maintains access to all globals}());

Global import

우리는 JavaScript 전역 변수의 범위가 전 세계에 걸쳐 있다는 것을 알고 있습니다. 전역 변수는 함수 내에서 사용되거나 선언될 수도 있으므로 코드 혼란과 관리 어려움이 발생할 수 있습니다.
전역 가져오기 모드는 익명 함수 내의 가져온 매개변수를 통해서만 외부 모듈에 액세스할 수 있도록 매개변수를 추가하는 익명 클로저의 변형이므로 모듈 간의 종속성을 명확하고 관리하기 쉽게 만듭니다.

(function ($, YAHOO) { // 이제 이 코드에서 전역 jQuery($) 및 YAHOO에 액세스할 수 있습니다.}(jQuery, YAHOO));

이 규칙은 함수 본문 내의 전역 변수에 대한 액세스를 강제로 방지할 수 없습니다. 한 가지 해결책은 모든 모듈을 이런 방식으로 처리하고 모듈 자체만 전역 변수로 내보내는 것입니다. 이렇게 하면 전역 변수의 사용을 크게 줄일 수 있습니다.

모듈 내보내기

모듈 내보내기는 익명 함수의 즉각적인 실행 결과를 반환하고 전역 변수에 할당하는 것입니다. 익명 함수는 열린 객체만 반환하며, 내부적으로 정의된 변수와 함수는 여전히 외부 세계에 보이지 않습니다.

var MODULE = (function () {    var my = {},
        privateVariable = 1;    function privateMethod() {        // ...
    }
    my.moduleProperty = 1;
    my.moduleMethod = function () {        // ...
    };    return my;
}());

고급 모드

확장 모드

JavaScript 개체는 전역 가져오기 모드와 결합하여 모듈을 확장할 수 있습니다.

var MODULE = (function (my) {
    my.anotherMethod = function () {        // added method...
    };    return my;
}(MODULE));

이 모드는 MODULE이 선언된 것으로 가정하고, 선언하지 않으면 오류가 발생합니다.

와이드 확장 모드

와이드 확장 모드는 MODULE을 미리 선언하지 않은 경우 호출 오류가 발생하는 문제를 해결하기 위해 익명 함수를 호출하고 MODULE || {}를 매개변수로 전달하는 트릭을 사용합니다. 이 모드에는 놀라운 기능도 숨겨져 있습니다. 즉, 여러 확장 모드를 차단하지 않고 병렬로 호출할 수 있다는 것입니다.

var MODULE = (function (my) {    // add capabilities...
    return my;
}(MODULE || {}));

Tight 확장 모드

Wide 확장 모드는 훌륭하지만 메서드 속성이 오버로드되어 안전하게 처리할 수 없다는 단점이 있습니다. 엄격한 확장 모드는 이전 메서드에 대한 참조를 유지하고 정의된 새 메서드에서 이전 메서드의 기능을 유연하게 재사용할 수 있습니다.

var MODULE = (function (my) {    var old_moduleMethod = my.moduleMethod;
    my.moduleMethod = function () {        // method override, has access to old through old_moduleMethod...
    };    return my;
}(MODULE));

복제 및 상속

var MODULE_TWO = (function (old) {    var my = {},
        key;    for (key in old) {        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }    var super_moduleMethod = old.moduleMethod;
    my.moduleMethod = function () {        // override method on the clone, access to super through super_moduleMethod
    };    return my;
}(MODULE));

복제 및 상속 모드는 원본 모듈에 미치는 영향이 거의 없는 모듈 재사용 방법입니다. 이 모드는 이전 모듈 속성을 얕은 복제하여 재사용하며 긴밀한 결합이 가능합니다. 메서드 오버로딩 질문을 처리하기 위한 확장 모드입니다. 이는 일종의 얕은 복제라는 점에 유의해야 합니다. 이전 모듈의 속성이 개체인 경우 이 개체에 대한 수정 사항은 이전 모듈과 새 모듈 간에 서로 영향을 미칩니다.

교차 파일 비공개 상태

모듈이 여러 파일로 분할되면 넓은 확장 모드를 사용할 때 제한 사항이 발생합니다. 각 파일의 메서드는 자체 비공개 상태를 유지하며 모듈의 여러 파일 간에 공유할 수 없습니다. 아래는 이 상황에서 동일한 모듈 내에서 비공개 상태를 공유하는 방법을 보여주는 예입니다.

var MODULE = (function (my) {    var _private = my._private = my._private || {},
        _seal = my._seal = my._seal || function () {            delete my._private;            delete my._seal;            delete my._unseal;
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };    // permanent access to _private, _seal, and _unseal
    return my;
}(MODULE || {}));

각 파일은 다른 모듈과 공유하기 위해 로컬 변수 _private을 유지합니다. 모듈이 로드된 후 MODULE._seal을 호출하여 로컬 변수 _private의 외부 액세스 속성을 삭제합니다. 모듈을 확장해야 하는 경우 파일을 로드하기 전에 _unseal을 호출하여 외부에서 액세스할 수 있는 속성에 로컬 변수 _private을 출력합니다. 로드한 후 _seal을 호출하여 외부에서 액세스할 수 있는 속성을 삭제합니다.

Submodule

Submodule은 모듈의 속성을 모듈로 정의하며, 위에서 언급한 다양한 모드를 유연하게 사용할 수 있습니다.

MODULE.sub = (function () {    var my = {};    // ...
    return my;
}());

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!