首页 > 代码库 > 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);
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就可以实现链式调用了
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。