首頁 > web前端 > js教程 > 主體

Adapter適配器模式在JavaScript設計模式程式設計中的運用總結(圖文教學)

亚连
發布: 2018-05-21 13:59:40
原創
1855 人瀏覽過

適配器模式的作用是解決兩個軟體實體間的介面不相容的問題,在JavaScript尤其是AJAX方面比較常用,接下來看一下對Adapter適配器模式在JavaScript設計模式編程中的運用分析

定義
適配器模式(Adapter)是將一個類別(物件)的介面(方法或屬性)轉換成客戶希望的另一個介面(方法或屬性),而適配器模式使得原本由於介面不相容而不能一起工作的那些類別(物件)可以一些工作。速成包裝器(wrapper)。

適配器的別名是包裝器(wrapper),這是一個相對簡單的模式。在程式開發中有許多這樣的場景:當我們試著呼叫模組或物件的某個介面時,卻發現這個介面的格式並不符合目前的需求。這時候有兩種解決辦法,第一種是修改原來的介面實現,但如果原來的模組很複雜,或是我們拿到的模組是一段別人寫的經過壓縮的程式碼,修改原介面就顯得不太現實了。第二種辦法是建立一個適配器,將原介面轉換為客戶希望的另一個接口,客戶只需要和適配器打交道。

為什麼需要採用適配器模式?
在開發應用程式時,您傾向於需要更換其中某一部分,例如,您用於保存日誌或類似性質的內容的一個庫。當您用一個新庫來替換它時,新庫不太可能有完全相同的介面。從這裡開始,您有兩個選項:
(1)檢查所有程式碼,並更改指向舊程式庫的一切程式碼。
(2)建立一個適配器,使新庫可以使用與舊庫相同的介面。
顯然,在某些情況下,假如您的應用程式很小,或者對舊庫的引用很少,更合適的做法是檢查完整的程式碼,並更改它以匹配新庫,而不是添加一個新的抽象層,使程式碼更複雜。但是,在大多數情況下,建立一個適配器更為實用且節省時間。

JavaScript程式碼範例

一件事情有可能發生時,它就一定會發生。首先讓我們來看看這個小小的LoggerFactory,它讓我們能更輕鬆地修改我們使用的日誌介面。

var LoggerFactory = {
  getLogger: function() {
    return window.console;
  },
  ...
};

/* 用法示例 */
var logger = LoggerFactory.getLogger();
logger.log("something to log");
登入後複製

在我們呼叫getLogger時它給我們回傳了控制台物件(console)。為了這個練習我們假裝console物件只有一個方法-log,並且它只能接收一個字串類型的參數。接下來,我們有另一個日誌接口,這個會複雜些,因為1)它是用JavaScript實現的,不像console那樣是瀏覽器本身就有的;2)它會把日誌通過AJAX發送到伺服器,這也意味著我們要對URL資料進行編碼(程式碼裡不會具體實作URL編碼相關的事,因為它和我們的要講的適配器模式毫不相干)。當然,它會使用一個和控制台不同的介面。

var AjaxLogger = {
  sendLog: function() {
    var data = this.urlEncode(arguments);

    jQuery.ajax({
      url: "http://example.com/log",
      data: data
    });
  },

  urlEncode: function(arg) {
    ...
    return encodedData;
  },
  ...
};
登入後複製

我們使用了jQuery的AJAX請求,主要是為了節省時間,忽略那些和適配器模式不想幹的事情。我們現在要做的事情就是建立一個適配器,並且改變之前的LoggerFactory讓其傳回這個適配器而不是控制台物件。

var AjaxLoggerAdapter = {
  log: function(arg) {
    AjaxLogger.sendLog(arg);
  }
};

/* 调整 LoggerFactory */

var LoggerFactory = {
  getLogger: function() {
    // 改变返回值
    return AjaxLoggerAdapter;
  },
  ...
};
登入後複製

我們對現有程式碼只做了一行更改,整個程式就可以使用這個新的日誌介面了。

複雜適配器

日誌介面是個很簡單的例子,它只有一個方法,把它直接對應到舊的方法上也沒什麼難的。大多數情況並不是如此。你可能會碰到這樣的問題,即這些互相映射的函數的參數是完全不同的,舊介面可能根本沒有這些參數,你必須自己處理它們。某些情況下,你又必須刪掉一些參數,因為新的介面根本用不到它們。如果兩個物件之間的介面映射太難,我們就要想想別的辦法了,反正我不希望查找和修改數千行舊程式碼。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

JavaScript typeof, null, 和undefined的相關知識

JavaScript Boolean(布林) 物件的相關知識與用法

JavaScript Date(日期)相關知識與用法

################################################################# #####

以上是Adapter適配器模式在JavaScript設計模式程式設計中的運用總結(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!