本篇内容主要讲解“Javascript如何实现桥接模式”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Javascript如何实现桥接模式”吧!

为景泰等地区用户提供了全套网页设计制作服务，及景泰网站建设行业解决方案。主营业务为成都网站设计、做网站、景泰网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

基本理论

桥接模式定义：将抽象部分与它的实现部分分离，使它们都可以独立地变化。
桥接模式主要有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"); }

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

1 var message = new MessageDialog(new LinerAnimation());
2 message.show();
3 var error = new ErrorDialog(new EaseAnimation());
4 error.show();

到此，相信大家对“Javascript如何实现桥接模式”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

文章标题：Javascript如何实现桥接模式
地址分享：http://chengdu.cdxwcx.cn/article/pepppp.html