近期买到手了一本《javascript框架设计》,具体介绍开发js框架所用到的知识。初读一点,乐帝脆弱的理论修养就暴露无遗了,所以专门加强理论修养,重看javascript编程模式的举例。以下来介绍下js中,常见的编程模式。
1.命名空间
同其它高级语言一样,js中的命名空间概念,也是为了降低命名冲突,但js没有命名空间keyword。js实现命名空间的思路是定义一个全局变量,将此命名空间的变量和方法,定义为这个全局变量的属性。
var MYAPP=MYAPP||{};//全局变量
MYAPP.dom={};//全局变量下的对象
MYAPP.dom.Element=function(type,prop){
var tmp=document.createElement(type);
for(var i in prop)
{
tmp.setAttribute(i,prop[i]);
}
return tmp;
}
MYAPP.dom.Text=function(txt){
return document.createTextNode(txt);
}//两个全局变量下对象的方法,这样写降低了全局变量的使用,降低了命名冲突,达到了命名空间的效果
var e11=new MYAPP.dom.Element("a",{href:"www.baidu.com"});
var e12=new MYAPP.dom.Text('click me');
e11.appendChild(e12);
document.body.appendChild(e11);
var MYAPP={};
MYAPP.namespace=function(name){
var parts=name.split('.');
current=MYAPP;
for(var i in parts)
{
if(!current[parts[i]])
{
current[parts[i]]={};//依次对属性设置成对象
}
curent=current[parts[i]];//并将每一个对象都添为链式的前一个对象的属性
}
return current;
}
MYAPP.namespace('dom.style')
2.初始化分支和延迟定义模式
这两个模式不同之处,能够从js框架设计角度考虑。构造一个框架,有些模块必须初始化的,比方jquery的$符号,另外一些仅仅有被调用到才须要初始化操作。这种优点在于,保证了框架的可用性和载入效率上的最优化。
初始化模式:
/初始化分支
var MYAPP={};
MYAPP.event={
addListener:null,
removeListener:null
};
if(typeof window.addEventListener==='function'){
MYAPP.event.addListener=function(e1,type,fn){
e1.addEventListener(type,fn,false);
};
MYAPP.event.removeListener=function(e1,type,fn){
e1.removeEventListener(type,fn,false);
};
}else if(typeof document.attachEvent==='function'){
MYAPP.event.addListener=function(e1,type,fn){
e1.attachEvent('on'+type,fn);
};
MYAPP.event.removeListener=function(e1,type,fn){
e1.deleteEvent('on'+type,fn);
};
}else{
MYAPP.event.addListener=function(e1,type,fn){
e1['on'+type]=fn;
};
MYAPP.event.removeListener=function(e1,type,fn){
e1['on'+type]=null;
};
}//载入脚本时运行分支,在模块初始化过程中就将部分代码进行处理,有利于提高效率
延迟定义模式:
//延迟定义 相对于初始化分支,延迟定义模式中,某些函数可能永远不会被调用
//延迟模式会使初始化过程更轻量
var MYAPP={};
MYAPP.event={
addListener:function(e1,type,fn){
if(typeof e1.addEventListener==='function'){
MYAPP.event.addListener=function(e1,type,fn){
e1.addEventListener(type,fn,false);
};
}else if(typeof e1.attachEvent==='function'){
MYAPP.event.addListener=function(e1,type,fn){
e1.attachEvent('on'+type,fn);
};
}else{
MYAPP.event.addListener=function(e1,type,fn){
e1['on'+type]=fn;
};
}
MYAPP.event.addListener(e1,type,fn);
}
};//延迟定义的意义在于,假设用到就会初始化事件,不用就不会执行多余代码
3.配置对象的模式
配置对象的模式,用于处理函数中有非常多个參数和方法的问题。用对象来替代多个參数,即让这些參数都成为对象某一属性。优势在于:不用考虑參数的顺序、跳过某些參数设置、扩展性和可读性更强。
//配置对象
var MYAPP={};
MYAPP.dom={};
MYAPP.dom.Button=function(text,conf){//用配置对象作为函数參数,有利于解决函数參数顺序问题,而且能够跳过一些參数
var b=document.createElement('input');
b.type=config.type||'submit';
b.value=text;
b.font=conf.font||'Verdana';
return b;
}
var config={
font:'Arial,Verdana,sanf-serif',
color:'white'
}//配置对象,可读性好,扩展性好,可依据须要随时改动配置对象
document.body.appendChild(new MYAPP.dom.Button('puuush',config));
4.私有函数公有化与自运行函数模式
对象中私有函数对外不可见,私有函数公有化模式,用到了自运行函数的模式,返回一个对象,保有对自由函数可訪问性。
//私有函数公有化与自运行函数
var MYAPP={};
MYAPP.dom=(function(){
var _setStyle=function(e1,prop,value){
console.log('setSTyle');
};
var _getStyle=function(e1,prop){
console.log('getStyle');
};
return{
setStyle:_setStyle,
getStyle:_getStyle,
yetAnther:_setStyle
};
})();//通过返回对象属性保留对私有函数的訪问权限
//此种方法也是用自运行函数的方法使用方法
5.链式调用模式
链式调用模式,能够在单行中调用多个方法,就好像他们被链接在一起。思路是:在方法中返回this指针,这样就实现了链式调用。
//链式调用模式
var obj=new MYAPP.dome.Element('span');
obj.setText('hello,world').setStyle('color','red');
//让setText()方法返回this就能够实现链式调用了