一个简单的AMD模块加载器

参考

https://github.com/JsAaron/NodeJs-Demo/tree/master/require

PS Aaron大大的比我的完整

PS

这不是一个通用的模块加载器， 实际上只是require define 函数的实现

所以每个模块的js都要引入到html文件中

如何防止变量冲突呢？

实际上就是用函数把他们包起来

(function(exp){

  var mod = {

    name:'modA'

  };

  exp[mod.name] = mod;

})(exp);

exp是一个全局变量 保存所有的模块 然后require一个模块的时候实际上就是去exp这个全局变量中找

AMD是如何使用模块的呢

//定义一个模块

define('a', function(){

  console.log('this is mod A');

  return {

    name: 'a'

  }

});

//调用一个模块

require('a',function(a){

  console.log(a.name)

})

require('a', function(a){

  console.log(a.name + ' 2 ');

})

Step1

var require; //两个全局量

var define;

(function() {

  var modules = {};

  require = function(id, callback) {

    if (!modules[id]) {

      throw "module " + id + " not found";

    }

    if (callback) {

      var module = build(modules[id]);

      callback(module)

      return module;

    }

  };

  define = function(id, factory) { //模块名,模块本身

    if (modules[id]) {

      throw "module " + id + " 模块已存在!";

    }

    modules[id] = {

      id: id,

      factory: factory

    };

  }

  //module {id: ''  factory: function(){...}}  //factory的function就是一个模块function中的内容

  function build(module) {

    var  factory = module.factory,

      id = module.id;

    module.exports = factory() || {};

    return module.exports; //模块return的结果

  }

})();

那么这样一来 上面require的执行结果是

this is mod A

a

a.js:2 this is mod A

a 2

模块确实是加载了 但是模块A执行了两次

Step2

那么凡是require过的模块 下次再次require 应该从保存的地方取出来而不是再次执行factory

需要一个全局变量 pushStack = {} 来保存

  function build(module) {

    var  factory = module.factory,

      id = module.id;

    if(pushStack[id]){

      return pushStack[id];

    }

    module.exports = factory() || {};

    pushStack[id] = module.exports;

    return module.exports; //模块return的结果

  }

Step3 require增加多依赖支持

有了多依赖支持就可以这样做

require(['a', 'b'], function(a,b){

  console.log(a.name);

  console.log(b.name);

});

改造require就可以了

  require = function(id, callback) {

    if(Object.prototype.toString.call(id) == '[object Array]'){

      var ids = id, allMod = {};

      ids.forEach(function(id){

        allMod[id] = build(modules[id]);

      });

      callback.apply(null, allMod);

    }else{

      if (!modules[id]) {

        throw "module " + id + " not found";

      }

      if (callback) {

        var module = build(modules[id]);

        callback(module)

        return module;

      }

    }

  };

Step4

有时候模块本身存在依赖 比如

define('c',['a','b'],function(a,b){

});

那么define的时候就要对参数做判断 如果是三个参数表示是有依赖的模块

var require; //两个全局量

var define;

(function() {

  var modules = {},pushStack = {};

  //require的时候才是真的执行模块

  require = function(id, callback) {

    if(Object.prototype.toString.call(id) == '[object Array]'){

      var ids = id, allMods = [];

      ids.forEach(function(id){

        allMods.push(build(modules[id]));

      });

      callback.apply(null, allMods);

    }else{

      if (!modules[id]) {

        throw "module " + id + " not found";

      }

      if (callback) {

        var module = build(modules[id]);

        callback(module)

        return module;

      }

    }

  };

  //define的时候是把模块存放起来  存到modules[]中

  //define的参数 若是2个 那么是 模块名，模块本身， 若有三个参数 则是 模块名,依赖列表,模块本身

  define = function(id) {

    var deps, factory;

    if (modules[id]) {

      throw "module " + id + " 模块已存在!";

    }

    if(arguments.length > 2){

      deps = arguments[1];

      factory = arguments[2];

      modules[id] = {

        id: id,

        deps: deps,

        factory: factory

      };

    }else{

      factory = arguments[1];

      modules[id] = {

        id: id,

        factory: factory

      };

    }

  }

  function build(module) {

    var  factory = module.factory,

      id = module.id;

    if(pushStack[id]){

      return pushStack[id];

    }

    if(module.deps){

      var deps = [];

      module.deps.forEach(function(id){

        deps.push(build(modules[id]));

      });

      module.exports = factory.apply(null,deps);

    }else{

      module.exports = factory() || {};

    }

    pushStack[id] = module.exports;

    return module.exports; //模块return的结果

  }

})();

如何加入CMD支持

完成上面，就可以通过下面的方式定义模块

define('a',function(){

});

define('c',['a','b'],function(a,b){

});

require('a','b',function(a,b){}})

在Seajs中CMD类似于这样

define('c', function(require, exports, module) {

    var a = require('a')

    var b = require('b');

});

实际上就是改造require (require的时候才是执行模块的定义函数)

require原本都是接受2个参数 依赖名以及一个函数 现在require可以只接受一个参数

var require; //两个全局量

var define;

(function() {

  var modules = {},pushStack = {};

  //require的时候才是真的执行模块

  require = function(id, callback) {

    if(Object.prototype.toString.call(id) == '[object Array]'){

      var ids = id, allMods = [];

      ids.forEach(function(id){

        allMods.push(build(modules[id]));

      });

      callback.apply(null, allMods);

    }else{

      if (!modules[id]) {

        throw "module " + id + " not found";

      }

      if (callback) {

        var module = build(modules[id]);

        callback(module);

        return module;

      }else{

        return build(modules[id]);

      }

    }

  };

  //define的时候是把模块存放起来  存到modules[]中

  //define的参数 若是2个 那么是 模块名，模块本身， 若有三个参数 则是 模块名,依赖列表,模块本身

  define = function(id) {

    var deps, factory;

    if (modules[id]) {

      throw "module " + id + " 模块已存在!";

    }

    if(arguments.length > 2){

      deps = arguments[1];

      factory = arguments[2];

      modules[id] = {

        id: id,

        deps: deps,

        factory: factory

      };

    }else{

      factory = arguments[1];

      modules[id] = {

        id: id,

        factory: factory

      };

    }

  }

  function build(module) {

    var  factory = module.factory,

      id = module.id;

    if(pushStack[id]){

      return pushStack[id];

    }

    if(module.deps){

      var deps = [];

      module.deps.forEach(function(id){

        deps.push(build(modules[id]));

      });

      module.exports = factory.apply(module,deps);

    }else{

      module.exports = factory(require, module.exports, module) || {};

    }

    pushStack[id] = module.exports;

    return module.exports; //模块return的结果

  }

})();

之后就可以这样通过CMD的方式引入模块了

define('c', function(require, exports, module) {

    var a = require('a');

    var b = require('b');

    return {

      name: 'c' + a.name + b.name

    }

});