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

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

news 2025/7/7 6:59:07

模块化概念

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

模块化的开发方式可以提供代码复用率，方便进行代码的管理。通常来说，一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的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)})