Javascript中如何实现桥接模式
这篇文章主要讲解了“Javascript中如何实现桥接模式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript中如何实现桥接模式”吧!
专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业夷陵免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
基本理论
桥接模式定义:将抽象部分与它的实现部分分离,使它们都可以独立地变化。
桥接模式主要有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中如何实现桥接模式这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
标题名称:Javascript中如何实现桥接模式
网址分享:http://myzitong.com/article/gcsepo.html