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

怪我咯
풀어 주다: 2017-04-05 13:50:15
원래의
4060명이 탐색했습니다.

프론트엔드 모듈 사양에는 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 사양에 따르면:

  • 단일 파일이 모듈입니다. 각 모듈에는 별도의 범위가 있습니다. 즉, 모듈 내에 정의된 변수는 전역 객체의 속성으로 정의되지 않는 한 다른 모듈에서 읽을 수 없습니다.

  • 모듈 변수를 내보내는 가장 좋은 방법은 module.exports 개체를 사용하는 것입니다.

  • 파일을 읽고 실행하는 require 메소드를 사용하여 모듈을 로드하고, 파일 내부에 module.exports 객체를 반환합니다.

보기 위 코드를 주의 깊게 보면 require가 동기식이라는 것을 알 수 있습니다. 모듈 시스템은 모듈 파일의 내용을 동기적으로 읽고, 컴파일하고 실행하여 모듈

인터페이스 를 얻어야 합니다.

하지만 이는 브라우저 측면에서 많은 문제를 안고 있습니다.

브라우저 측에서 JavaScript를 로드하는 가장 좋고 쉬운 방법은 문서에
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!