一步步实现Amd-loader(二)

通过上面的代码,我们对模块化有了一定的了解,下面从面向对象思想出发,对模块进行分析.

/**
 * 这是定义模块add
 */
var addModule = (function () {
  return function () {
    console.log("i'm add module ....");
  }
})();
/**
 * 这是定义模块minus
 */
var minusModule = (function () {
  return function () {
    console.log("I'm minu module....");
  }
})();
/**
* 这是计算模块,依赖模块add 和模块minus
* @type {[type]}
*/
var calcModule = (function (add,minus) {
  return {
    add: add,
    minus: minus
  }
})(addModule,minusModule);

我们通过上面的代码可以分析抽象建立我们的Module

Module = {
  id:"",//模块唯一标识
  deps: [],//模块依赖数组
  factory: function, //回调函数
  returnVal: {} //模块暴露返回值
}
/**
 * 模块缓存对象
 * @type {Object}
 */
moduleMap: {
  "scripts/main": {//-->Module
    id:"scripts/main",
    deps: ['./calc'],
    factory: function,
    returnVal: {} //返回值
  }
}

代码修改如下:

/**
 * 创建增加计算模块
 * @type {Module}
 */
  var addModule = new Module('add',[],function () {
    return function () {
      console.log("i'm new add module ....");
    }
  });
  moduleMap['add'] = addModule;
/**
 * 创建减少计算模块
 * @type {Module}
 */
  var addModule = new Module('minus',[],function () {
    return function () {
      console.log("I'm new minu module....");
    }
  });
  moduleMap['minus'] = addModule;

 var calcModule = new Module("calc",['add','minus'],function (add,minus) {
   return {
     add: add,
     minus: minus
   }
 });
 moduleMap['calc'] = calcModule;

需要为我们的Module对象添加两个方法: fireFactory(执行factory函数,赋值给returnVal)和getDepsValues(获取依赖模块的返回值)

Module.prototype.fireFactory = function () {
  var mod = this;
  // 获取依赖模块的exports列表
  var args = mod.getDepsValues();
  var ret = mod.factory.apply(null, args);
  mod.returnVal = ret;
  return mod.returnVal;
}

Module.prototype.getDepsValues = function () {
  var mod = this;
  var args = [];
  var deps = mod.deps;
  var dep;
  var argsLen = deps.length;
  for (var i = 0; i < argsLen; i++) {
      dep = getMod(deps[i]);//从缓存中获取模块
      args.push(dep.exec());//执行递归函数
  }
  return args;
}