javascript设计模式-桥接模式
2015-01-15 19:11
831 查看
在系统中,某些类由于自身逻辑,具有两个或两个以上维度的变化,如何使得该类型可以沿多个方向变化,但又不引入额外的复杂度,这就是桥接模式要解决的问题。
定义:桥接模式(Bridge),将抽象部分与它的实现部分分离,使他们可以独立的变化。
意图:将抽象与实现解耦。
对于前端,比较常用的场景,是事件监控:
但是上面代码有一个问题,就是getDrinkById必须有上下文,才能取得id,因为使用了this.id来取id.然后接着实现下面的逻辑,耦合过紧密。需要拆分:
从逻辑上分析,把id传给getDrinkById函数式合情理的,且响应结果总是通过一个回调函数返回。现在做的是针对接口而不是实现进行编程,用桥接模式把抽象隔离开来。
这样,明显代码模块话,各个部分代码功能明确,耦合性大大降低,将监听器方法抽取出来,成为一个单独的API函数,而且保证该API函数与节点本身没有必然的耦合,就可以独立的运行getDrinkById这个函数。
桥接模式,就是把给抽象与现实对象搭一座桥,让对象方法即联系在一起,又是独立变化的,让代码耦合性降低的一种设计模式。
定义:桥接模式(Bridge),将抽象部分与它的实现部分分离,使他们可以独立的变化。
意图:将抽象与实现解耦。
对于前端,比较常用的场景,是事件监控:
addEvent(element, 'click', getDrinkById); function getDrinkById(e) { var id = this.id; asyncRequest('GET', 'drink.uri?id=' + id, function(resp) { // callback response console.log('Requested drink:' + resp.responseText); }); }
但是上面代码有一个问题,就是getDrinkById必须有上下文,才能取得id,因为使用了this.id来取id.然后接着实现下面的逻辑,耦合过紧密。需要拆分:
function getDrinkById(id,callback) { asyncRequest('GET', 'drink.uri?id=' + id, function(resp) { // callback response callback(resp.responseText); }); } addEvent(element,'click',getDrinkByIdBridge); function getDrinkByIdBridge(e){ getDrinkById(this.id,function(drink){ console.log('Requested drink: '+ drink); }); }
从逻辑上分析,把id传给getDrinkById函数式合情理的,且响应结果总是通过一个回调函数返回。现在做的是针对接口而不是实现进行编程,用桥接模式把抽象隔离开来。
这样,明显代码模块话,各个部分代码功能明确,耦合性大大降低,将监听器方法抽取出来,成为一个单独的API函数,而且保证该API函数与节点本身没有必然的耦合,就可以独立的运行getDrinkById这个函数。
桥接模式,就是把给抽象与现实对象搭一座桥,让对象方法即联系在一起,又是独立变化的,让代码耦合性降低的一种设计模式。
相关文章推荐
- JavaScript设计模式之桥接模式与IE下事件函数的this指向与执行顺序
- 《javascript设计模式》笔记之第八章:桥接模式
- 初学javascript设计模式(二)桥接模式第二遍遍阅读
- Javascript设计模式理论与实战:桥接模式
- javaScript设计模式系列(五) 桥接模式
- 7-JavaScript设计模式——桥接模式
- 【读书笔记】读《JavaScript设计模式》之桥接模式
- JavaScript设计模式--桥接模式
- JavaScript设计模式之桥接模式--bridge
- JavaScript面试系列:JavaScript设计模式之桥接模式和懒加载
- javascript设计模式-桥接模式
- 详解JavaScript设计模式开发中的桥接模式使用
- 详解JavaScript设计模式开发中的桥接模式使用
- javascript设计模式-桥接模式(5)
- 设计模式(一)[桥接(Bridge)模式]
- 桥接模式(Bridge Pattern)
- Bridge桥接(结构型模式)
- 在asp.net中关于桥接模式的一个应用
- 23种经典设计模式的java实现_3_桥接模式
- 设计模式之Bridge桥接设计模式