手写模块化——简易版

207 阅读2分钟

天下需求,大的拆分,小的组装。

意思就是:对于一个大的需求(功能)可以将其分为几个步骤,或者说是拆分成几个小的功能模块,再将拆分后的小功能模块进行组装,完成最初的需求(功能)。

  • 有利于多人同时进行操作(干活),每个人只管某个特定的功能点即可。
  • 拆分后的小功能模块可以复用

希望可以这样使用:

module.define(name, modules, action)

说明:调用对象的一个方法,该方法用来定义一个模块,该方法接收三个参数,分别为:模块名称、依赖模块的列表、该模块的作用

const myModule = (function(){
  // 存储定义的模块
  let moduleList = {}
  // 定义一个模块
  // name:模块名称
  // modules:该模块所依赖的模块
  // action:该模块所执行的内容(所完成的功能)
  function define(name, modules, action){
    // 将所依赖的模块名称(字符串)变为模块的具体内容(所完成的功能),使用同一个数组
    // ['getFirst', 'getMax'] => [function getFirst(){}, function getMax(){}]
    modules.forEach((moduleName, moduleIndex) => {
      modules[moduleIndex] = moduleList[moduleName]
    })
    // 使用对象存储模块
    // {模块名称:模块功能, 模块名称:模块功能, ...}
    moduleList[name] = action.apply(null, modules)
  }
  // 返回一个对象,包含一个可以定义模块的方法
  return {define}
})()

// 定义模块
// 功能为:获取数组的第一项
myModule.define('getFirst', [], function(){
  return function first(arr){
    return arr[0]
  }
})

// 定义模块
// 功能为:根据某个属性获取数组中最大的一项
myModule.define('getMax', [], function(){
  return function getMax(arr, field){
    return arr.sort((a, b) => b[field] - a[field])[0]
  }
})

// 定义模块,依赖了两个模块,模块名称分别为:getFirst、getMax
myModule.define('lxx', ['getFirst', 'getMax'], function(getFirst, getMax){
  // 定义课程数据
  let lessons = [
    {
      name: 'html',
      price: 199,
    },
    {
      name: 'css',
      price: 299,
    },
    {
      name: 'js',
      price: 399,
    },
  ]
  // 获取第一门课程
  let firstLesson = getFirst(lessons)
  // 获取最贵的课程
  let expensiveLesson = getMax(lessons, 'price')
  console.log('第一个课程', firstLesson);
  console.log('最贵的课程', expensiveLesson);
})