首页 > 代码库 > javascript常见编程模式举例

javascript常见编程模式举例

        最近买到手了一本《javascript框架设计》,详细介绍开发js框架所用到的知识。初读一点,乐帝脆弱的理论修养就暴露无遗了,所以专门加强理论修养,重看javascript编程模式的举例。下面来介绍下js中,常见的编程模式。

   1.命名空间

   同其他高级语言一样,js中的命名空间概念,也是为了减少命名冲突,但js没有命名空间关键字。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);


    namespace函数,用于定义命名空间。

	
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=http://www.mamicode.com/text;>
     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就可以实现链式调用了