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

 更新时间:2016年05月18日 10:25:17   作者:狼狼的蓝胖子  
桥接模式的适用场合非常广泛,除了在事件回调函数与接口之间进行桥接外,桥接模式也可以用于连接公开的API代码和私用的实现代码,下面我们就来详解JavaScript设计模式开发中的桥接模式使用

桥接模式将抽象部分与实现部分分离开来,使两者都可以独立的变化,并且可以一起和谐地工作。抽象部分和实现部分都可以独立的变化而不会互相影响,降低了代码的耦合性,提高了代码的扩展性。
按照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的正则表达式中test()方法的使用

    简述JavaScript的正则表达式中test()方法的使用

    这篇文章主要介绍了简述JavaScript的正则表达式中test()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 详解JavaScript高级正则表达式

    详解JavaScript高级正则表达式

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • JavaScript中的函数嵌套使用

    JavaScript中的函数嵌套使用

    这篇文章主要介绍了JavaScript中的函数嵌套使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript展开操作符(Spread operator)详解

    JavaScript展开操作符(Spread operator)详解

    在本篇文章里小编给大家整理的是关于JavaScript展开操作符(Spread operator)的详细介绍以及用法,需要的读者们参考下。
    2019-07-07
  • javascript中的原型链深入理解

    javascript中的原型链深入理解

    要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言
    2014-02-02
  • 深入探讨JavaScript String对象

    深入探讨JavaScript String对象

    本文向大家详细的介绍了javascript中的String对象的简介、定义方式、实例属性和实例方法,非常的细致全面,这里推荐给大家,希望对大家能够有所帮助。
    2015-03-03
  • JavaScript 详解缓动动画的封装与使用

    JavaScript 详解缓动动画的封装与使用

    缓动动画原理:移动的像素慢慢减少,让效果看起来更柔和更美观,通过定时器加回调函数,实现动画效果以及更多具体功能,非常好用
    2021-11-11
  • 举例详解Python中smtplib模块处理电子邮件的使用

    举例详解Python中smtplib模块处理电子邮件的使用

    这篇文章主要介绍了举例详解Python中smtplib模块处理电子邮件的使用,是Python入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 浅谈javascript回调函数

    浅谈javascript回调函数

    回调函数是从一个叫函数式编程的编程范式中衍生出来的概念。简单来说,函数式编程就是使用函数作为变量。函数式编程过去 - 甚至是现在,依旧没有被广泛使用 - 它过去常被看做是那些受过特许训练的,大师级别的程序员的秘传技巧。
    2014-12-12
  • 一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

    一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

    这篇文章主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
    2017-08-08

最新评论