javascript常见编程模式举例

标签：style   class   blog   c   code   java   

        最近买到手了一本《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);

	
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')

    这两个模式不同之处，可以从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);
	}
	
};//延迟定义的意义在于，如果用到就会初始化事件，不用就不会运行多余代码

    配置对象的模式，用于处理函数中有很多个参数和方法的问题。用对象来替代多个参数，即让这些参数都成为对象某一属性。优势在于：不用考虑参数的顺序、跳过某些参数设置、扩展性和可读性更强。

//配置对象
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));

    对象中私有函数对外不可见，私有函数公有化模式，用到了自执行函数的模式，返回一个对象，保有对自由函数可访问性。

//私有函数公有化与自执行函数
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
		};
	})();//通过返回对象属性保留对私有函数的访问权限
	    //此种方法也是用自执行函数的方法用法  

    链式调用模式，可以在单行中调用多个方法，就好像他们被链接在一起。思路是：在方法中返回this指针，这样就实现了链式调用。

//链式调用模式
	var obj=new MYAPP.dome.Element('span');
	obj.setText('hello,world').setStyle('color','red');
	//让setText()方法返回this就可以实现链式调用了

javascript常见编程模式举例,布布扣,bubuko.com

javascript常见编程模式举例

标签：style   class   blog   c   code   java   

原文地址：http://blog.csdn.net/yingyiledi/article/details/26813951