什么是模塊化？
- 將一個復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件), 并進行組合在一起
- 塊的內(nèi)部數(shù)據(jù)與實現(xiàn)是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通信
模塊化的理解
模塊化是一種處理復(fù)雜系統(tǒng)分解為更好的可管理模塊的方式如蚜。簡單來說就是解耦，簡化開發(fā)大州，一個模塊就是實現(xiàn)特定功能的文件，可以更方便地使用別人的代碼垂谢，想要什么功能厦画，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范。
主要從IIFE根暑、AMD力试、CMD、CommonJS排嫌、UMD畸裳、webpack(require.ensure)、ES Module 這幾個角度考慮淳地。
IIFE
IIFE（ 立即調(diào)用函數(shù)表達式）是一個在定義時就會立即執(zhí)行的 JavaScript 函數(shù)怖糊。特點：
在一個單獨的函數(shù)作用域中執(zhí)行代碼，避免變量沖突颇象。
(function () {
statements
})();
這是一個被稱為 自執(zhí)行匿名函數(shù) 的設(shè)計模式伍伤，主要包含兩部分。第一部分是包圍在 圓括號運算符 () 里的一個匿名函數(shù)夯到，這個匿名函數(shù)擁有獨立的詞法作用域。這不僅避免了外界訪問此 IIFE 中的變量饮亏，而且又不會污染全局作用域耍贾。
第二部分再一次使用 () 創(chuàng)建了一個立即執(zhí)行函數(shù)表達式，JavaScript 引擎到此將直接執(zhí)行函數(shù)路幸。
(function () {
var name = "Barry";
})();
// 無法從外部訪問變量 name
name // 拋出錯誤："Uncaught ReferenceError: name is not defined"
var result = (function () {
var name = "Barry";
return name;
})();
// IIFE 執(zhí)行后返回的結(jié)果：
result; // "Barry"
AMD
AMD 即 Asynchronous Module Definition荐开，中文名是“異步模塊定義”的意思。在瀏覽器環(huán)境简肴，要從服務(wù)器端加載模塊晃听，就必須采用非同步模式，因此瀏覽器端一般采用AMD規(guī)范砰识。AMD是一個在瀏覽器端模塊化開發(fā)的規(guī)范能扒，而AMD規(guī)范的實現(xiàn)，就是require.js辫狼。特點：依賴必須提前聲明好初斑。
- 優(yōu)點：異步加載，不阻塞頁面的加載膨处，能并行加載多個模塊
- 缺點：不能按需加載见秤，必須提前加載所需依賴
// 定義
// 獨立模塊 es1.js
define({
module1: function() {},
module2: function() {},
});
// 等價寫法
define(function () {
return {
module1: function() {},
module2: function() {},
};
});
// 非獨立模塊 只有先加載這兩個模塊，新模塊才能正常運行 es2.js
define(['es1', 'es2'], function(m1, m2) {
return {
method: function() {
m1.methodA();
m2.methodB();
}
};
});
// 使用
require(['es1', 'es2'], function ( es1, es2) {
es1.module1()
es1.module2()
es2.mothod()
});
CMD
CMD規(guī)范專門用于瀏覽器端真椿，模塊的加載是異步的鹃答，模塊使用時才會加載執(zhí)行。CMD規(guī)范整合了CommonJS和AMD規(guī)范的特點突硝。在 Sea.js 中测摔，所有 JavaScript 模塊都遵循 CMD模塊定義規(guī)范。特點：支持動態(tài)引入依賴文件解恰。
- 優(yōu)點：可以按需加載避咆，依賴就近
- 缺點：依賴SPM打包舟肉，模塊的加載邏輯偏重
// 定義
// 使用 exports 直接向外提供接口。
define(function(require, exports) {
// 對外提供 name屬性
exports.name = 'Tom';
// 對外提供 say 方法
exports.say= function(name) {
console.log("hello"+name)
};
});
// 使用 return 直接向外提供接口查库。
define(function(require) {
return {
name : 'Tom',
say: function(name) {
console.log("hello"+name)
}
};
});
// 使用 module.exports 直接向外提供接口路媚。
define(function(require, exports, module) {
module.exports = {
name: 'Tom',
say: function(name) {
console.log("hello"+name)
}
};
});
// 使用
define(function (require) {
var m1 = require('./module1')
console.log(m1.name) // Tom
m1.say(m1.name) // Hello Tom
})
// require.async 方法用來在模塊內(nèi)部異步加載模塊，并在加載完成后執(zhí)行指定回調(diào)樊销。callback 參數(shù)可選整慎。
define(function(require, exports, module) {
// 異步加載一個模塊
require.async('./module1', function(a) {
a.doSomething();
});
// 異步加載多個模塊，在加載完成時围苫，執(zhí)行回調(diào)
require.async(['./module2', './module3'], function(b, c) {
b.doSomething();
c.doSomething();
});
})
CommonJS
Node 應(yīng)用由模塊組成裤园，采用 CommonJS 模塊規(guī)范，前端的webpack也是對CommonJS原生支持的剂府。每個文件就是一個模塊拧揽，有自己的作用域。在一個文件里面定義的變量腺占、函數(shù)淤袜、類，都是私有的衰伯，對其他文件不可見铡羡。在服務(wù)器端，模塊的加載是運行時同步加載的意鲸；在瀏覽器端烦周，模塊需要提前編譯打包處理。
// 定義
es1.js
var name = "Tom";
var age = 16;
function say(name,age){
console.log(name+"is"+age+"years old")
}
// 語法1
module.exports.name = name;
module.exports.age = age;
module.exports.say = say;
// 語法2
exports.name = name;
exports.age = age;
exports.say = say;
// 語法3
module.exports = {
name,
age,
say
}
// 語法4
module.exports = {
name : "Tom",
age : 16,
say(name,age){
console.log(name+"is"+age+"years old")
}
}
// 引用
var module = require('./es1.js')
consolo.log(module.name) //Tom
consolo.log(module.age) //16
module.say(name,age) //Tom is 16 years old
注：
- exports 與module.exports 的區(qū)別：exports 是對 module.exports 的引用怎顾，不能直接給exports 賦值读慎，直接賦值無效，結(jié)果是一個空對象, module.exports 可以直接賦值
- 一個文件不能寫多個module.exports 槐雾，如果寫多個贪壳，對外暴露的接口是最后一個module.exports
- 模塊如果沒有指定使用module.exports 或者exports 對外暴露接口時，在其他文件就引用該模塊蚜退，得到的是一個空對象{}
- 瀏覽器不兼容CommonJS闰靴，在于缺少四個Node.js環(huán)境的變量。(module,exports,require,global)
UMD
UMD 叫做通用模塊定義規(guī)范（Universal Module Definition）钻注。也是隨著大前端的趨勢所誕生蚂且，它可以通過運行時或者編譯時讓同一個代碼模塊在使用 CommonJs、CMD 甚至是 AMD 的項目中運行幅恋。未來同一個 JavaScript 包運行在瀏覽器端杏死、服務(wù)區(qū)端甚至是 APP 端都只需要遵守同一個寫法就行了。是集結(jié)了 CommonJs、CMD淑翼、AMD 的規(guī)范于一身腐巢。
// UMD的實現(xiàn)
((root, factory) => {
if (typeof define === 'function' && define.amd) {
//AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
//CommonJS
var $ = requie('jquery');
module.exports = factory($);
} else {
root.testModule = factory(root.jQuery);
}
})(this, ($) => {
//todo
});
不難發(fā)現(xiàn)，它在定義模塊的時候回檢測當前使用環(huán)境和模塊的定義方式玄括，將各種模塊化定義方式轉(zhuǎn)化為同樣一種寫法冯丙。它的出現(xiàn)也是前端技術(shù)發(fā)展的產(chǎn)物，前端在實現(xiàn)跨平臺的道路上不斷的前進遭京，UMD 規(guī)范將瀏覽器端胃惜、服務(wù)器端甚至是 APP 端都大統(tǒng)一了
webpack(require.ensure)
webpack 2.x 版本中的代碼分割
ES Module
ES6 在語言標準的層面上，實現(xiàn)了模塊功能哪雕，而且非常簡單船殉，ES6到來,完全可以取代 CommonJS 和 AMD規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案斯嚎。ES6 模塊的設(shè)計思想是盡量的靜態(tài)化利虫，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量堡僻。
注：由于ES6目前在部分版本的瀏覽器中無法執(zhí)行糠惫，所以，我們需要通過babel將不被支持的import編譯為當前受到廣泛支持的 require苦始。
// 定義
// 變量 es3.js
export var m = 1;
//函數(shù)
export function fn(x, y) {
return x * y;
};
//類class
class Hello{
test(){
console.log("hello")
}
}
// 也可以合并為一個出口暴露
var m = 1;
function fn(x, y) {
return x * y;
};
class Hello{
test(){
console.log("hello")
}
}
export {
m,
fn,
Hello
}
// 在暴露模塊時寞钥，可以通過 as 來進行重命名
export{
num as m,
foo as fn,
Test as Hello
}
// 引用
//靜態(tài)加載,只加載es3.js 文件中三個變量慌申，其他不加載
import {m, fn, Hello} from './es3.js';
//import命令要使用as關(guān)鍵字陌选，將輸入的變量重命名。
import {fn as fn1} from './es3.js';
//整體加載模塊
improt * as all from './es3.js'
console.log(all.m) // 1
console.log(all.fn(3,4)) // 12
all.Hello.test() // hello
特點：
- ES6 模塊之中蹄溉，頂層的this指向undefined咨油，即不應(yīng)該在頂層代碼使用this。
- 自動采用嚴格模式"use strict"柒爵。須遵循嚴格模式的要求
- ES6 模塊的設(shè)計思想是盡量的靜態(tài)化役电，編譯時加載”或者靜態(tài)加載，編譯時輸出接口
- ES6 模塊export棉胀、import命令可以出現(xiàn)在模塊的任何位置法瑟，但是必須處于模塊頂層。如果處于塊級作用域內(nèi)唁奢，就會報錯
- ES6 模塊輸出的是值的引用
模塊化的好處
- 避免命名沖突(減少命名空間污染)
- 更好的分離, 按需加載
- 更高復(fù)用性
- 高可維護性
模塊化的作用
減少JS文件的請求次數(shù)霎挟，通過模塊化將JS文件整合為一個入口，然后引入頁面可以有效的減少對JS文件的請求麻掸；
使各JS文件的依賴關(guān)系清晰酥夭，在模塊化中可以清晰的分析各模塊的引用關(guān)系，明確JS代碼的結(jié)構(gòu)；
降低項目的維護成本熬北，當有某個模塊需要添加或減少某個功能使疙描，不需要將整個代碼重構(gòu)，只需要在相應(yīng)的模塊進行修改就可以讶隐。
