亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解JavaScript設計模式開發(fā)中的橋接模式使用

 更新時間:2016年05月18日 10:25:17   作者:狼狼的藍胖子  
橋接模式的適用場合非常廣泛,除了在事件回調函數與接口之間進行橋接外,橋接模式也可以用于連接公開的API代碼和私用的實現代碼,下面我們就來詳解JavaScript設計模式開發(fā)中的橋接模式使用

橋接模式將抽象部分與實現部分分離開來,使兩者都可以獨立的變化,并且可以一起和諧地工作。抽象部分和實現部分都可以獨立的變化而不會互相影響,降低了代碼的耦合性,提高了代碼的擴展性。
按照GoF的定義,橋接模式的作用在于“將抽象與其實現隔離開來,以便二者獨立變化”。這種模式對于Javascript中常見的事件驅動的編程大有裨益。

橋接模式最常見和實際的應用場合之一是事件監(jiān)聽器回調函數。 example:事件監(jiān)聽器,把事件處理的語句封裝到回調函數中,通過接口而不是實現進行編程。

基本理論

橋接模式定義:將抽象部分與它的實現部分分離,使它們都可以獨立地變化。
橋接模式主要有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函數循環(huán)了arr數組,別看這個例子很常見,但其中就包含了典型的橋接模式。
在這個例子中,抽象部分是each函數,也就是上面說的擴充抽象類,實現部分是fn,即具體實現類。抽象部分和實現部分可以獨立的進行變化。這個例子雖然簡單,但就是一個典型的橋接模式的應用。

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

橋接模式的一個適用場景是組件開發(fā)。我們平時開發(fā)組件為了適應不同場合,組件相應的會有許多不同維度的變化。橋接模式就可以應用于此,將其抽象與實現分離,使組件的擴展性更高。
假設我們要開發(fā)一個彈窗插件,彈窗有不同的類型:普通消息提醒,錯誤提醒,每一種提醒的展示方式還都不一樣。這是一個典型的多維度變化的場景。首先我們定義兩個類:普通消息彈窗和錯誤消息彈窗。

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)橋接模式優(yōu)點:
把抽象與實現隔離開,有助于獨立地管理軟件的各組成部分。
(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

最新評論