Javascript 模块化理解

[sweida]

原始时代： script标签引入javascript文件

-------- html -------
<div id="result"></div>
<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('result').innerHTML = sum(3);

这种方式缺乏依赖解析，全局变量空间污染，而且要保证文件引入的顺序，管理比较混乱

原始时代： 模块对象和IIFE模式

通过使用模块对象和立即调用的函数表达式(IIFE) ，我们可以减少对全局作用域的污染。在这种方法中，我们只向全局作用域公开一个对象。该对象包含了我们在应用程序中需要的所有方法和值。

例如只向全局作用域公开了 App 对象
-------- html -------
<div id="result"></div>
<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('result').innerHTML = app.sum(3);
})(App);

可以看到，除了 app.js 以外，其他每个文件都被封装成了 IIFE 格式

依旧存在 缺乏依赖解析的问题，还是有1个全局变量，而不是干掉全部的全局变量

过渡时代：CommonJS

CommonJS 不是一个 JavaScript 库。它是一个标准化组织。它就像 ECMA 或 W3C 一样。ECMA 定义了 JavaScript 的语言规范。W3C定义了 JavaScript web API ，比如 DOM 或 DOM 事件。 CommonJS 的目标是为 web 服务器、桌面和命令行应用程序定义一套通用的 API 。

CommonJS 还定义了模块 API 。因为在服务器应用程序中没有 HTML 页面和 </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');时，系统将暂停，直到模块准备(ready)完成，这意味着当所有的模块都加载时，这一行代码将阻塞浏览器进程，
因此，这可能不是为浏览器端应用程序定义模块的最佳方式

光明的时代： 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;
};

ES6 模块语法是简洁的,虽然目前浏览器并未全部支持，但可以使用一些工具(babel)来转化它