当前位置：首页 > article >正文

想品客老师的第十一天：模块化开发

article 2025/2/5 6:58:01

模块化概念

模块化开发可以提高代码的可维护性、可读性和复用性，同时降低开发和调试的复杂性，把业务根据功能分开写，解决变量命名的冲突，可以开放部分接口给类（例如调用模块里的一个函数）也更适合团队协作

模块化的开发方式可以提供代码复用率，方便进行代码的管理。通常来说，一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。

开发一个模块管理工具

在这里我们自己写一个，可以更好的理解模块管理

实现模块的添加、定义、依赖，使用容器管理模块

其他想说的都在代码里了：

   let module = (function () {
            const moduleList = {}//存储模块
            function define(name, modules, action) {
                modules.map((m, i) => {
                    modules[i] = moduleList[m]
                })//map方法的参数，m是模块，i是编号,从容器里拿出来
                moduleList[name] = action.apply(null, modules)//在模块容器里放一个模块，初始化的时候会执行
                //console.log(moduleList)
            }
            return { define }
        })()//一个立即执行函数
        //module.define(name, modules, function (){})是在定义模块，name是模块的名字，modules表示依赖哪个模块，function表示模块的具体动作
        module.define('count', [], function () {//[]表示不依赖别的模块
            return {
                first(arr) {//返回第一个元素的功能
                    return arr[0]
                },
                max(arr, key) {//返回最大元素的功能
                    return arr.sort((a, b) => b[key] - a[key])[0]
                }
            }//return，导出
        })//count模块，对外输出了两个函数
        module.define('lesson', ['count'], function (result) {//['count']是在导入,result是count的结果
            let data = [
                { name: 'js', price: 199 }, { name: 'mysql', price: 78 }
            ]
            console.log(result.max(data, 'price'))//{name: 'js', price: 199}
        })


        //我是一条分割线，下面的是有模块依赖的使用
        module.define('User', [], function () {
            return {
                site: '我是初始值',
                url: '我是初始url'
            }
        })
        module.define('change', ['User'], function (User) {
            User.site = '初始值在change模块被改变了'
        })//模块的改变是全局的
        module.define('show', ['User'], function (User) {
            console.log('我是show模块', User)
        })