常用的Javascript设计模式小结(3)

//订阅者 var adultTv = Event(); adultTv .listen( ''play', function( data ){ alert ( "今天是谁的电影" + data.name ); }); //发布者 adultTv .trigger( ''play', { 'name': '麻生希' } )

四 适配器模式

去年年前当时正在开发dev.qplus.com, 有个存储应用分类id的js文件, 分类id的结构最开始设计的比较笨重. 于是我决定重构它. 我把它定义成一个json树的形式, 大概是这样:

var category = { music: { id: 1, children: [ , , , , ] } }

dev.qplus.com里大概有4,5个页面都调用这个category对象. 春节前我休了1个星期假. 过年来之后发现邮箱里有封邮件, 设计数据库的同学把category..js也重构了一份, 并且其他几个项目里都是用了这份category.js, 我拿过来一看就傻眼了, 和我之前定的数据结构完全不一样.

当然这是一个沟通上的反面例子. 但接下来的重点是我已经在N个文件里用到了之前我定的category.js. 而且惹上了一些复杂的相关逻辑. 怎么改掉我之前的代码呢. 全部重写肯定是不愿意. 所以现在适配器就派上用场了.

只需要把同事的category用一个函数转成跟我之前定义的一样.

my.category = adapterCategory ( afu.category );

适配器模式的作用很像一个转接口. 本来iphone的充电器是不能直接插在电脑机箱上的, 而通过一个usb转接口就可以了.

所以, 在程序里适配器模式也经常用来适配2个接口, 比如你现在正在用一个自定义的js库. 里面有个根据id获取节点的方法$id(). 有天你觉得jquery里的$实现得更酷, 但你又不想让你的工程师去学习新的库和语法. 那一个适配器就能让你完成这件事情.

$id = function( id ){ return jQuery( '#' + id )[0]; }

五 代理模式

代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作.

举一个例子, 我在追一个MM想给她送一束花,但是我因为我性格比较腼腆,所以我托付了MM的一个好朋友来送。

这个例子不是非常好, 至少我们没看出代理模式有什么大的用处,因为追MM更好的方式是送一台宝马。

再举个例子,假如我每天都得写工作日报( 其实没有这么惨 ). 我的日报最后会让总监审阅. 如果我们都直接把日报发给 总监 , 那可能 总监 就没法工作了. 所以通常的做法是把日报发给我的组长 , 组长把所有组员一周的日报都汇总后再发给总监 .

实际的编程中, 这种因为性能问题使用代理模式的机会是非常多的。比如频繁的访问dom节点, 频繁的请求远程资源. 可以把操作先存到一个缓冲区, 然后自己选择真正的触发时机.

再来个详细的例子,之前我写了一个街头霸王的游戏, 地址在

常用的Javascript设计模式小结

游戏中隆需要接受键盘的事件, 来完成相应动作.

于是我写了一个keyManage类. 其中在游戏主线程里监听keyManage的变化.

var keyMgr = keyManage(); keyMgr.listen( ''change', function( keyCode ){ console.log( keyCode ); });

图片里面隆正在放升龙拳, 升龙拳的操作是前下前+拳. 但是这个keyManage类只要发生键盘事件就会触发之前监听的change函数. 这意味着永远只能取得前,后,前,拳这样单独的按键事件,而无法得到一个按键组合。

好吧,我决定改写我的keyManage类, 让它也支持传递按键组合. 但是如果我以后写个html5版双截龙,意味着我每次都得改写keyManage. 我总是觉得, 这种函数应该可以抽象成一个更底层的方法, 让任何游戏都可以用上它.

所以最后的keyManage只负责映射键盘事件. 而隆接受到的动作是通过一个代理对象处理之后的.

var keyMgr = keyManage(); keyMgr.listen( ''change', proxy( function( keyCode ){ console.log( keyCode ); //前下前+拳 )} );

至于proxy里面怎么实现,完全可以自由发挥。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzwdf.html