详解JavaScript设计模式开发中的桥接模式使用


Posted in Javascript onMay 18, 2016

桥接模式将抽象部分与实现部分分离开来,使两者都可以独立的变化,并且可以一起和谐地工作。抽象部分和实现部分都可以独立的变化而不会互相影响,降低了代码的耦合性,提高了代码的扩展性。
按照GoF的定义,桥接模式的作用在于“将抽象与其实现隔离开来,以便二者独立变化”。这种模式对于Javascript中常见的事件驱动的编程大有裨益。

桥接模式最常见和实际的应用场合之一是事件监听器回调函数。 example:事件监听器,把事件处理的语句封装到回调函数中,通过接口而不是实现进行编程。

基本理论

桥接模式定义:将抽象部分与它的实现部分分离,使它们都可以独立地变化。
桥接模式主要有4个角色组成:
(1)抽象类
(2)扩充抽象类
(3)实现类接口
(4)具体实现类
根据javascript语言的特点,我们将其简化成2个角色:
(1)扩充抽象类
(2)具体实现类
怎么去理解桥接模式呢?我们接下来举例说明

桥接模式的实现

理解桥接模式的思想,关键是要理解其分离抽象部分和实现部分的思想。我们举例进行说明

最简单的桥接模式

其实我们最经常用的jQuery的each函数就是一个典型的桥接模式,我们模拟其实现如下:

var each = function (arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    var val = arr[i];
    if (fn.call(val, i, val, arr)) {
      return false;
    }
  }
}
var arr = [1, 2, 3, 4];
each(arr, function (i, v) {
  arr[i] = v * 2;
})

在这个例子中,我们通过each函数循环了arr数组,别看这个例子很常见,但其中就包含了典型的桥接模式。
在这个例子中,抽象部分是each函数,也就是上面说的扩充抽象类,实现部分是fn,即具体实现类。抽象部分和实现部分可以独立的进行变化。这个例子虽然简单,但就是一个典型的桥接模式的应用。

插件开发中的桥接模式

桥接模式的一个适用场景是组件开发。我们平时开发组件为了适应不同场合,组件相应的会有许多不同维度的变化。桥接模式就可以应用于此,将其抽象与实现分离,使组件的扩展性更高。
假设我们要开发一个弹窗插件,弹窗有不同的类型:普通消息提醒,错误提醒,每一种提醒的展示方式还都不一样。这是一个典型的多维度变化的场景。首先我们定义两个类:普通消息弹窗和错误消息弹窗。

function MessageDialog(animation) {
  this.animation = animation;
}
MessageDialog.prototype.show = function () {
  this.animation.show();
}
function ErrorDialog(animation) {
  this.animation = animation;
}
ErrorDialog.prototype.show = function () {
  this.animation.show();
}

这两个类就是前面提到的抽象部分,也就是扩充抽象类,它们都包含一个成员animation。
两种弹窗通过show方法进行显示,但是显示的动画效果不同。我们定义两种显示的效果类如下:

function LinerAnimation() {
}
LinerAnimation.prototype.show = function () {
  console.log("it is liner");
}
function EaseAnimation() {
}
EaseAnimation.prototype.show = function () {
  console.log("it is ease");
}

这两个类就是具体实现类,它们实现具体的显示效果。那我们如何调用呢?

var message = new MessageDialog(new LinerAnimation());
message.show();
var error = new ErrorDialog(new EaseAnimation());
error.show();

如果我们要增加一种动画效果,可以再定义一种效果类,传入即可。

总结

学习桥接模式关键是要理解抽象部分与实现部分的分离,使得二者可以独立的变化,而不必拘泥于形式。JS插件灵活的变化,适用场景的多变就非常适合使用这种模式来实现。使用桥接模式最重要的是要找出系统中不同的变化维度。
(1)桥接模式优点:
把抽象与实现隔离开,有助于独立地管理软件的各组成部分。
(2)桥接模式缺点:
每使用一个桥接元素都要增加一次函数调用,这对应用程序的性能会有一些负面影响。提高了系统的复杂程度。如果一个桥接函数被用于连接两个函数,而其中某个函数根本不会在桥接函数之外被调用,那么此时这个桥接函数就不是非要不可的。
桥接模式“将抽象与实现隔离开来,以便二者独立变化”。它可以促进代码的模块化、促成更简洁的实现并提高抽象的灵活性。它可以用来把一组类和函数连接起来,而且提供了一种借助于特权函数访问私用数据的手段。

Javascript 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
javascript类型转换示例
Apr 29 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
jquery解析XML及获取XML节点名称的实现代码
May 18 #Javascript
Jquery跨域获得Json的简单实例
May 18 #Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 #Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 #Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 #Javascript
深入理解jquery跨域请求方法
May 18 #Javascript
判断是否存在子节点的实现代码
May 18 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
ThinkPHP控制器详解
2015/07/27 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
vue-cli之router基本使用方法详解
2017/10/17 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
存储过程的优点有哪些
2012/09/27 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
公司节能减排方案
2014/05/16 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
校园文明标语
2014/06/13 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
检讨书范文2000字
2015/01/28 职场文书
明星邀请函
2015/02/02 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书