我们一起来读书吧 关注:154贴子:2,754
  • 1回复贴,共1

js 设计模式31-33章

只看楼主收藏回复

简单模版模式:简单模板模式通常用于创建字符串模板,这种模式允许你将变量插入到字符串中,使创建视图更加灵活高效。简单来说就是对于某一类模版相同数据不同的这种视图层,模版是有多个的,解决视图的重复创建,而是用数据去格式化字符串,来动态渲染视图,相对于dom操作来创建视图,更高效,更简洁,性能也更高。这种模式主要包括三个部分:字符串模版库、用正则的方式去格式化字符串、字符串拼接操作。
模板渲染方法:
function formatString2(str, data) { return str.replace(/\{#(\w+)#\}/g, function (match, key) { return typeof data[key] !== 'undefined' ? data[key] : ''; })}
惰性模式:减少每次代码执行时的重复性的分支判断,通过对对象重定义来屏蔽原对象中的分支判断。本质:在第一次执行后就重新定义它。实现有两种方式:第一种是文件加载后立即执行对象方法来重定义对象。第二种是当第一次使用方法对象时重定义对象。
文中列举了针对不同浏览器的事件注册方法
:var 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文件加载时通过闭包执行对方法进行重新定义,在页面加载时会消耗一定的资源。
var 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; } }}();
第一次执行函数时在函数内部对其进行显示重写,最后调用重写后的方法完成第一次方法调用。
var AddEvent = function(dom, type, fn){ if(dom.addEventListener){ AddEvent = function(dom, type, fn){ dom.addEventListener(type, fn, false); } }else if(dom.attachEvent){ AddEvent = function(dom, type, fn){ dom.attachEvent('on'+type, fn); } }else{ AddEvent = function(dom, type, fn){ dom['on'+type] = fn; } } AddEvent(dom, type, fn);};
与加载即执行不同的是,JS文件加载完成后,惰性执行的函数还没有被重新定义,当函数被首次调用时才会被重定义。这两种惰性方式都避免了冗余的分支判断。
参与者模式:在特定的作用域中执行给定的函数,并将参数原封不动地传递。通过函数绑定和函数柯里化来实现,函数绑定,将函数以指针的形式传递,使函数在被绑定的对象作用域中执行,因此函数在执行中可以顺利地访问到对象内部的数据。对于函数柯里化即是将接受多个参数的函数转化为接受一部分参数的新函数,余下的参数保存 下来,当函数调用时,返回传入的参数与保存的参数共同执行的结果。


IP属地:北京1楼2024-05-28 09:56回复
    没有格式了,不太好阅读


    IP属地:北京来自iPhone客户端2楼2024-05-28 16:15
    回复