自定义一个js模块构建工具

目标：了解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>

自定义一个js模块构建工具

demo代码

推荐阅读更多精彩内容