프런트 엔드 모듈성 이해(CommonJs, AMD 및 CMD)-JS 튜토리얼-php.cn

프런트 엔드 모듈성 이해(CommonJs, AMD 및 CMD)

怪我咯

풀어 주다： 2017-04-05 13:50:15

원래의

4082명이 탐색했습니다.

프론트엔드 모듈 사양에는 CommonJs, AMD, CMD의 세 가지가 있습니다.

서버측에서는 CommonJs를 사용하고, 브라우저 환경에서는 AMD와 CMD를 사용하고 있습니다.

AMD는 RequireJS 승격 과정에서 표준화된 모듈 정의 출력입니다.

CMD는 SeaJS 프로모션 과정에서 모듈 정의의 표준화된 출력입니다.

AMD: 조기 실행(비동기 로딩: 종속성 먼저 실행) + 지연 실행

CMD: 지연 실행(로드할 때까지 실행, 순서대로 실행)

모듈

함수 쓰기

function f1(){
    //...
}
function f2(){
    //...
}

로그인 후 복사

모듈은 특정 기능을 하나의 파일에 넣어서 모듈을 구성하는 파일입니다. 필요할 때 이 파일을 로드하고 그 안에 있는 함수를 호출하세요.

그러나 그렇게 하면 전역 변수가 오염되고, 변수 이름이 다른 모듈과 충돌하지 않는다는 보장이 없으며, 모듈 간에 관계가 없습니다. 회원.

　Object 는

var module = {
　　star : 0,
　　f1 : function (){
　　　　//...
　　},
　　f2 : function (){
　　　　//...
　　}
};
module.f1();
module.star = 1;

로그인 후 복사

로 작성됩니다. 모듈은 객체로 작성되고, 객체 속성 <🎜을 호출하여 모듈 구성원이 객체에 캡슐화됩니다. > 모듈 멤버에 접근하여 사용할 수 있습니다. 그러나 동시에 모듈 멤버가 노출되고 모듈의 내부 상태가 외부 세계에 의해 수정될 수 있습니다.

즉시 함수 실행

var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log(&#39;ok&#39;);
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
       return {
          f1:f1,
          f2:f2
       };
　　})();
module.f1();  //ok
console.log(module.star)  //undefined

로그인 후 복사

외부에서는 내부 전용 변수에 접근할 수 없습니다.

CommonJs

CommonJS는 Node에서 승격하고 사용하는 서버 측 모듈에 대한 사양입니다. . 서버 측 프로그래밍의 복잡성으로 인해 모듈 없이 운영 체제 및 기타 응용 프로그램과 상호 작용하기가 어렵습니다. 사용법은 다음과 같습니다:

math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

increment.js
var add = require(&#39;math&#39;).add;
exports.increment = function(val) {
    return add(val, 1);
};

index.js
var increment = require(&#39;increment&#39;).increment;
var a = increment(1); //2

로그인 후 복사

CommonJS 사양에 따르면: