JavaScript 모듈성을 어떻게 이해하나요?

JavaScript 모듈성에 대한 이해는 다음과 같습니다. 1. 클로저 기능을 통해 새로운 범위를 열고 전역 범위 명명 충돌 및 보안 문제를 완화하는 모듈 모드 2. Node에서 주로 사용되는 CommonJS 모드 개발 시 각 파일은 모듈입니다. , 각 파일에는 고유한 범위가 있습니다.

JavaScript 모듈성에 대한 이해는 다음과 같습니다.

1. 모듈 패턴

모듈 사양이 형성되기 전에 JS 개발자는 JS 글로벌 범위의 오염 문제를 해결하기 위해 모듈 디자인 패턴을 사용했습니다. 모듈 패턴은 원래 전통적인 소프트웨어 엔지니어링에서 클래스에 대한 비공개 및 공개 캡슐화를 제공하는 방법으로 정의되었습니다. JavaScript에서 모듈 모드는 익명 함수 자체 호출(클로저)을 사용하여 캡슐화하고 사용자 정의된 노출 동작을 통해 전용 멤버와 공용 멤버를 구별합니다.

let myModule = (function (window) {
    let moduleName = 'module'  // private
    // public
    function setModuleName(name) {
      moduleName = name
    }
    // public
    function getModuleName() {
      return moduleName
    }
    return { setModuleName, getModuleName }  // 暴露行为
  })(window)

위의 예는 모듈 패턴을 작성하는 방법으로 클로저 기능을 통해 새로운 범위를 열어 전역 범위 명명 충돌 및 보안 문제를 완화합니다. 그러나 개발자들은 이를 코드 정리 및 분할에 사용할 수 없었기 때문에 이를 기반으로 한 모듈러 사양이 등장하게 되었습니다.

관련 학습 권장 사항: javascript 비디오 튜토리얼

2. CommonJS

CommonJS는 주로 노드 개발에 사용되며 각 파일은 자체 범위를 갖습니다. module.exports를 통해 공개 멤버를 노출합니다. 예: module.exports暴露public成员。例如：

// 文件名：x.js
let x = 1;
function add() {
  x += 1;
  return x;
}
module.exports.x = x;
module.exports.add = add;

 

此外，CommonJS通过require()引入模块依赖，require函数可以引入Node的内置模块、自定义模块和npm等第三方模块。

// 文件名：main.js
let xm = require('./x.js');
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

 

从上面代码我们可以看出，require函数同步加载了x.js，并且返回了module.exports输出字面量的拷贝值。

可能有人会问module.exports.x = x;不是赋值吗，怎么肥事呢？我们说，Module模式是模块化规范的基石，CommonJS也是对Module模式的一种封装。我们完全可以用Module模式来实现上面的代码效果：

let xModule = (function (){
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { x, add };
})();
let xm = xModule;
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

 

通过Module模式模拟的CommonJS原理，我们就可以很好的解释CommonJS的特性了。因为CommonJS需要通过赋值的方式来获取匿名函数自调用的返回值，所以require函数在加载模块是同步的。然而CommonJS模块的加载机制局限了CommonJS在客户端上的使用，因为通过HTTP同步加载CommonJS模块是非常耗时的。

3、AMD

// 定义AMD规范的模块
define([function() {
  return 模块
})

区别于CommonJS，AMD规范的被依赖模块是异步加载的，而定义的模块是被当作回调函数来执行的，依赖于require.js模块管理工具库。当然，AMD规范不是采用匿名函数自调用的方式来封装，我们依然可以利用闭包的原理来实现模块的私有成员和公有成员：

define(['module1', 'module2'], function(m1, m2) {
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { add };
})

 

4、CMD

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。AMD 推崇依赖前置，CMD 推崇依赖就近。

define(function(require, exports, module) {
  //  同步加载模块
  var a = require('./a');
  a.doSomething();
  // 异步加载一个模块，在加载完成时，执行回调
  require.async(['./b'], function(b) {
    b.doSomething();
  });
  // 对外暴露成员
  exports.doSomething = function() {};
});
// 使用模块
seajs.use('path');

 

CMD集成了CommonJS和AMD的的特点，支持同步和异步加载模块。CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。因此，在CMD中require函数同步加载模块时没有HTTP请求过程。

5、ES6 module

ES6的模块化已经不是规范了，而是JS语言的特性。随着ES6的推出，AMD和CMDrrreee

• 또한 CommonJS는 require()를 통해 모듈 종속성을 도입합니다. require 함수는 Node의 내장 모듈, 사용자 정의 모듈 및 npm과 같은 타사 모듈을 도입할 수 있습니다.

  rrreee

• 위 코드에서 require 함수가 x.js를 동기적으로 로드하고 module.exports 출력 리터럴의 복사 값을 반환하는 것을 볼 수 있습니다.
  어떤 사람들은 다음과 같이 질문할 수 있습니다. module.exports.x = x; 과제 아닌가요? 뭐가 큰 문제인가요? 모듈 패턴은 모듈 사양의 초석이며 CommonJS는 모듈 패턴의 캡슐화이기도 합니다. 위의 코드 효과를 달성하기 위해 모듈 모드를 완전히 사용할 수 있습니다.
rrreee

모듈 모드로 시뮬레이션된 CommonJS 원리를 통해 CommonJS의 특성을 잘 설명할 수 있습니다. CommonJS는 값 할당을 통해 익명 함수 자체 호출의 반환 값을 얻어야 하기 때문에 require 함수는 모듈을 로드할 때 동기적입니다. 그러나 CommonJS 모듈의 로딩 메커니즘은 클라이언트에서 CommonJS 사용을 제한합니다. 왜냐하면 HTTP를 통해 CommonJS 모듈을 동기식으로 로드하는 데 시간이 많이 걸리기 때문입니다. 🎜🎜🎜3. AMD🎜🎜rrreee🎜CommonJS와 달리 AMD에 지정된 종속 모듈은 비동기적으로 로드되고, 정의된 모듈은 require.js모듈 관리 도구 라이브러리. 물론 AMD 사양은 익명 함수 자체 호출로 캡슐화되지 않습니다. 우리는 여전히 폐쇄 원칙을 사용하여 모듈의 비공개 및 공개 멤버를 구현할 수 있습니다. 🎜rrreee🎜🎜🎜🎜4, CMD🎜🎜🎜CMD가 승격되었습니다. SeaJS가 프로세스에서 모듈 정의의 표준화된 출력을 제공합니다. <code>AMD는 종속성을 앞에 추천하고, CMD는 가까운 종속성을 추천합니다. 🎜rrreee🎜 🎜🎜CMD는 CommonJS와 AMD의 기능을 통합하고 모듈의 동기 및 비동기 로딩을 지원합니다. CMD는 종속 모듈을 로드한 후 실행하지 않고, 모든 종속 모듈을 로드한 후 해당 모듈을 실행합니다. 모듈은 쓰기 순서와 완전히 일치합니다. 따라서 CMD의 require 함수가 모듈을 동기적으로 로드할 때 HTTP 요청 프로세스가 없습니다. 🎜🎜🎜5. ES6 모듈🎜🎜🎜 ES6의 모듈성은 더 이상 사양이 아니라 JS 언어의 기능입니다. ES6 출시와 함께 AMD와 CMD는 역사가 되었습니다. 모듈식 사양과 비교하여 ES6 모듈에는 두 가지 주요 특징이 있습니다. 🎜🎜🎜🎜모듈식 사양은 값의 복사본을 출력하는 반면 ES6 모듈은 값에 대한 참조를 출력합니다. 🎜🎜🎜🎜모듈 사양은 런타임에 로드되며 ES6 모듈은 컴파일 타임 출력 인터페이스입니다. 🎜🎜🎜🎜모듈 사양의 출력은 스크립트가 실행된 후에만 생성되는 개체입니다. ES6 모듈은 객체가 아닙니다. ES6 모듈은 다중 객체 출력 및 다중 객체 로딩 모델입니다. 원칙적으로 모듈 사양은 익명 함수 자체 호출을 캡슐화하는 반면 ES6 모듈은 익명 함수 자체 호출을 사용하여 출력 멤버를 호출합니다. 🎜

위 내용은 JavaScript 모듈성을 어떻게 이해하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!