首页 > 代码库 > js设计模式总结4
js设计模式总结4
链模式
链模式:通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用,从而简化多次调用该对象多个方法时的对该对象的多次引用。
具体不多说;主要是方法最后return this;
委托模式
委托模式:多个对象接受并处理同一请求,他们将请求委托给另一个对象同一处理请求。
比如所说的事件绑定,没必要将事件绑定在具体的元素上,可以将其绑定在父元素上,可以起到对页面的优化,比如减少绑定次数,对页面起到优化作用。
此外还可以处理一些内存外泄问题的存在。
举例子:比如当我们为某一具体元素绑定事件,其效果是该元素从页面中移除,但是其绑定的事件没有清除,会泄漏到内存中去。有一种方法是将元素的引用设置为null,但是这对标准浏览器来说是不需要的,他们采用的是标记清除的方式管理内存的。所以更好地办法是采用委托模式,通过判断事件的目标id来实现事件的响应。这样,即使目标元素被清除了,也不会引起泄漏。
委托模式解决了请求与委托者之间的耦合。通过被委托者对接收到的请求的处理后,分法给相应的委托者去处理。
数据访问对象模式
数据访问对象模式:抽象和封装对数据源的访问和存储,DAO通过对数据源链接的管理方便对数据的访问和存储。
具体看书,不好描述。注意点:我们再划分本地存储的时候,为了与其他的存储进行区分,需要添加特定的前缀来进行区分。
节流模式
节流模式:对重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作,以提高性能。
举例子:比如scroll事件,一进一出事件,图片较多的页面等等,都可以在采用节流模式进行优化。
以下是一个节流器:
var throttle=function(){ //获取第一个参数 var isClear=arguments[0],fn; //如果第一个参数是boolean类型那么第一个参数则表示是否清除计时器 if(typeof isClear ===="boolean"){ //第二个参数为函数 fn=arguments[1]; fn._throttleID && clearTimeout(fn._throttleID); //通过计时器延迟函数的执行 }else{ //第一个参数为函数 fn=isClear; //第二个参数为函数执行时的参数 param=arguments[1]; var p={ context:null, args:[], time;300 } arguments.callee(true,fn);//清除计时器 fn._throttleID=setTimeout(function(){ //执行函数 fn.apply(p.context,p.args) },p.time) }}
其主要思想是:刚开始不管之前存不存在定时器,先清除一遍,然后再绑定计时器。如果时间一直在响应,就会一直清除,绑定,事件永远得不到响应。只有当你暂停,并超过一定的时间,才会执行响应函数。
对于图片的延迟加载,主要思想如下:判断图片的位置,决定是否加载,当停留在某处不动的时候,而此时可视区的图片也已经加载成功的话,就开始从头加载那些没有加载的。要达到这个目的,要求我们不能一开始就把img的src属性给定,而是通过从data-src中获取。
简单模板模式
简单模板模式:通过格式化字符串拼凑出视图避免创建视图时大量节点操作。优化内存开销。
好处:解决采用DOM操作创建视图时造成资源消耗大、性能低下、操作复杂等问题。用正则匹配方式去格式化字符串的执行的性能要高于DOM操作拼接的视图,并且这种方法被用于大型框架(如MVC等)创建视图操作中。
惰性模式
惰性模式:减少每次代码执行时重复性分支判断,通过对对象重新定义来屏蔽对原对象中的分支判断。
有两种表现形式:1是立即执行函数;2是在用的的时候再来抉择
//第一种方式A.on=function(dom,type,fn){ if(document.addEventListener){ return function(dom,type,fn){ dom.addEventListener(type,fn,false); } }else if(....){ return function(dom,type,fn){} }else{ return function(dom,type,fn){ dom["on"+type]=fn; } }}();//第二种方式A.on=function(dom,type,fn){ if(document.addEventListener){ A.on=function(dom,type,fn){ dom.addEventListener(type,fn,false); } }else if(.....){ A.on=function(dom,type,fn){} }else{ A.on=function(dom,type,fn){ dom["on"+type]=fn; } } A.on(dom,type,fn);};
第一种会占用一些资源;第二种由于在第一次使用的时候会冲重新定义对象,以致第一次执行时间增加。
参与者模式
参与者模式:在特定的作用域中执行给定的函数,并将参数原封不动地传递。
具体看书。
参与者模式实际上是两种技术的结晶,函数绑定和函数柯里化。早期的浏览中并未提供bind方法,因此聪明的工程师们为了使添加的事件能够移除,事件回调函数中能够访问到事件源,并且可以向事件回调函数中传入自定义数据,才发明了函数绑定与柯里化技术。
等待者模式
等待者模式:通过对多个异步进程监听,来触发未来发生的动作。
js设计模式总结4