目標(biāo)：了解js模塊構(gòu)建原理。
參考視頻：https://www.bilibili.com/video/av79663759?t=158&p=2
demo代碼
下面代碼中的module對象為模塊構(gòu)建工具。
原理：利用函數(shù)執(zhí)行返回值暴露指定內(nèi)容（這樣不會暴露局部變量），構(gòu)建一個對象保存模塊。依賴時根據(jù)名稱查找到對應(yīng)模塊，利用apply方法，將模塊傳遞給所需的模塊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 定義一個模塊管理器，自執(zhí)行方法返回定義函數(shù)
let module =(function () {
//定義一個模塊容器,按模塊名稱存儲
const moduleList = {}
//name定義模塊的名稱，modules所依賴的其他模塊,action定義模塊的動作（函數(shù)）
function define(name,modules,action) {
//根據(jù)參數(shù)modules依賴的模塊名稱，在moduleList中查找對應(yīng)模塊，生成對應(yīng)模塊數(shù)組
modules.map((currentValue,index) => {
modules[index] = moduleList[currentValue]
})
//執(zhí)行動作，返回模塊。注意這里使用的是apply方法，apply方法多個參數(shù)使用數(shù)組，如果action有多個參數(shù)數(shù)組會對應(yīng)賦值。
moduleList[name] = action.apply(null,modules)
}
return {define}
})();
//定義一個模塊，假定該模塊返回一句話
//為什么使用執(zhí)行函數(shù)返回值暴露模塊對象，而不直接暴露對象？我想是因為如果存在變量，返回值暴露的對象，不能修改變量，而直接暴露的對象可以修改這個值
module.define("m1",[],function () {
return {
//采用es6簡寫方法
say(){
return "執(zhí)行模塊方法返回的值"
}
}
})
//定義一個模塊依賴上面定義定m1模塊,action動作參數(shù)中需要指定模塊定名稱。如果依賴多個模塊，funtion中參數(shù)應(yīng)該與依賴的模塊名稱一致
module.define("m2",["m1"],function (m1) {
let result = m1.say();
console.log(result);
})
</script>
</body>
</html>
