美文网首页
现代的模块机制

现代的模块机制

作者: 樱木夜访流川枫 | 来源:发表于2018-05-21 22:38 被阅读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'
    

    相关文章

      网友评论

          本文标题:现代的模块机制

          本文链接:https://www.haomeiwen.com/subject/mthcjftx.html