Javascript 模塊化理解
原始時代： script標籤引入javascript文件
這種方式缺乏依賴解析，全局變量空間汙染，而且要保證文件引入的順序，管理比較混亂
原始時代： 模塊對象和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><br data-filtered="filtered"><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**)。它的導出模塊語法如下：
CommonJs雖然解決的依賴問題，但是CommonJs的問題在於它是同步的，var sum = require('./sum'); 時
當調用 var sum = require('./sum');時，系統將暫停，直到模塊準備(ready)完成，這意味著當所有的模塊都加載時，這一行代碼將阻塞瀏覽器進程，因此，這可能不是為瀏覽器端應用程序定義模塊的最佳方式異步模塊時代： AMD
define 函數(或關鍵字)將依賴項列表和回調函數作為參數。回調函數的參數與數組中的依賴是相同的順序。這相當於導入模塊。並且回調函數返回一個值，即是你導出的值。
CommonJS 和 AMD 解決了模塊模式中剩下的兩個問題：依賴解析 和 全局作用域汙染 。我們只需要處理每個模塊或每個文件的依賴關係就可以了,兵器不再有全局作用域汙染。
AMD的良好實現： RequireJS 依賴注入
RequireJS 是一個 JavaScript 模塊加載器(module loader) 。它可以根據需要異步加載模塊，儘管 RequireJS 的名字中含有 require，但是它的目標卻並非要去支持 CommonJS 的 require 語法。使用 RequireJS，可以編寫 AMD 風格的模塊。
愛瘋的小瘋子
快上車，一起飛
Javascript 模塊化理解
原始時代： script標籤引入javascript文件
1 2 3 4 5 6 7 8 9 10 11 12 13 | -------- 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) ，我們可以減少對全局作用域的汙染。在這種方法中，我們只向全局作用域公開一個對象。該對象包含了我們在應用程序中需要的所有方法和值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 例如只向全局作用域公開了 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><br data-filtered="filtered"><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**)。它的導出模塊語法如下：
1 2 3 4 5 6 7 8 9 10 11 12 | ---------------- 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
1 2 3 | 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 風格的模塊。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | -------------------- 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.jsdefine([], 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 環境，
困惑的時代： UMD
UMD 是一套用來識別當前環境支持的模塊風格的 if/else 語句
無論是JavaScript 全局模塊對象，還是 CommonJS 或是 AMD 更是 UMD，都太麻煩了，額外增加了很多工作量，並且不易維護。
光明的時代： ES6模塊語法
ES6 用 import和 export 關鍵字來導入和導出模塊
ES6 模塊語法是簡潔的,雖然目前瀏覽器並未全部支持，但可以使用一些工具(babel)來轉化它
工程化的時代： Webpack
雖然gulp、grunt都號稱是工程化開發工具，，但個人感覺他們處理的東西還是比較基礎，對於模塊依賴打包來說，支持不是非常好，反正我是不喜歡gulp.
Webpack 是一個 模塊打包器，就像 Browserify 一樣，它會遍歷依賴樹，然後將其打包到一到多個文件。
它與Browserify 不同之處就是 可以處理 CommonJS 、 AMD 和 ES6 模塊，並且 Webpack 還有更多實用的東西，比如 代碼分離、加載器、插件
簡潔的時代：Rollup
rollup 只會將需要的函數包含到打包文件中，從而顯著減少打包文件大小
發現 add.js的 sub() 函數並沒有包含在這個打包文件中，因為沒有引用它。
個人觀點: rollup適合開發一些庫，目前rollup的插件支持不是時分豐滿，需要與webpack2或gulp結合使用來開發大型項目，對於一些小項目，完全可以rollup來構建，方便快捷。