Javascript의 모듈식 이해 예

원래 시대: 스크립트 태그는 javascriptfiles

-------- html -------
<p id="result"></p>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
-------add.js------
function add(a, b){ return a + b ;}
------ sum.js -----
function sum(n){
   return n + add(1, 2);
}
----- main.js ----
document.getElementById(&#39;result&#39;).innerHTML = sum(3);

를 도입했습니다. 이 방법은 종속성 분석이 부족하고 전역 변수 공간을 오염시키며 파일이 도입되는 순서를 보장해야 하므로 관리가 혼란스럽습니다.

원래 시대: 모듈 객체와 IIFE 모드

모듈 객체를 사용하고 즉시 함수 표현식(IIFE)을 호출함으로써 전역 범위의 오염을 줄일 수 있습니다. 이 접근 방식에서는 개체를 전역 범위에만 노출합니다. 이 객체에는 애플리케이션에 필요한 모든 메소드와 값이 포함되어 있습니다.

例如只向全局作用域公开了 App 对象
-------- html -------
<p id="result"></p>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
------- app.js -------
var App = {};
------- add.js -------
(function(){
    App.add = function(a, b){
       return a + b;
   }
})();
------- sum.js -------
(function(){
    App.sum= function(n){
       return App.add(1, 2) + n;
   }
})();
------- main.js -------
(function(app){
   document.getElementById(&#39;result&#39;).innerHTML = app.sum(3);
})(App);

app.js를 제외한 다른 모든 파일은 IIFE 형식으로 캡슐화되어 있는 것을 볼 수 있습니다.

여전히 종속성 해결이 부족한 문제가 있습니다. 모든 전역 변수를 제거하는 대신 여전히 1개의 전역 변수가 있습니다

Transitional 시대: CommonJS

CommonJS는 JavaScript 라이브러리가 아닙니다. 표준기관입니다. ECMA나 W3C와 같습니다. ECMA는 JavaScript 언어 사양을 정의합니다. W3C는 DOM 또는 DOM 이벤트와 같은 JavaScript 웹 API를 정의합니다. CommonJS의 목표는 웹 서버, 데스크탑 및 명령줄 애플리케이션을 위한 공통 API 세트를 정의하는 것입니다.

CommonJS는 모듈 API도 정의합니다. 서버 애플리케이션에는 HTML 페이지와 </script><script> 태그가 없으므로 모듈에 대한 명확한 API를 제공하는 것이 합리적입니다. 모듈은 다른 모듈에서 사용할 수 있도록 노출(**내보내기**)하고 액세스할 수 있어야 합니다(**import**). 내보내기 모듈 구문은 다음과 같습니다. </script><script> 标签，所以为模块提供一些清晰的 API 是很有意义的。模块需要被公开(**export**)以供其它模块使用，并且可以访问(**import**)。它的导出模块语法如下：

---------------- add.js  --------------------
module.exports = function add(a, b){
  return a+b;
}
---------------- sum.js  --------------------
var add = require('./add');
module.exports  = function sum(n){
     return add(1, 2) + n;
}
---------------- main.js  --------------------
var sum = require('./sum');
document.getElementById('result').innerHTML = sum(3);

CommonJs虽然解决的依赖问题，但是CommonJs的问题在于它是同步的，var sum = require('./sum'); 时

 sum = require('./sum');时，系统将暂停，直到模块准备(ready)完成，这意味着当所有的模块都加载时，这一行代码将阻塞浏览器进程，
因此，这可能不是为浏览器端应用程序定义模块的最佳方式

异步模块时代： AMD

define([‘add’, ‘sum’], function(add, sum){
  document.getElementById.innerHTML = sum(3);
});

define 函数(或关键字)将依赖项列表和回调函数作为参数。回调函数的参数与数组中的依赖是相同的顺序。这相当于导入模块。并且回调函数返回一个值，即是你导出的值。

CommonJS 和 AMD 解决了模块模式中剩下的两个问题：依赖解析 和 全局作用域污染 。我们只需要处理每个模块或每个文件的依赖关系就可以了,兵器不再有全局作用域污染。

AMD的良好实现： RequireJS 依赖注入

RequireJS 是一个 JavaScript 模块加载器(module loader) 。它可以根据需要异步加载模块，尽管 RequireJS 的名字中含有 require，但是它的目标却并非要去支持 CommonJS 的 require 语法。使用 RequireJS，可以编写 AMD 风格的模块。

-------------------- html ----------------------
<p id="result"></p>
<!-- 入口文件 -->
<script data-main="main" src="require.js"></script>
-------------------- main.js ----------------------
define([&#39;sum&#39;], function(sum){
  document.getElementById(&#39;result&#39;).innerHTML = sum(3);
})
-------------------- sum.js ----------------------
define([&#39;add&#39;], function(add)){
   var sum = function(n){
       return add(1,2) + n;
   }
   return sum;
})
-------------------- add.js ----------------------
// add.js
define([], function(){
   var add = function(a, b){
      return a + b;
   };
   return add;
});

浏览器加载 index.html，而 index.html 又加载 require.js 。剩下的文件及其依赖都是由require.js 负责加载。

RequireJS 和 AMD 解决了我们以前所遇到的所有问题。然而，它也带来了一些不那么严重的问题：

1.AMD 的语法过于冗余。因为所有东西都封装在 define 函数中

2.数组中的依赖列表必须与函数的参数列表匹配。如果存在许多依赖项，则很难维护依赖项的顺序

3.在当前浏览器下（HTTP 1.1），加载很多小文件会降低性能

模块打包器： Browserify

可以在浏览器中使用 CommonJS 模块，通过 Browserify 遍历代码的依赖树，并将依赖树中的所有模块打包成一个文件。

不同于 RequireJS ，Browserify 是一个命令行工具，需要依赖 NPM 环境，

npm install -g browserify

---------------- html.js  --------------------



---------------- add.js  --------------------
module.exports = function add(a, b){
  return a+b;
}
---------------- sum.js  --------------------
var add = require('./add');
module.exports  = function sum(n){
     return add(1, 2) + n;
}
---------------- main.js  --------------------
var sum = require('./sum');
document.getElementById('result').innerHTML = sum(3);

命令: browserify main.js -o bundle.js

困惑的时代： UMD

UMD 是一套用来识别当前环境支持的模块风格的 if/else 语句

// UMD 风格编写的 sum 模块
//sum.umd.js
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['add'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('add'));
    } else {
        // Browser globals (root is window)
        root.sum = factory(root.add);
    }
}(this, function (add) {
    //  private methods
    //  exposed public methods
    return function(n) {
      return add(1,2) + n;
    }
}));

无论是JavaScript 全局模块对象，还是 CommonJS 或是 AMD 更是 UMD，都太麻烦了，额外增加了很多工作量，并且不易维护。

光明的时代： ES6模块语法

ES6 用 import 和 export

---------------- main.js ---------------
import sum from './sum';
document.getElementById('result').innerHTML = sum(3);
---------------- sum.js ---------------
import add from './add';
export default function sum(n){
   return  add(1, 2) + n;
};
---------------- add.js ---------------
export default function add(a, b){
   return a + b;
};

CommonJs가 종속성 문제를 해결하지만 CommonJs의 문제는 var sum = require('./sum');

--------------- add.js -----------------
let add = (a,b) => a + b;
let sub = (a,b) => a - b;
export { add, sub };
--------------- sum.js -----------------
import { add } from './add';
export default (n) => {return add(1, 2) + n};
--------------- main.js ----------------
import sum from './sum';
document.getElementById('result').innerHTML = sum(3);

命令: rollup main.js -o bundle.js
--------------- boundle.js ----------------
// bundle.js
let add = (a,b) => a + b;
var sum = (n) => {return add(1, 2) + n};
document.getElementById("answer").innerHTML = sum(3);

비동기 모듈 시대: AMDrrreee

define 함수(또는 키워드)는 종속성 목록과 콜백 함수 🎜를 매개변수로 사용합니다. 콜백 함수의 매개변수는 배열의 종속성과 동일한 순서로 되어 있습니다. 이는 모듈을 가져오는 것과 같습니다. 그리고 콜백 함수는 내보낸 값인 값을 반환합니다. 🎜🎜CommonJS와 AMD는 모듈 패턴에 남아 있는 두 가지 문제인 🎜종속성 해결🎜과 🎜전역 범위 오염🎜을 해결합니다. 각 모듈이나 파일의 종속성만 처리하면 되며, 무기에는 더 이상 전역 범위 오염이 발생하지 않습니다.
🎜🎜🎜🎜AMD의 올바른 구현: RequireJS 🎜🎜종속성 주입🎜 🎜🎜🎜🎜🎜🎜RequireJS는 JavaScript 모듈 로더입니다. 필요에 따라 비동기적으로 모듈을 로드할 수 있습니다. RequireJS의 이름에는 require가 포함되어 있지만 목표는 CommonJS의 require 구문을 지원하는 것이 아닙니다. RequireJS를 사용하면 AMD 스타일 모듈을 작성할 수 있습니다. 🎜rrreee🎜브라우저는 index.html을 로드하고 index.html는 require.js를 로드합니다. 나머지 파일과 해당 종속성은 require.js에 의해 로드됩니다. 🎜🎜RequireJS와 AMD는 이전에 겪었던 모든 문제를 해결합니다. 그러나 덜 심각한 문제도 발생합니다. 🎜🎜1. AMD의 구문이 너무 중복됩니다. 모든 것이 define 함수🎜🎜2에 캡슐화되어 있기 때문입니다. 배열의 종속성 목록은 함수의 매개변수 목록과 일치해야 합니다. 종속성이 많으면 종속성 순서를 유지하기 어렵습니다. 🎜🎜3. 현재 브라우저(HTTP 1.1)에서는 작은 파일을 많이 로드하면 성능이 저하됩니다. 🎜🎜🎜🎜모듈 패키저: 🎜Browserify🎜🎜🎜브라우저에서 Browserify를 통해 CommonJS 모듈을 사용하여 코드의 종속성 트리를 탐색하고 모든 종속성을 추가할 수 있습니다. 종속성 트리 모듈은 파일로 패키지됩니다. 🎜🎜RequireJS와 달리 Browserify는 NPM 환경에 의존해야 하는 명령줄 도구입니다. 🎜rrreeerrreee🎜 🎜🎜혼란스러운 시기: UMD🎜
🎜🎜🎜 UMD는 다음 작업에 사용되는 도구 모음입니다. 현재 환경 지원 식별 모듈 스타일 if/else 문🎜rrreee🎜JavaScript 전역 모듈 개체, CommonJS, AMD 또는 심지어 UMD이든 너무 번거롭고 추가 작업량이 추가되며 유지 관리가 쉽지 않습니다. 🎜🎜🎜🎜더 밝아진 시간: ES6 모듈 구문🎜🎜🎜🎜ES6은 import 및 export 키워드를 사용하여 모듈을 가져오고 내보냅니다.🎜rrreee🎜ES6 모듈 구문은 간결하지만 현재 모든 브라우저가 이를 지원하는 것은 아닙니다. 일부 도구(바벨)를 사용하여 변환할 수 있습니다🎜🎜🎜🎜엔지니어링의 시대: Webpack🎜🎜🎜

虽然gulp、grunt都号称是工程化开发工具，，但个人感觉他们处理的东西还是比较基础，对于模块依赖打包来说，支持不是非常好，反正我是不喜欢gulp.

Webpack 是一个 模块打包器，就像 Browserify 一样，它会遍历依赖树，然后将其打包到一到多个文件。

它与Browserify 不同之处就是 可以处理 CommonJS 、 AMD 和 ES6 模块，并且 Webpack 还有更多实用的东西，比如 代码分离、加载器、插件

简洁的时代：Rollup

rollup 只会将需要的函数包含到打包文件中，从而显著减少打包文件大小

--------------- add.js -----------------
let add = (a,b) => a + b;
let sub = (a,b) => a - b;
export { add, sub };
--------------- sum.js -----------------
import { add } from './add';
export default (n) => {return add(1, 2) + n};
--------------- main.js ----------------
import sum from './sum';
document.getElementById('result').innerHTML = sum(3);

命令: rollup main.js -o bundle.js
--------------- boundle.js ----------------
// bundle.js
let add = (a,b) => a + b;
var sum = (n) => {return add(1, 2) + n};
document.getElementById("answer").innerHTML = sum(3);

发现 add.js的 sub() 函数并没有包含在这个打包文件中，因为没有引用它。

위 내용은 Javascript의 모듈식 이해 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!