집 > 기사 > 웹 프론트엔드 > 프런트 엔드 모듈성 이해(CommonJs, AMD 및 CMD)

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

怪我咯원래의: 2017-04-05 13:50:154046검색

프론트엔드 모듈 사양에는 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를 로드하는 가장 좋고 쉬운 방법은 문서에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 삽입하는 것입니다. 그러나 스크립트 태그는 본질적으로 비동기식이므로 기존 CommonJS 모듈은 브라우저 환경에서 정상적으로 로드될 수 없습니다.

해결 방법 중 하나는 서버측 구성 요소를 개발하고, 모듈 코드에 대한 정적 분석을 수행하고, 모듈과 해당 종속성 목록을 브라우저에 반환하는 것입니다. 이는 잘 작동하지만 서버에 추가 구성 요소를 설치해야 하므로 기본 아키텍처 조정이 많이 필요합니다.

또 다른 해결책은 표준 템플릿 세트를 사용하여 모듈 정의를 캡슐화하는 것입니다.

define(function(require, exports, module) {

  // The module code goes here

});

이 템플릿 코드 세트는 모듈 코드가 캡슐화되기 전에 모듈 로더가 모듈을 로드할 수 있는 기회를 제공합니다. 실행되면 모듈 코드를 정적으로 분석하고 종속성 목록을 동적으로 생성합니다.

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

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

index.js
define(function(require, exports, module) {
  var inc = require(&#39;increment&#39;).increment;
  inc(1); // 2
});

AMD

AMD는 "Asynchronous Module Definition"의 약자로 "Asynchronous Module Definition"이라는 뜻입니다. JavaScript가 기본적으로 지원되지 않기 때문에 AMD 사양을 사용하는 페이지 개발에는 해당 라이브러리 함수, 즉 유명한 RequireJS를 사용해야 합니다. 실제로 AMD는 RequireJS의 승격 과정에서 표준화된 모듈 정의 출력입니다

모듈은 비동기적으로 로드되며, 모듈 로드는 후속 명령문의 실행에 영향을 주지 않습니다. 이 모듈에 의존하는 모든 문은

콜백 함수

에 정의되어 있습니다. 이 콜백 함수는 로딩이 완료될 때까지 실행되지 않습니다. 　RequireJS는 주로 두 가지 문제를 해결합니다

첫 번째 매개 변수 [module]은

배열

이고 내부 멤버는 모듈입니다. 두 번째 매개변수입니다. 매개변수 콜백은 성공적으로 로드된 후의 콜백 함수입니다. Math.add() 및 수학 모듈 로딩은 동기화되지 않으며 브라우저가 정지되지 않습니다. 아아아아　

define() 함수

　　RequireJS定义了一个函数 define，它是全局变量，用来定义模块:

　　define(id?, dependencies?, factory);

　　参数说明：

id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。

依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
依赖参数是可选的，如果忽略此参数，它应该默认为["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

工厂方法factory，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

　　来举个例子看看：
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) { exports.verb = function() { return beta.verb(); //Or: return require("beta").verb(); } });
　　RequireJs使用例子

　　require.config是用来定义别名的，在paths属性下配置别名。然后通过requirejs(参数一，参数二)；参数一是数组，传入我们需要引用的模块名，第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。
main.js //别名配置 requirejs.config({ paths: { jquery: 'jquery.min' //可以省略.js } }); //引入模块，用变量$表示jquery模块 requirejs(['jquery'], function ($) { $('body').css('background-color','red'); });
　　引入模块也可以只写require()。requirejs通过define()定义模块，定义的参数上同。在此模块内的方法和变量外部是无法访问的，只有通过return返回才行.
math.js define('math',['jquery'], function ($) {//引入jQuery模块 return { add: function(x,y){ return x + y; } }; });
　　将该模块命名为math.js保存。
require(['jquery','math'], function ($,math) { console.log(math.add(10,100));//110 });
　　main.js引入模块方法

　CMD

　　CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同。

　　在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下:
define(function(require, exports, module) { // 模块代码 });
　　require是可以把其他模块导入进来的一个参数;而exports是可以把模块内的一些属性和方法导出的;module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

　　AMD是依赖关系前置,在定义模块的时候就要声明其依赖的模块;

　　CMD是按需加载依赖就近,只有在用到某个模块的时候再去require：
// CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething() // ... }) // AMD 默认推荐的是 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // 此处略去 100 行 b.doSomething() ... })
　　seajs使用例子
// 定义模块 myModule.js define(function(require, exports, module) { var $ = require('jquery.js') $('p').addClass('active'); exports.data = 1; }); // 加载模块 seajs.use(['myModule.js'], function(my){ var star= my.data; console.log(star); //1 });

위 내용은 프런트 엔드 모듈성 이해(CommonJs, AMD 및 CMD)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript 함수형 프로그래밍 이해다음 기사：JavaScript 함수형 프로그래밍 이해