爲什麼會有模塊化
-
命名衝突：當項目由團隊進行協作開發的時候，不同開發人員的變量和函數命名可能相同；即使是一個開發，當開發週期比較長的時候，也有可能會忘記之前使用了什麼變量，從而導致重複命名，導致命名衝突。
-
文件依賴：代碼重用時，引入 js 文件的數目可能少了，或者引入的順序不對，比如使用 boostrap 的時候，需要引入 jQuery，並且 jQuery 的文件必須要比 boostrap 的 js 文件先引入。
-
代碼耦合度過高：如今講究的是效率與速度，特別是在進行混合式APP開發時，如果代碼重複率過高，則會導致本地資源包過大，從而無限降低了資源包的大小，也會影響代碼 的執行效率等。
模塊化開發又有哪些好處呢？
-
提升開發效率：代碼方便重用，別人開發的模塊直接拿過來就可以使用，不需要重複開發法類似的功能。
-
方便後期維護：代碼方便重用，別人開發的模塊直接拿過來就可以使用，不需要重複開發法類似的功能。
那麼如何進行模塊化開發呢？
有這麼幾種方式
1、require方式（AMD模式）
test.js
// 首先使用define進行定義
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
// 在頁面中使用require進行引用
require(["js/a"]);
requireJs 的問題在於，加在一個模塊時，會預先加載該模塊的所有依賴模塊，但是這些依賴很可能一開始並不用到。同時依賴寫起來一長串，也很麻煩。比較好的是 AMD 保留了 commonJs 中的 require、exprots、module3 個功能，可以不把以來都寫在 dependencies 中，而是在需要時使用 require 引入。
2、後起之秀SeaJs（CMD模式）
- 引入 sea.js 庫
- 定義模塊
- define(function(require, exports, module){模塊代碼});
- require(‘模塊 id’)
- seajs.use(‘模塊 id’,function( 模塊對象){業務代碼});
3、ES2015 模塊標準
ES6 考慮了模塊化，使用 import 和 export，代碼更加簡潔，還有許多新特性讓開發更加方便。