# 惰性模式 惰性模式就是在某种外界环境一定的情况下,减少代码的对环境的重复分支判断,以此提升代码执行性能。惰性模式模式不属于一般定义的`23`种设计模式的范畴,而通常将其看作广义上的技巧型设计模式。 ## 概述 惰性模式就是通过对对象重新定义来屏蔽原对象中的分支判断,而我们的实现思路也非常简单,既然某种外界环境是确定的,后续不需要再去判断,那么只要将环境判断完成之后,重定义这个方法即可,只返回特定分支下的代码逻辑。 惰性模式的应用场景非常广泛,特别是当今浏览器种类繁多的现象,很多功能在不同浏览器中实现不一,为了兼容不同的浏览器,代码中往往会有许多对不同浏览器的分支判断,比如事件处理、`XMLHttpRequest`对象创建等,造成代码臃肿冗余,惰性模式正好可以解决这种问题,提高代码执行效率。 对于以上的需求,我们有两种改进方式: * 针对不同情况,返回不同策略,加载耗时,但是调用不耗时。 * 针对同情况显性定义,然后执行,首次加载不耗性能,首次调用占性能。 ## 实现 通过针对不同浏览器的事件注册方法,提供惰性模式的两种实现方式。 ```javascript const event = {}; event.addEvent = function(dom, type, fn) { if(dom.addEventListener) dom.addEventListener(type, fn, false); else if(dom.attachEvent) dom.attachEvent("on" + type, fn); else dom["on" + type] = fn; } ``` ### 加载即执行 `JavaScript`文件加载时通过闭包执行对方法进行重新定义,在页面加载时会消耗一定的资源。 ```javascript const event = {}; event.addEvent = function(dom, type, fn) { if(dom.addEventListener) { return function(dom, type, fn) { dom.addEventListener(type, fn, false); } }else if(dom.attachEvent) { return function(dom, type, fn) { dom.attachEvent("on" + type, fn); } }else{ return function(dom, type, fn) { dom["on" + type] = fn; } } }(); ``` ### 惰性执行 第一次执行函数时在函数内部对其进行显示重写,最后调用重写后的方法完成第一次方法调用。与加载即执行不同的是,`Js`文件加载完成后,惰性执行的函数还没有被重新定义,当函数被首次调用时才会被重定义,这两种惰性方式都避免了冗余的分支判断。 ```javascript const event = {}; event.addEvent = function(dom, type, fn) { if(dom.addEventListener) { event.addEvent = function(dom, type, fn) { dom.addEventListener(type, fn, false); } }else if(dom.attachEvent) { event.addEvent = function(dom, type, fn) { dom.attachEvent("on" + type, fn); } }else{ event.addEvent = function(dom, type, fn) { dom["on" + type] = fn; } } event.addEvent(dom, type, fn); }; ``` ## 每日一题 ``` https://github.com/WindrunnerMax/EveryDay ``` ## 参考 ``` https://www.jianshu.com/p/9a7be94a3ea7 http://www.zyiz.net/tech/detail-149381.html https://www.yuque.com/robinson/design-patterns/oc8o8l ```