前端的模塊化根據(jù)環(huán)境的不同有不同的規(guī)范，所以寫一下各個方面的前端的模塊化，以加深自己的理解。主要分四塊：es5環(huán)境下的模塊化、commonJs下的模塊化、es6環(huán)境下的模塊化、AMD和CMD。
一、es5 環(huán)境下的模塊化
早期的 Javascript 并沒有模塊化的思想，他被創(chuàng)造出來作為腳本的存在 ，用來解決HTML中的一些基本的動畫和展示。后來隨著前后端分離，前端業(yè)務(wù)量的增加，以及 命名沖突、代碼無法復(fù)用等問題的出現(xiàn)，對于Javascript有了新的要求。
其實es5也可以實現(xiàn)簡單的模塊化。主要方式是：閉包+變量
// moduleA.js
;
var moduleA = (function(){
var obj = {
name:'one',
add: function(num1, num2) {
return num1 + num2
}
}
return obj
})()
// main.js
var name = moduleA.name
var num = moduleA.add(1, 2)
// 在HTML 中需要注意兩個js引入順序， 先module.js 后 main.js
二、commonJs下的模塊化
commonJs規(guī)范 最常見的應(yīng)用就是nodejs 環(huán)境中的應(yīng)用。它定義了導(dǎo)入和導(dǎo)出的方式：
- require()
- module.exports / exports
module.exports 的導(dǎo)出，導(dǎo)出為一個對象，可以在里面定義導(dǎo)出的屬性。
// moduleA.js
var name = 'one'
function add(num1, num2) {
return num1 + num2
}
// 這里的導(dǎo)出必定是一個對象
module.exports = {
name, // => num: num
add // => add: add
}
exports 簡寫導(dǎo)出，注意不能對exports 進行賦值操作。
// moduleB.js
// 使用exports的時候可以通過點的形式添加屬性，最終他們會被添加到一個對象中對外導(dǎo)出。
exports.name = 'moduleB'
exports.mul = function(num1, num2) {
return num1 * num2
}
// 錯誤用法 如下
exports = {
name : 'moduleB'
}
/*
// 規(guī)范規(guī)定
var exports = module.exports
exports.name = 'ddd' // 相當(dāng)于在module.exports.name = 'ddd'
exports = {
name : 'moduleB'
} // 這里進行了重新賦值 此時就和module.export無關(guān)了
// 規(guī)范規(guī)定最后的返回是
return module.exports
*/
require()` 導(dǎo)入使用，動態(tài)加載， 需要注意導(dǎo)入的位置，同步方法，讀入并執(zhí)行一個js文件（如果已經(jīng)讀入了就從緩存加載），然后返回該文件導(dǎo)出的對象，如果沒有找到，則會報錯。
// main.js
// 導(dǎo)入 可以放在文件的最開頭
var moduleA = require('./moduleA.js')
// 導(dǎo)入 可以放在方法中 ，這個時候什么時候方法被調(diào)用，什么時候?qū)氲奈募艜患虞d進入內(nèi)存
function foo() {
var { name, mul } = require('./moduleB.js') // 當(dāng)然 此時可以解構(gòu)導(dǎo)入的對象
}
require的加載規(guī)則：
-
require(/usr/test/a)以/開頭的路徑，會作為全局路徑加載 -
require(./b)以.開頭的路徑，會作為相對路徑加載 -
require('path')不以/ 或者.開頭，會從node_module中加載。 -
require('test_module/path/a')不以/ 或者.開頭，是一個路徑，那么會先找到test_module的位置然后往下找。 - 如果指定 的模塊沒找到，Node會嘗試為文件名添加
.js、.json、.node后，再去搜索。 - 可以通過
require.resolve()得到文件確切加載名。
require的加載原理：
- require 不是一個全局命令，它指向了模塊的
module.require命令 -
module.require調(diào)用了Module._load函數(shù) -
Module._load函數(shù)內(nèi)部會進行一下判斷- 檢查
Module._cache,緩存中是否有指定模塊 - 如果沒有就創(chuàng)建一個新的Module 實例，并保存到緩存
- 調(diào)用
Module.load()加載指定的模塊文件。讀取內(nèi)容后調(diào)用Module.compile()進行解析 - 解析/加載過程中如果報錯，就從緩存中刪除
- 返回模塊對應(yīng)的module.exports
- 檢查
三、es6環(huán)境下的模塊化
es6的模塊化同樣也是分導(dǎo)入和導(dǎo)出兩塊，同時為了使得瀏覽器識別用了模塊化，需要在腳本引用的時候標(biāo)明。
<html>
<body>
...
/* 只有在這里標(biāo)明type， 在js文件中使用es6模塊化，才能被瀏覽器處理 */
<script src="./module.js" type="module"></script>
<script src="./main.js" type="module"></script>
</body>
</html>
具體使用方式：
- export
- import from
export 導(dǎo)出模塊，主要用法：
// moduleA.js
const name = 'moduleA'
function add(a, b) {
return a + b
}
// 1. 導(dǎo)出一個對象（推薦）
export {
name, add
}
// 2. 單個導(dǎo)出
export const age = 21
export function mul(a, b) {
return a * b
}
// 3. 在1基礎(chǔ)上改進 重定義對外暴露的名稱
export {
name as outName,
add as OutAdd
}
// 4. 默認導(dǎo)出 同一個文件中只允許export default 1個
// 好處是：這種方式導(dǎo)出， 在導(dǎo)入的時候可以自由命名。
// export default name
// export default add
// export default { }
import from 靜態(tài)導(dǎo)入模塊，主要用法：
// main.js
// 導(dǎo)入一般寫在文件開頭 靜態(tài)導(dǎo)入
// 1. 導(dǎo)入模塊
import {name, add} from './moduleA.js'
// 2. 重命名導(dǎo)入
import {name as outName, add as outAdd} from './moduleA.js'
// 3. 當(dāng)導(dǎo)出使用的是export.default的時候，可以如下導(dǎo)入
import data from './moduleA.js'
// 4. 統(tǒng)一全部導(dǎo)入
import * as info from './moduleA.js'
// 5. 還可以通過import() 函數(shù)導(dǎo)入
import('./moduleA.js').then(res => {
}).catch(err => {})
四、AMD、CMD
AMD作為一種模塊規(guī)范，采用的是異步的方式去加載依賴的模塊，比如：require.js實現(xiàn)AMD
// 使用define方法定義一個模塊
define('a', [/* 需要引用的模塊 */], function () {
return 'a';
});
require([/* 需要引用的模塊 */], function () {
});
CMD是另外一種模塊規(guī)范，和AMD 類似，比如：sea.js 兩者的區(qū)別是：
- AMD 事先聲明，前置加載
- CMD 動態(tài)生命，用到時加載
define(function(require, exports, module) {
// 懶加載
var $ = require('jquery.js')
exports.add = function(a, b) {
return a+b
}
})
最后，模塊化的目的是為了代碼的更好的復(fù)用，所以咯，使用方式可以各式各樣，但是目的一致。
