首页 > 代码库 > 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