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;
})
}

js设计模式(3)---桥接模式的更多相关文章

  1. JS设计模式——8.桥接模式

    桥接模式的用途 在实现API的时候,桥接模式非常有用. 在设计一个JavaScript API的时候,可以用这个模式来弱化它与使用它的类和对象之间的耦合. 示例:事件监听器 桥接模式最常见和实际的应用 ...

  2. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  3. 乐在其中设计模式(C#) - 桥接模式(Bridge Pattern)

    原文:乐在其中设计模式(C#) - 桥接模式(Bridge Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 桥接模式(Bridge Pattern) 作者:webabcd 介绍 ...

  4. java面试题之----jdbc中使用的设计模式(桥接模式)

    1.JDBC(JavaDatabase Connectivity) JDBC是以统一方式访问数据库的API. 它提供了独立于平台的数据库访问,也就是说,有了JDBC API,我们就不必为访问Oracl ...

  5. php设计模式之桥接模式

    php设计模式之桥接模式 一.概述 桥接模式:将两个原本不相关的类结合在一起,然后利用两个类中的方法和属性,输出一份新的结果. 其实就是讲不相关的东西通过类(本例中是SendInfo)结合在一起,从而 ...

  6. js设计模式——7.备忘录模式

    js设计模式——7.备忘录模式 /*js设计模式——备忘录模式*/ // 备忘类 class Memento { constructor(content) { this.content = conte ...

  7. js设计模式——6.模板方法模式与职责链模式

    js设计模式——6.模板方法模式与职责链模式 职责链模式

  8. js设计模式——5.状态模式

    js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...

  9. js设计模式——4.迭代器模式

    js设计模式——4.迭代器模式 代码演示 /*js设计模式——迭代器模式*/ class Iterator { constructor(container) { this.list = contain ...

随机推荐

  1. ubuntu thrift 0.9.3编译安装

    Table of Contents 1. 下载thrift源代码 2. 编译并安装 3. 运行测试程序 4. 安装 1 下载thrift源代码 git clone https://git-wip-us ...

  2. 如果是除去末尾特定字符或字符串:TrimEnd方法性能优于Remove方法

    测试用例--除去末尾特定字符或字符串,Remove方法和TrimEnd方法的比较 结论: 如果是除去末尾特定字符或字符串:TrimEnd方法性能优于Remove方法 具体测试用例如下: Stopwat ...

  3. HTML与Servlet

    1.什么是servlet Servlet 是在服务器上运行的小程序.一个 Servlet 就是 Java 编程语言中的一个类,它被用来扩展服务器的性能,服务器上驻留着可以通过“请求-响应”编程模型来访 ...

  4. C#三大支柱之继承

    1.使用base 若子类需要使用父类公开或受保护的成员则需要是base class Manager : Employee { public int StockOptions { get; set; } ...

  5. (转)Android学习笔记③——常用快捷键

    常用快捷键 代码跳转 描述:跳转是为了方便代码位置的定位,存在两种跳转:在定义处可以跳转到调用处,在调用处可以跳转到定义处. 快捷键:Cmd + 鼠标单击 方法间跳转 描述:从一个类方法跳转到临近的一 ...

  6. IOS开发之上传APP

    IOS开发最终都会上传APP,但是当我们做好一个项目后.在上传AppStore上的时候往往会被各种原因打回来.让人蛋疼无比. 于是总结了比较容易出现项目被打回容易出现的原因 1.程序崩溃会被打回 这个 ...

  7. C++复习笔记

    好多东西都忘了,现在重新复习一遍,把遇到的要点都记录下来.随时更新. 指针 C保证在为数组分配存储空间的时候,指向数组之后的第一个位置的指针也是合法的.也就是说保证指针 a + SIZE 是合法的,但 ...

  8. freeCodeCamp:Diff Two Arrays

    比较两个数组,然后返回一个新数组,该数组的元素为两个给定数组中所有独有的数组元素.换言之,返回两个数组的差异. function diff(arr1, arr2) { var newArr = []; ...

  9. Android文字转语音

    虽然视觉上的反馈通常是给用户提供信息最快的方式,但这要求用户把注意力设备上.当用户不能查看设备时,则需要一些其他通信的方法.Android提供了强大的文字转语音Text-to-Speech,TTS A ...

  10. Hibernate总结--MyEclipse的小bug

    今天笔者在写一个用S2SH的程序的时候,出现了下面的错误: org.springframework.beans.factory.BeanCreationException: Error creatin ...