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