這幾天看了下前端模塊化的知識，主要是requirejs和seajs相關的知識，還未看es6的模塊化知識。
由於目前項目組內的開始推廣使用vue，並且開始簡單的封裝組件，但發現組件js的使用方式依然是原先的script標簽引用方式，同時組件的template文件需作為字符串變量在組件js文件內封裝，無法使用html標簽的驗證、補全、語法高亮等功能，此外多個小型組件組合成大型組件時，需要在每個使用到大型組件的html頁面中把所有的小型組件js引入，代碼重復並且容易出現遺漏情況。於是想到了前端模塊化相關的知識，將組件封裝為模塊，使用前端模塊化相關的工具，解決模塊之間的依賴關系，只需引入單一的js文件即可，方便維護管理。
AMD和requirejs
AMD是Asynchronous Module Definition，異步模塊定義。
AMD規范定義了一個define函數。AMD規范 https://github.com/amdjs/amdjs-api/wiki/AMD
define( id?, dependencies?, factory );
第一個參數，id 為字符串類型，為可選參數，為模塊的標識。如果此標識不存在，模塊的標識則為此腳本的文件名稱，必要時還包含此文件的路徑。
第二個參數，dependencies為字符串數組，為當前模塊依賴的其他模塊標識。
第三個參數，factory為function，其參數對應依賴模塊，是一個需要進行實例化的函數或者一個對象。
requirejs是一個基於javascript語言的文件和模塊加載器。
其實用非常簡單，官方資料也比較充分。模塊體現在requirejs中，可如下所示：定義了一個名稱為myModule的模塊，它依賴於dep1和dep2兩個模塊，此模塊返回了一個對象，此對象包含一個名稱為name的屬性。
define('myModule',['dep1','dep2'],function(dep1,dep2){
return {
name:'hello world'
}})
模塊可以使用依賴模塊的文件路徑，此時依賴模塊的相對路徑是相對當前模塊所在的路徑。
define('myModule',['./modules/dep1','dep2'],function(dep1,dep2){
return {
name:'hello world'
}})
在requirejs中，可以直接將vue作為一個模塊引入使用。
使用插件：當存在模板文件時，依賴的模塊名稱前面增加"text!"即表示此依賴為文本文件，這樣即可將vue的模板文件異步加載進來，使用“css!”，css文件也可這樣引用。
requirejs使用感受
requirejs可以說是一種先聲明再使用的方式，所有依賴的模塊加載完畢后，再執行此模塊的內容。
唯一害怕的是，添加依賴模塊時，需要同時修改兩個地方，還要保證映射關系不錯，當依賴的模塊太多時，害怕。好在暫時沒想到需要依賴很多模塊的模塊。
當然也有另一種方式使用依賴的模塊，require是使用模塊的函數定義，不用擔心模塊會被重復加載。仍需再define中定義依賴的模塊，只不過在需要時使用require獲取即可。
define(['a'], function () { var a = require('a'); });
CMD和seajs
玉伯寫的seajs，使用方式如下所示
define(function(require,exports,module){ //此處如果需要某XX模塊，可以引入 var xx=require('XX'); });
這樣，代碼在運行時遇到require時，才會同步加載所需的模塊。
模塊內容定義，需使用exports和module實現，可以同requirejs一樣，返回對象即可。
通過使用seajs-text插件，可以將文本文件作為模塊加載進來，完成vue組件的代碼模板分開編寫的目的。
seajs使用感受
拋除seajs和requirejs中的define的不同，二者在使用上沒有什么區別。requirejs可以require一個依賴模塊，只不過需先定義下。
seajs是執行時發現需要依賴模塊再異步加載，requirejs異步加載定義依賴模塊后再執行。
http://huangxuan.me/js-module-7day/這個PPT講解清晰明了