现代的模块机制

2018-05-21  本文已影响0人  樱木夜访流川枫

概览

大多数模块依赖加载器/管理器本质上都是将模块定义封装进一个API

内容

模块依赖加载器/管理器的实现
var MyModules = (function Manager() {
  var modules = {};

  function define(name, deps, callback) {
    for(var i = 0; i < deps.length; i++) {
      deps[i] = modules[deps[i]];
    }
    
    modules[name] = callback.apply(callback, deps);
  }

  function get(name) {
    return modules[name];
  }

  return {
    get: get,
    define: define,
  };
})();

核心代码: module[name] = callback.apply(callback, deps);
在模式的定义中引入了包装函数,可以传入任何依赖,并且将返回值(模块的API),储存在一个根据名字来管理的模块列表中。

如何定义模块
// bar模块
MyModules.define('bar', [], function() {
  function hello(who) {
    return "Let me introduce: " + who;
  }

  return {
    hello: hello,
  };
})

// 依赖bar模块的foo模块
MyModules.define('foo', ['bar'], function(bar) {
  function helloUpper(who) {
    console.log(bar.hello(who).toUpperCase());
 }

  return {
    helloUpper: helloUpper,
  };
})

var bar = MyModules.get('bar');
bar.hello('Tom');  // 'Let me introduce: Tom'

var foo = MyModules.get('foo');
foo.helloUpper('Tom');  // 'LET ME INTRODUCE: TOM'
上一篇下一篇

猜你喜欢

热点阅读