浅谈现有模块加载器的定义、加载机制

现有大多数模块依赖加载器的机制简化后大致就像下面这样:

let MyModules = (function Manager () {
  // 用于存储定义的模块
  let modules = {}

  // 定义模块方法
  function define (name, deps, impl) {
    let moduleDeps = []
    for (let i=0; i<deps.length; i++) {
      // 如果模块有依赖则先处理依赖,并将处理结果当做参数用于下面的 apply 中
      moduleDeps[i] = modules[deps[i]]
    }
    // 将定义的模块存储到 modules 中
    modules[name] = impl.apply(impl, moduleDeps)
  }

  // 引入模块方法
  function require (name) {
    return modules[name]
  }
  return {
    define,
    require
  }
})()

上面的代码用一个 IIFE(立即执行函数)将内部的 define 和 require 方法 return 出去,形成一个闭包,其中 define 方法的三个参数分别代表模块名、依赖项、回调

下面展示一下如何使用它来定义模块:

首先定义一个无依赖的模块 bar

MyModules.define( "bar", [], function () {
  function hello (who) {
    return "Let me introduce: " + who
  }
  return {
    hello
  }
})

然后再定义一个依赖 bar 的模块 foo

MyModules.define( "foo", ["bar"], function (bar) {
  let hungry = "hippo"
  function awesome () {
    console.log(bar.hello(hungry).toUpperCase())
  }
  return {
    awesome
  }
})

打印一下看看结果

let bar = MyModules.require( "bar" )
let foo = MyModules.require( "foo" )
console.log(bar.hello( "hippo" )) // Let me introduce: hippo
foo.awesome() // LET ME INTRODUCE: HIPPO

结语:ES6 在语言层面支持了模块系统,相信以后开发过程中会更多的使用 ES6 中的模块机制,上文的模块机制了解了解即可

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1073.html
京ICP备19044523号-1