目标:了解js模块构建原理。
参考视频:https://www.bilibili.com/video/av79663759?t=158&p=2
demo代码
下面代码中的module对象为模块构建工具。
原理:利用函数执行返回值暴露指定内容(这样不会暴露局部变量),构建一个对象保存模块。依赖时根据名称查找到对应模块,利用apply方法,将模块传递给所需的模块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 定义一个模块管理器,自执行方法返回定义函数
let module =(function () {
//定义一个模块容器,按模块名称存储
const moduleList = {}
//name定义模块的名称,modules所依赖的其他模块,action定义模块的动作(函数)
function define(name,modules,action) {
//根据参数modules依赖的模块名称,在moduleList中查找对应模块,生成对应模块数组
modules.map((currentValue,index) => {
modules[index] = moduleList[currentValue]
})
//执行动作,返回模块。注意这里使用的是apply方法,apply方法多个参数使用数组,如果action有多个参数数组会对应赋值。
moduleList[name] = action.apply(null,modules)
}
return {define}
})();
//定义一个模块,假定该模块返回一句话
//为什么使用执行函数返回值暴露模块对象,而不直接暴露对象?我想是因为如果存在变量,返回值暴露的对象,不能修改变量,而直接暴露的对象可以修改这个值
module.define("m1",[],function () {
return {
//采用es6简写方法
say(){
return "执行模块方法返回的值"
}
}
})
//定义一个模块依赖上面定义定m1模块,action动作参数中需要指定模块定名称。如果依赖多个模块,funtion中参数应该与依赖的模块名称一致
module.define("m2",["m1"],function (m1) {
let result = m1.say();
console.log(result);
})
</script>
</body>
</html>