JavaScript의 모듈화에 대한 심층적인 이해-JS 튜토리얼-php.cn

JavaScript의 모듈화에 대한 심층적인 이해

黄舟

풀어 주다： 2017-03-24 14:56:28

원래의

1428명이 탐색했습니다.

모듈화는 프로젝트에서 매우 중요합니다. 복잡한 프로젝트에는 유사한 기능 모듈이 많이 있어야 합니다. 매번 모듈을 다시 작성해야 한다면 확실히 시간이 많이 걸리고 노동 집약적입니다. 그러나 다른 사람을 인용하여 모듈을 작성하기 위한 전제 조건은 통일된 "열기 자세"를 갖는 것입니다. 모든 사람이 자신의 작성 방식을 가지고 있다면 분명히 혼란스러울 것입니다.

1: 모듈화 과정 1: 스크립트 태그

각 파일을 로 간주하면 가장 독창적인 JavaScript 파일 로딩 방법입니다. 모듈의 인터페이스는 일반적으로 전역 범위, 즉 객체 창에 정의되어 있습니다. 일부 복잡한 프레임워크는 모두 동일한 범위에 있습니다. 🎜> 네임스페이스 는 이러한 모듈의 인터페이스를 구성하는 데 사용됩니다.

단점:

1. 전역 범위 오염

2. 개발자가 모듈과 코드의 문제를 주관적으로 해결해야 합니다. 라이브러리 종속성

3. 스크립트 태그가 작성된 순서대로만 파일을 로드할 수 있습니다

4. 대규모 프로젝트에서는 다양한 리소스를 관리하기 어렵고, 장기간 누적된 문제로 인해 발생합니다. 혼란스러운 코드 베이스

둘: 모듈화 프로세스 2: CommonJS 사양

이 사양의 핵심 아이디어는 모듈이 자신이 의존하는 다른 모듈을 동기적으로 로드할 수 있도록 하는 것입니다.

require 메소드를 통해 내보내기 또는 module.exports를 통해 노출되어야 하는 인터페이스를 내보냅니다. rree

장점:

1. 간단하고 사용하기 쉽습니다

단점:

1. 동기식 모듈 로딩 방식은 브라우저 환경에 적합하지 않습니다.

2. 여러 모듈을 비차단 방식으로 병렬로 로드할 수 없습니다.

module.exports와 내보내기의 차이점

1. 내보내기는 module.exports에 대한 참조입니다

2. module.exports의 초기 값은 빈 객체 {}이므로 내보내기의 초기 값도 {}

3. require()는 내보내기 대신 module.exports를 반환합니다

내보내기 예:

require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;

로그인 후 복사

module.exports 예:

// app.js
var circle = require(&#39;./circle&#39;);
console.log(circle.area(4));
// circle.js
exports.area = function(r){
 return r * r * Math.PI;
}

로그인 후 복사

잘못된 사례:

// app.js
var area = require(&#39;./area&#39;);
console.log(area(4));
// area.js
module.exports = function(r){
 return r * r * Math.PI;
}

로그인 후 복사

는 실제로 덮어쓰기를 내보냅니다. 즉, 점을 새로운 메모리 조각으로 내보냅니다(내용은 원의 면적을 계산하는

함수

입니다). module.exports는 더 이상 동일한 메모리 조각을 가리키지 않습니다. 이는 현재 내보내기가 module.exports와 연결되어 있지 않음을 의미합니다. 즉, module.exports가 가리키는 메모리는 어떤 식으로든 변경되지 않았으며 여전히 비어 있음을 의미합니다. object {}, 이는 Area.js가 빈 개체를 내보내므로 .js에서 Area(4)를 호출하면 TypeError: object is not a function 오류가 보고됩니다.

요약: 모듈에서 객체를 내보내려는 경우 내보내기와 module.exports를 모두 사용할 수 있습니다(그러나 내보내기를 새 것으로 덮어쓸 수는 없습니다). 객체), 객체 인터페이스가 아닌 것을 내보내려면 module.exports를 재정의해야 하며 재정의할 수만 있습니다.

3: 모듈화 프로세스 3: AMD 사양

브라우저 측 모듈은 동기식으로 로드할 수 없으므로 후속 모듈의 로드 및 실행에 영향을 미치므로 AMD는 ( Asyn

chr

특정 모듈 정의(Asynchronous Module Definition) 사양이 탄생했습니다. 다음 두 API는 AMD 표준에 정의되어 있습니다

1. require([module], callback);

2. Define(id, [dependents], callback); 🎜 >

require 인터페이스는 일련의 모듈을 로드하는 데 사용되고, Define 인터페이스는 모듈을 정의하고 노출하는 데 사용됩니다.

예:

// app.js
var area = require(&#39;./area&#39;);
console.log(area(4));
// area.js
exports = function(r){
 return r * r * Math.PI;
}

로그인 후 복사

장점:

1. 브라우저 환경에서 모듈의 비동기 로딩에 적합합니다.

2. 여러 모듈을 병렬로 로드할 수 있음

단점:

1. 코드 작성, 모듈 정의 방법의 의미가 원활하지 않음

2. 일반적인 모듈식 사고 방식을 따르지 않으며 절충된 구현입니다

4: 모듈화 프로세스 4: CMD 사양

CMD(Common Module Definition)规范和AMD很相似，尽量保持简单，并与CommonJS和Node.js的 Modules 规范保持了很大的兼容性。在CMD规范中，一个模块就是一个文件。

示例：

define(function(require, exports, module){
 var $ = require(&#39;jquery&#39;);
 var Spinning = require(&#39;./spinning&#39;);
 exports.doSomething = ...
 module.exports = ...
})

로그인 후 복사

优点：

1、依赖就近，延迟执行

2、可以很容易在 Node.js 中运行

缺点：

1、依赖 SPM 打包，模块的加载逻辑偏重

AMD和CMD的区别

AMD和CMD起来很相似，但是还是有一些细微的差别，让我们来看一下他们的区别在哪里：

1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。

2、AMD推崇依赖前置；CMD推崇依赖就近，只有在用到某个模块的时候再去require。看代码：

// AMD
define([&#39;./a&#39;, &#39;./b&#39;], function(a, b){ // 依赖必须一开始就写好
  a.doSomething()  
  // 此处略去 100 行
  b.doSomething()  
  ...
});
// CMD
define(function(require, exports, module){
  var a = require(&#39;./a&#39;)  
  a.doSomething()  
  // 此处略去 100 行
  var b = require(&#39;./b&#39;)
  // 依赖可以就近书写
  b.doSomething()
  // ...
});

로그인 후 복사

3、AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。

五:模块化进程五：ES6模块化

EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

在 ES6 中，我们使用export关键字来导出模块，使用import关键字引用模块。需要说明的是，ES6的这套标准和目前的标准没有直接关系，目前也很少有JS引擎能直接支持。因此Babel的做法实际上是将不被支持的import翻译成目前已被支持的require。

尽管目前使用import和require的区别不大(本质上是一回事)，但依然强烈推荐使用import关键字，因为一旦JS引擎能够解析ES6的import关键字，整个实现方式就会和目前发生比较大的变化。如果目前就开始使用import关键字，将来代码的改动会非常小。

示例：

import "jquery";
export functiondoStuff(){}
module "localModule" {}

로그인 후 복사

优点：

1、容易进行静态分析

2、面向未来的 EcmaScript 标准

缺点：

1、原生浏览器端还没有实现该标准

2、全新的命令字，新版的 Node.js才支持

위 내용은 JavaScript의 모듈화에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!