js设计模式(3)---桥接模式
0.前言
看设计模式比较痛苦,一则是自己经验尚浅,不能体会到使用这些设计模式的益处;二则是不能很好把握使用这些设计模式的时机。所以这一部分看得断断续续,拖拖拉拉,为了了却这快心病,决定最近一口气看完几种常见的设计模式。今天就从桥接模式开始吧。
1.使用情况
最常用于事件监控上,也通过桥接联接多个类
1.1、事件监控
//错误的方式 //这个API根据事件监听器回调函数的工作机制,事件对象被作为参数传递给这个函数。本例中并没有使用这个参数,而只是从this对象获取ID。 addEvent(element,'click',getBeerById); function(e){ var id =this.id; asyncRequest('GET','beer.url?id='+ id,function(resp){ //Callback response console.log('Requested Beer: '+ resp.responseText); }); } //好的方式 //从逻辑上分析,把id传给getBeerById函数式合情理的,且回应结果总是通过一个毁掉函数返回。这么理解,我们现在做的是针对接口而不是实现进行编程,用桥梁模式把抽象隔离开来。 function getBeerById(id,callback){ asyncRequest('GET','beer.url?id='+ id,function(resp){ callback(resp.responseText) }); } addEvent(element,'click',getBeerByIdBridge); function getBeerByIdBridge(e){ getBeerById(this.id,function(beer){ console.log('Requested Beer: '+ beer); }); }
1.2、联接多个类
var Class1 = function(a,b,c){ this.a = a; this.b = b; this.c = c; } var Class2 = function(d){ this.d = d; } var BridgeClass = function(a,b,c,d){ this.one = new Class1(a,b,c); this.two = new Class2(d); } 这里使用桥接模式是为了让Class1、Class2能够独立于BridgeClass而发生改变。
2.桥接的利与弊
2.1利:弱化了代码之间的耦合,将抽象和其实现分离,便于二者独立变化、让API更加健壮,有利于分层,提高组件的模块化程度;提高可拓性。
2.3弊:增加开发成本,在性能方面可能会有所降低。
3.个人理解
1.桥接模式可以将抽象和其实现分离,方便他们独立变化;
2.主要应用情况是事件监听,将事件处理函数的抽象部分与实现部分分离,也就是抽像部分只是提供一个接口,具体的实现由桥接函数来实现;
3.好处:弱化了代码之间的耦合,有利于代码拓展
4.举例:
var forEach = function(arr,fn){ var result = []; for(var i=0;len= arr.length){ result.push(fn.call(this,i,arr[i])); } return result; } function deal(){
var arr = [1,2,3,4,5];
var b = forEach(arr,function(i,n){
return n*n;
})
}