目標:了解js模塊構建原理既们。
參考視頻:https://www.bilibili.com/video/av79663759?t=158&p=2
demo代碼
下面代碼中的module對象為模塊構建工具。
原理:利用函數執(zhí)行返回值暴露指定內容(這樣不會暴露局部變量)四敞,構建一個對象保存模塊甲棍。依賴時根據名稱查找到對應模塊简识,利用apply方法,將模塊傳遞給所需的模塊感猛。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 定義一個模塊管理器七扰,自執(zhí)行方法返回定義函數
let module =(function () {
//定義一個模塊容器,按模塊名稱存儲
const moduleList = {}
//name定義模塊的名稱,modules所依賴的其他模塊,action定義模塊的動作(函數)
function define(name,modules,action) {
//根據參數modules依賴的模塊名稱陪白,在moduleList中查找對應模塊颈走,生成對應模塊數組
modules.map((currentValue,index) => {
modules[index] = moduleList[currentValue]
})
//執(zhí)行動作,返回模塊拷泽。注意這里使用的是apply方法疫鹊,apply方法多個參數使用數組,如果action有多個參數數組會對應賦值司致。
moduleList[name] = action.apply(null,modules)
}
return {define}
})();
//定義一個模塊拆吆,假定該模塊返回一句話
//為什么使用執(zhí)行函數返回值暴露模塊對象,而不直接暴露對象脂矫?我想是因為如果存在變量枣耀,返回值暴露的對象,不能修改變量庭再,而直接暴露的對象可以修改這個值
module.define("m1",[],function () {
return {
//采用es6簡寫方法
say(){
return "執(zhí)行模塊方法返回的值"
}
}
})
//定義一個模塊依賴上面定義定m1模塊,action動作參數中需要指定模塊定名稱捞奕。如果依賴多個模塊,funtion中參數應該與依賴的模塊名稱一致
module.define("m2",["m1"],function (m1) {
let result = m1.say();
console.log(result);
})
</script>
</body>
</html>