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

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

四、模块测试

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

你可能感兴趣的:(如何自定义模块与加载模块)