Javascript 模塊化理解

原始時代： 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'); 時 

當調用 var 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 ----------------------
<div id="result"></div>
<!-- 入口文件 -->
<script data-main="main" src="require.js"></script>
-------------------- main.js ----------------------
define(['sum'], function(sum){
  document.getElementById('result').innerHTML = sum(3);
})
-------------------- sum.js ----------------------
define(['add'], 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
browserify main.js -o bundle.js

---------------- html.js  --------------------
<div id="result"></div>
<!-- 打包好的文件 -->
<script src="boundle.js"></script>
---------------- 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;
};

ES6 模塊語法是簡潔的,雖然目前瀏覽器並未所有支持，但可使用一些工具(babel)來轉化它

 

工程化的時代： 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() 函數並無包含在這個打包文件中，由於沒有引用它。

我的觀點: rollup適合開發一些庫，目前rollup的插件支持不是時分豐滿，須要與webpack2或gulp結合使用來開發大型項目，對於一些小項目，徹底能夠rollup來構建，方便快捷。