我也來(lái)說(shuō)說(shuō)js的模塊化
秉承哲學(xué)中認(rèn)識(shí)問題的邏輯思維過(guò)程率寡，我從“是什么”剪返，“為什么”废累，“怎么樣（怎么用）”總結(jié)了一下js模塊化開發(fā)。
一脱盲、是什么
談?wù)撘患挛飼r(shí)邑滨，要先搞清楚它是什么。
1钱反、定義
Javascript本身不是一種模塊化編程語(yǔ)言掖看，應(yīng)該說(shuō)是在ES6之前沒有模塊功能。
模塊是實(shí)現(xiàn)特定功能的一種方法诈铛。簡(jiǎn)單來(lái)說(shuō)乙各，定義一個(gè)函數(shù)就是一個(gè)模塊。像這樣：
function alertMessage(){
alert("這是一條提示");
}
但是幢竹，這樣的模塊污染了全局變量耳峦，所以我們可以這樣：
var alertDialog = {
message：“這是一條提示”，
alertMessage: function(){
alert(this.message);
}
};
但是焕毫，這樣你又可以通過(guò)
alertDialog.message = "這不是一條提示"蹲坷；
將模塊的內(nèi)部屬性修改，這不是我們?cè)敢饪吹降囊仂Ｋ匝辛巳缦路绞剑?/p>
var alertDialog = (function(){
var message = “這是一條提示”;
var alertMessage(){
alert("這是一條提示");
};
return {
alertMessage : alertMessage
};
})();
如此這般，私有成員就不會(huì)暴露出來(lái)了疙咸。
這些都可以稱為模塊县匠。
2、性質(zhì)
模塊應(yīng)該具有獨(dú)立性，如果要在模塊內(nèi)部使用全局變量乞旦，需要作為參數(shù)傳入贼穆。
var alertDialog = (function ($) {
//...
})(jQuery);
這就引出了模塊的依賴性。
二兰粉、為什么
既然知道了什么是模塊故痊，那么我們?yōu)槭裁匆褂媚K呢？
使用模塊可以將項(xiàng)目功能分離玖姑，便于維護(hù)愕秫，方便復(fù)用，以及上文說(shuō)到的避免污染全局變量焰络。
三戴甩、怎么用
如果你僅僅是按照上述的方法創(chuàng)建模塊，并通過(guò)“script”引用模塊闪彼，你會(huì)發(fā)現(xiàn)維護(hù)起來(lái)非常困難：js文件之間存在依賴關(guān)系等恐，因此必須嚴(yán)格保證加載順序，
依賴性最大的模塊一定要放到最后加載备蚓。這個(gè)時(shí)候，你需要你就需要用到模塊化了(模塊化很重要的一點(diǎn)就是簡(jiǎn)化依賴關(guān)系),模塊化遵循標(biāo)準(zhǔn)囱稽，方便自動(dòng)化依賴管理郊尝，代碼優(yōu)化，部署战惊。
模塊化實(shí)現(xiàn)兩部分功能：
1流昏、按需加載（關(guān)于這一點(diǎn)，淺談模塊化加載的實(shí)現(xiàn)原理這篇文章有詳細(xì)說(shuō)明吞获。）
2况凉、管理模塊之間的依賴性，便于代碼的編寫和維護(hù)
既然模塊化有使用的必要各拷，所以模塊化規(guī)范也就產(chǎn)生了刁绒，我們使用模塊化的時(shí)候也要遵守模塊化規(guī)范。
終于說(shuō)到了重點(diǎn)：
1烤黍、CommonJS規(guī)范
CommonJS是服務(wù)器端模塊的規(guī)范知市，Node.js采用了這個(gè)規(guī)范。
//dialog.js
function alertDialog(){
this.alertMessage = function(){
alert("這是一條提示");
}
}
var alertDialog = new alertDialog();
exports.alertDialog = alertDialog;
var dialog = require('./dialog').alertDialog;
??直接通過(guò)require方法引用文件速蕊，返回文件的exports對(duì)象嫂丙，這樣就可以使用模塊暴露出來(lái)的公用方法或變量。
??但是规哲，CommonJS 加載模塊是同步的跟啤，所以只有加載完成才能執(zhí)行后面的操作。像Node.js主要用于服務(wù)器的編程，加載的模塊文件一般都已經(jīng)存在本地硬盤隅肥，所以加載起來(lái)比較快竿奏，不用考慮異步加載的方式，所以CommonJS規(guī)范比較適用武福。但如果是瀏覽器環(huán)境议双，要從服務(wù)器加載模塊，這是就必須采用異步模式捉片。所以就有了 AMD和CMD 解決方案平痰。
2、AMD(Asynchronous Module Definition)
??顧名思義伍纫，異步模塊定義宗雇。
??AMD的代表是RequireJS，通過(guò)define(id?, dependencies?, factory)來(lái)定義模塊莹规，require([dependencies], function(){})來(lái)調(diào)用模塊赔蒲，使用提前異步加載依賴模塊的方式，模塊加載完畢后執(zhí)行回調(diào)函數(shù)良漱，這里要好好理解JS的異步機(jī)制舞虱，不可按同步順序執(zhí)行的思維去理解，多個(gè)文件異步并行加載母市，哪個(gè)先執(zhí)行完不是你按照加載順序可預(yù)料到的矾兜，而是等所有依賴執(zhí)行完畢，最后一并回調(diào)結(jié)果患久。
3椅寺、CMD
??CMD的代表是SeaJS，與RequireJS定義和加載模塊的方式略有不同蒋失，同樣可以通過(guò)define(id?, dependencies?, factory)定義模塊返帕，但是SeaJS是采用的就近依賴的方式來(lái)加載模塊，一般不在dependencies里依賴模塊篙挽，而是統(tǒng)一寫法：define(function(require, exports, module){})荆萤，在factory里就近加載依賴模塊，由seajs.use([dependencies],function(mod,[mod]){})來(lái)使用模塊嫉髓；本質(zhì)上也是異步的加載模塊观腊，只是和RequireJS相比加載和執(zhí)行的時(shí)機(jī)不一樣罷了。
4算行、AMD和CMD的區(qū)別
??相比來(lái)說(shuō)梧油，Seajs和Requirejs都是很不錯(cuò)的前端模塊化組織方案，各有千秋州邢；Requirejs要等到所有前置依賴加載并執(zhí)行完畢儡陨，再回調(diào)主要的代碼邏輯褪子，如果非要說(shuō)有所欠缺，就得在前置依賴那里做優(yōu)化了骗村，但大致上是很流暢的嫌褪；Seajs只是將依賴模塊預(yù)先加載并不執(zhí)行，在需要時(shí)就近使用胚股，這時(shí)就可能也許會(huì)出現(xiàn)延遲的現(xiàn)象笼痛。
四、ES6的模塊化
??在ES6中一個(gè)模塊看起來(lái)就和一個(gè)普通的腳本文件一樣琅拌，除了以下兩個(gè)區(qū)別：
1缨伊、ES6 的模塊自動(dòng)開啟嚴(yán)格模式，即使你沒有寫 'use strict'进宝；
2刻坊、你可以在模塊中使用 import 和 export。
//dialog.js
export function alertDialog(){
alert("這是一條提示");
}
import {alertDialog} from dialog.js
五党晋、模塊化工具應(yīng)用
目前常用的模塊化工具除了上文提到的sea.js和require.js,就是browserify和webpack了谭胚。
現(xiàn)在我們來(lái)說(shuō)說(shuō)它們的不同：
sea.js和require.js是在線編譯模塊方案，browserify和webpack是預(yù)編譯模塊方案未玻。
六灾而、參考資料
http://famanoder.com/bokes/5867ebf04aee37201fb4d1cb
https://jdc.jd.com/archives/204
https://segmentfault.com/a/1190000004873947
https://zhuanlan.zhihu.com/p/22890374
http://famanoder.com/bokes/58484c12712c723c0f316dae
http://www.ruanyifeng.com/blog/2012/11/require_js.html
http://lishaopeng.com/2016/02/05/js-module/
http://fex.baidu.com/blog/2014/03/fis-module/#comments
http://caibaojian.com/module-definition.html
