這篇文章主要講解了“Javascript中如何實(shí)現(xiàn)橋接模式”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Javascript中如何實(shí)現(xiàn)橋接模式”吧！

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)夷陵免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

基本理論

橋接模式定義：將抽象部分與它的實(shí)現(xiàn)部分分離，使它們都可以獨(dú)立地變化。
橋接模式主要有4個(gè)角色組成：
（1）抽象類(lèi)
（2）擴(kuò)充抽象類(lèi)
（3）實(shí)現(xiàn)類(lèi)接口
（4）具體實(shí)現(xiàn)類(lèi)
根據(jù)javascript語(yǔ)言的特點(diǎn)，我們將其簡(jiǎn)化成2個(gè)角色：
（1）擴(kuò)充抽象類(lèi)
（2）具體實(shí)現(xiàn)類(lèi)
怎么去理解橋接模式呢？我們接下來(lái)舉例說(shuō)明

橋接模式的實(shí)現(xiàn)

理解橋接模式的思想，關(guān)鍵是要理解其分離抽象部分和實(shí)現(xiàn)部分的思想。我們舉例進(jìn)行說(shuō)明

最簡(jiǎn)單的橋接模式

其實(shí)我們最經(jīng)常用的jQuery的each函數(shù)就是一個(gè)典型的橋接模式，我們模擬其實(shí)現(xiàn)如下：

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

在這個(gè)例子中，我們通過(guò)each函數(shù)循環(huán)了arr數(shù)組，別看這個(gè)例子很常見(jiàn)，但其中就包含了典型的橋接模式。

在這個(gè)例子中，抽象部分是each函數(shù)，也就是上面說(shuō)的擴(kuò)充抽象類(lèi)，實(shí)現(xiàn)部分是fn，即具體實(shí)現(xiàn)類(lèi)。抽象部分和實(shí)現(xiàn)部分可以獨(dú)立的進(jìn)行變化。這個(gè)例子雖然簡(jiǎn)單，但就是一個(gè)典型的橋接模式的應(yīng)用。

插件開(kāi)發(fā)中的橋接模式

橋接模式的一個(gè)適用場(chǎng)景是組件開(kāi)發(fā)。我們平時(shí)開(kāi)發(fā)組件為了適應(yīng)不同場(chǎng)合，組件相應(yīng)的會(huì)有許多不同維度的變化。橋接模式就可以應(yīng)用于此，將其抽象與實(shí)現(xiàn)分離，使組件的擴(kuò)展性更高。
假設(shè)我們要開(kāi)發(fā)一個(gè)彈窗插件，彈窗有不同的類(lèi)型：普通消息提醒，錯(cuò)誤提醒，每一種提醒的展示方式還都不一樣。這是一個(gè)典型的多維度變化的場(chǎng)景。首先我們定義兩個(gè)類(lèi)：普通消息彈窗和錯(cuò)誤消息彈窗。

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

這兩個(gè)類(lèi)就是前面提到的抽象部分，也就是擴(kuò)充抽象類(lèi)，它們都包含一個(gè)成員animation。

兩種彈窗通過(guò)show方法進(jìn)行顯示，但是顯示的動(dòng)畫(huà)效果不同。我們定義兩種顯示的效果類(lèi)如下：

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

這兩個(gè)類(lèi)就是具體實(shí)現(xiàn)類(lèi)，它們實(shí)現(xiàn)具體的顯示效果。那我們?nèi)绾握{(diào)用呢？

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

感謝各位的閱讀，以上就是“Javascript中如何實(shí)現(xiàn)橋接模式”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Javascript中如何實(shí)現(xiàn)橋接模式這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！