為什么要使用模塊化？
- JavaScript在設(shè)計(jì)時(shí)由于定位原因，沒有提供類似模塊管理的功能，開發(fā)者需要模擬出類似的功能，來隔離、組織復(fù)雜的JavaScript代碼，我們稱為模塊化。
最主要的目的：
- 解決命名沖突。
- 依賴管理。
其它價(jià)值：
- 提高代碼可讀性。
- 代碼解耦提高復(fù)用性。
CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
AMD：
AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對(duì)應(yīng)的庫函數(shù)，也就是大名鼎鼎RequireJS，實(shí)際上AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化的產(chǎn)出
requireJS主要解決兩個(gè)問題
- 多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
- js加載的時(shí)候?yàn)g覽器會(huì)停止頁面渲染，加載文件越多，頁面失去響應(yīng)時(shí)間越長(zhǎng)
使用requireJS的例子：
// 定義模塊 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加載模塊
require(['myModule'], function (my){
my.printName(); });
CMD：
CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運(yùn)行、解析）時(shí)機(jī)上有所不同
Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫法
demo:
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
CommonJS:
CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范。Node.JS首先采用了js模塊化的概念。
定義模塊： 根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為global對(duì)象的屬性
模塊輸出： 模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
加載模塊： 加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象
demo:
//模塊定義 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName,
printFullName: printFullName
}
//加載模塊
var nameModule = require('./myModel.js');
nameModule.printName();
