去年年前当时正在开发 dev.qplus.com, 有个存储应用分类 id 的 js 文件, 分类 id 的结构最开始设计的比较笨重. 于是我决定重构它. 我把它定义成一个 json 树的形式, 大概是这样:
|
1 2 3 4 5 6 7 8 9 10 11 |
var category = { music: { id: 1, children: [ , , , , ] } } |
dev.qplus.com 里大概有 4，5 个页面都调用这个 category 对象. 春节前我休了 1 个星期假. 过年来之后发现邮箱里有封邮件, 设计数据库的同学把 category..js 也重构了一份, 并且其他几个项目里都是用了这份 category.js, 我拿过来一看就傻眼了, 和我之前定的数据结构完全不一样.
当然这是一个沟通上的反面例子. 但接下来的重点是我已经在 N 个文件里用到了之前我定的 category.js. 而且惹上了一些复杂的相关逻辑. 怎么改掉我之前的代码呢. 全部重写肯定是不愿意. 所以现在适配器就派上用场了.
只需要把同事的 category 用一个函数转成跟我之前定义的一样.
|
1 |
my.category = adapterCategory ( afu.category ); |
适配器模式的作用很像一个转接口. 本来 iphone 的充电器是不能直接插在电脑机箱上的, 而通过一个 usb 转接口就可以了.
所以, 在程序里适配器模式也经常用来适配 2 个接口, 比如你现在正在用一个自定义的 js 库. 里面有个根据 id 获取节点的方法 $id(). 有天你觉得 jquery 里的 $实现得更酷, 但你又不想让你的工程师去学习新的库和语法. 那一个适配器就能让你完成这件事情.
|
1 2 3 4 5 |
$id = function( id ){ return jQuery( '#' + id )[0]; } |
【Javascript设计模式3】-观察者模式 | Tencent AlloyTeam 2012 年 10 月 25 日
[…] 适配器模式 […]
【Javascript设计模式17】- 状态模式 | Tencent AlloyTeam 2012 年 10 月 25 日
[…] 适配器模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-adapter-mode… […]
【javascript设计模式1】-单例模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 适配器模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-adapter-mode… […]
【javascript设计模式9】-策略模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 适配器模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-adapter-mode… […]
【javascript设计模式7】-外观模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 适配器模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-adapter-mode… […]
【javascript设计模式2】-简单工厂模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 适配器模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-adapter-mode… […]