js本身的問(wèn)題：
不具有模塊化的語(yǔ)法規(guī)則，在語(yǔ)言層面沒(méi)有命名空間。
JavaScript 編程過(guò)程中很多時(shí)候帆吻，我們都在修改變量，在一個(gè)復(fù)雜的項(xiàng)目開(kāi)發(fā)過(guò)程中咙边，如何管理函數(shù)和變量作用域猜煮，顯得尤為重要次员。
function m1(){
//...
}
function m2(){
//...
}
- 通用模塊將所有函數(shù)方法暴露給全局作用域，造成命名沖突王带。
- 多個(gè)
script標(biāo)簽在解析過(guò)程中淑蔚，按照從上到下的順序解析，如果有依賴規(guī)則辫秧，必須按照?qǐng)?zhí)行順序束倍，被依賴者先執(zhí)行，依賴者后執(zhí)行盟戏。
模塊化的作用：
- 避免命名沖突
- 依賴管理
- 提供可維護(hù)和可復(fù)用的代碼
- 對(duì)象寫(xiě)法：函數(shù)m1()和m2()绪妹，都封裝在module1對(duì)象里。使用的時(shí)候柿究，就是調(diào)用這個(gè)對(duì)象的屬性邮旷。module1.m1()；但是蝇摸，這樣的寫(xiě)法會(huì)暴露所有模塊成員婶肩，內(nèi)部狀態(tài)可以被外部改寫(xiě)。比如貌夕，外部代碼可以直接改變內(nèi)部計(jì)數(shù)器的值律歼。
module1._count = 5;
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
- 命名空間：頂級(jí)的應(yīng)用命名空間被掛載到唯一一個(gè)全局對(duì)象上的對(duì)象（在瀏覽器中是 window，在 Node.js 應(yīng)用中是 global）
var MYNAMESPACE = MYNAMESPACE || {};
MYNAMESPACE.person = function(name) {
this.name = name;
};
MYNAMESPACE.person.prototype.getName = function() {
return this.name;
};
// 使用方法
var p = new MYNAMESPACE.person("doc");
p.getName();
// 嵌套的命名空間
var myMasterNS = myMasterNS || {};
myMasterNS.mySubNS = myMasterNS.mySubNS || {};
myMasterNS.mySubNS.someFunction = function(){
//插入邏輯
};
- 閉包：匿名自執(zhí)行函數(shù)啡专，外部代碼無(wú)法直接改變內(nèi)部計(jì)數(shù)器的值险毁。
module1._count = 5；
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
- 繼承模塊：
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
// 模塊可能為空
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
解決方案：
模塊化 CJS们童、AMD畔况、CMD、UMD慧库、ESM
統(tǒng)一模塊規(guī)范
commonjs：
var MySalute = "Hello";
module.exports = MySalute;
// world.js
var MySalute = require("./salute");
var Result = MySalute + " world!";
console.log(Result);
- node環(huán)境
CommonJS規(guī)范
所有代碼都運(yùn)行在模塊作用域跷跪，不會(huì)污染全局作用域。
模塊可以多次加載齐板，但是只會(huì)在第一次加載時(shí)運(yùn)行一次吵瞻，然后運(yùn)行結(jié)果就被緩存了，以后再加載甘磨，就直接讀取緩存結(jié)果听皿。要想讓模塊再次運(yùn)行，必須清除緩存宽档。
模塊加載的順序尉姨，按照其在代碼中出現(xiàn)的順序。
var math = require('math');
var math = require('math');
math.add(2,3); // 5
- 瀏覽器環(huán)境
Uncaught ReferenceError: require is not defined
瀏覽器不兼容CommonJS的根本原因吗冤，在于缺少四個(gè)Node.js環(huán)境的變量：
module
exports
require
global
瀏覽器加載 CommonJS 模塊的原理與實(shí)現(xiàn)browserify
第二行math.add(2, 3)又厉，在第一行require('math')之后運(yùn)行九府，因此必須等math.js加載完成。也就是說(shuō)覆致，如果加載時(shí)間很長(zhǎng)侄旬，整個(gè)應(yīng)用就會(huì)停在那里等。這對(duì)服務(wù)器端不是一個(gè)問(wèn)題煌妈，因?yàn)樗械哪K都存放在本地硬盤(pán)儡羔，可以同步加載完成，等待時(shí)間就是硬盤(pán)的讀取時(shí)間璧诵。但是汰蜘，對(duì)于瀏覽器，這卻是一個(gè)大問(wèn)題之宿，因?yàn)槟K都放在服務(wù)器端族操，等待時(shí)間取決于網(wǎng)速的快慢，可能要等很長(zhǎng)時(shí)間比被，瀏覽器處于"假死"狀態(tài)色难。因此，瀏覽器端的模塊等缀，不能采用"同步加載"（synchronous）枷莉，只能采用"異步加載"（asynchronous）。這就是AMD規(guī)范誕生的背景尺迂。
AMD：
以瀏覽器第一的原則發(fā)展依沮，異步加載模塊。主要有兩個(gè)Javascript庫(kù)實(shí)現(xiàn)了AMD規(guī)范：require.js和curl.js枪狂。
- require.js
js 文件越來(lái)越大，需要同時(shí)加載多個(gè)js文件宋渔。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
問(wèn)題：
- 加載的時(shí)候州疾，瀏覽器會(huì)停止網(wǎng)頁(yè)渲染，加載文件越多皇拣，網(wǎng)頁(yè)失去響應(yīng)的時(shí)間就會(huì)越長(zhǎng)
- 其次严蓖，由于js文件之間存在依賴關(guān)系，因此必須嚴(yán)格保證加載順序（比如上例的1.js要在2.js的前面）氧急，依賴性最大的模塊一定要放到最后加載颗胡，當(dāng)依賴關(guān)系很復(fù)雜的時(shí)候，代碼的編寫(xiě)和維護(hù)都會(huì)變得困難吩坝。
require.js的誕生毒姨，就是為了解決這兩個(gè)問(wèn)題：
（1）實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)钉寝；
（2）管理模塊之間的依賴性弧呐，便于代碼的編寫(xiě)和維護(hù)闸迷。
require([module], callback);
require(['math'], function (math) {
math.add(2, 3);
});
require.js的加載：
<script src="js/require.js" defer async="true" ></script>
// IE不支持這個(gè)屬性，只支持defer俘枫，所以把defer也寫(xiě)上腥沽。
// 加載requirejs文件，也可能造成網(wǎng)頁(yè)失去響應(yīng)鸠蚪。
// 解決辦法有兩個(gè)今阳，一個(gè)是把它放在網(wǎng)頁(yè)底部加載，
// 另一個(gè)是寫(xiě)成上面這樣
// 加載我們自己的代碼了茅信。假定我們自己的代碼文件是main.js盾舌，也放在js目錄下面。
<script src="js/require.js" data-main="js/main"></script>
CMD：lazyload
依賴就近
define(function(require, exports, module) {
var clock = require('clock');
clock.start();
});
AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同汹押，二者皆為異步加載模塊矿筝。
AMD依賴前置，js可以方便知道依賴模塊是誰(shuí)棚贾，立即加載窖维；而CMD就近依賴，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K妙痹，這也是很多人詬病CMD的一點(diǎn)铸史，犧牲性能來(lái)帶來(lái)開(kāi)發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略怯伊。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething() // 此處略去 100 行
var b = require('./b') // 依賴可以就近書(shū)寫(xiě)
b.doSomething() //
...
})
// AMD
define(['./a', './b'], function(a, b) { // 依賴必須一開(kāi)始就寫(xiě)好
a.doSomething() // 此處略去 100 行
b.doSomething()
...
})
UMD：
UMD先判斷是否支持Node.js的模塊（exports）是否存在琳轿，存在則使用Node.js模塊模式。在判斷是否支持AMD（define是否存在）耿芹，存在則使用AMD方式加載模塊崭篡。
(function (window, factory) {
if (typeof exports === 'object') {
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
define(factory);
} else {
window.eventUtil = factory();
}
})(this, function () {
//module ...
});
ES6 Module
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
// defer與async的區(qū)別是：
// defer要等到整個(gè)頁(yè)面在內(nèi)存中正常渲染結(jié)束（DOM 結(jié)構(gòu)完全生成，以及其他腳本執(zhí)行完成）吧秕，才會(huì)執(zhí)行琉闪；
// async一旦下載完，渲染引擎就會(huì)中斷渲染砸彬，執(zhí)行這個(gè)腳本以后颠毙，再繼續(xù)渲染。
// 一句話砂碉，defer是“渲染完再執(zhí)行”蛀蜜，async是“下載完就執(zhí)行”。
// 另外增蹭，如果有多個(gè)defer腳本滴某，會(huì)按照它們?cè)陧?yè)面出現(xiàn)的順序加載，
// 而多個(gè)async腳本是不能保證加載順序的。
瀏覽器：
type屬性設(shè)為module壮池，瀏覽器知道這是一個(gè) ES6 模塊偏瓤。
瀏覽器對(duì)于帶有type="module"的<script>，都是異步加載椰憋，不會(huì)造成堵塞瀏覽器厅克，即等到整個(gè)頁(yè)面渲染完，再執(zhí)行模塊腳本橙依，等同于打開(kāi)了<script>標(biāo)簽的defer屬性证舟。
<script type="module" src="./foo.js"></script>
如果網(wǎng)頁(yè)有多個(gè)<script type="module">，它們會(huì)按照在頁(yè)面出現(xiàn)的順序依次執(zhí)行窗骑。
<script>標(biāo)簽的async屬性也可以打開(kāi)女责，這時(shí)只要加載完成，渲染引擎就會(huì)中斷渲染立即執(zhí)行创译。執(zhí)行完成后抵知，再恢復(fù)渲染。
<script type="module" src="./foo.js" async></script>
一旦使用了async屬性软族，<script type="module">就不會(huì)按照在頁(yè)面出現(xiàn)的順序執(zhí)行刷喜，而是只要該模塊加載完成，就執(zhí)行該模塊立砸。
ES6 模塊也允許內(nèi)嵌在網(wǎng)頁(yè)中掖疮，語(yǔ)法行為與加載外部腳本完全一致。
<script type="module">
import utils from "./utils.js";
// other code
</script>
node：
Node.js 要求 ES6 模塊采用.mjs后綴文件名颗祝。也就是說(shuō)浊闪，只要腳本文件里面使用import或者export命令，那么就必須采用.mjs后綴名螺戳。Node.js 遇到.mjs文件搁宾，就認(rèn)為它是ES6 模塊，默認(rèn)啟用嚴(yán)格模式倔幼，不必在每個(gè)模塊文件頂部指定"use strict"盖腿。
如果不希望將后綴名改成.mjs，可以在項(xiàng)目的package.json文件中凤藏，指定type字段為module。
如果這時(shí)還要使用 CommonJS 模塊堕伪，那么需要將 CommonJS 腳本的后綴名都改成.cjs揖庄。
CommonJS和ES6的區(qū)別：
CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用欠雌。
CommonJS 模塊是運(yùn)行時(shí)加載蹄梢，ES6 模塊是編譯時(shí)輸出接口。
CommonJS 模塊的require()是同步加載模塊，ES6 模塊的import命令是異步加載禁炒，有一個(gè)獨(dú)立的模塊依賴的解析階段而咆。
CommonJs
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};
// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get counter() {
return counter
},
incCounter: incCounter,
};
ES6
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
