脚本宝典收集整理的这篇文章主要介绍了js实例详解JavaScript设计模式开发中的桥接模式使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

　　桥接模式的适用场合非常广泛，除了在事件回调函数与接口之间进行桥接外,桥接模式也可以用于连接公开的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技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例详解JavaScript设计模式开发中的桥接模式使用全部内容，希望文章能够帮你解决js实例详解JavaScript设计模式开发中的桥接模式使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。