如何自定义模块与加载模块

anglar 定义module的方式: anglar.module('my_module',[依赖])，由此引发框架中是如何定义模块，又是如何引用模块的呢？花了些时间研究下这个问题。

一、模块的由来

过去，我们经常在一个js文件里写好多函数，并在html文件里引入这个js文件，js文件引入后，函数暴露在全局变量windows下面，如果后引入的第二个js文件中有同名的函数，会将其覆盖，因此想到将js文件中的函数进行封装，并提供访问的接口。

二、如何自定义模块

由于变量的作用域范围是函数体，因此想到全部函数封装到一个函数体里面，为了方便记忆，将此函数体比作一个人，将定义模块比作如何描述一个人，依赖的模块比作家族中的人，使用模块比作如何找到一个人。

;(function(){
 var personArr = {}; //  用于存放定义的人
 var factory_temp = function(){ } //用于创建模块
  window.person = {
    define:function(name,families,factory){ // name:名字 families:家庭成员 factory:工厂函数
       if(!personArr[name]){ // 只存没有定义过的人
           var person = {
              name: name,
              families: families,
              factory: factory
           }
           personArr.push(person);
       },
    }
  }
})()

三、如何使用模块

contact:function(name){
    var args = [];
    var single = personArr[name];
    if(!single.entity){
        for(var i=0;i<single.families.length;i++){ // 找家族成员
            if(personArr[single.families[i]].entity){
               args.push(personArr[single.families[i]].entity)
            }else{
               args.push(this.contact(single.families[i]));
            }
        }
        single.factory.apply(factory_temp,args);
    }else{
        return single.entity;
    }
}

四、模块测试

person.define("lihua",[],function(){
   return 'speak'+'english';
});
person.define("zhangsan",["lihua"],function(lihua){
   var Single = function(sex){
   this.sex = sex;
}
Single.prototype.say = function(){
   console.log('zhangsan'+lihua);
}
   return Single;
})
var zhangsan = person.contact("zhangsan");
new zhangsan('male').say();

测试结果为：
zhangsanspeakenglish