JavaScript 設計模式讀書筆記(七)——適配器模式

AZmake 發布于2019-08-19 14:46 / 842人閱讀

摘要：與門面模式的聯系本文要說的適配器模式和上一篇門面模式在思想上有相似之處，所以放在一起說。我們以中的一個為例，說說實際應用中的適配器模式的使用方法。而如果實現層的問題不大，要解決一部分適配問題的話，適配器模式就是很好的選擇了。

與門面模式的聯系

本文要說的適配器模式和上一篇門面模式在思想上有相似之處，所以放在一起說。它們都對類的接口進行了一些改變。門面模式是把相似的或是完成相關任務的接口進行組織，提供給用戶一個更加簡單易用，更適用于某種業務的接口。而適配器模式是要把一個接口轉換為另一個接口，它不對接口的功能進行干涉，它不會簡化接口，而是將接口變為更豐富且兼容的接口。

簡而言之，門面模式是讓本來就可以用的接口變得更好用。而適配器是讓不合適的接口變得合適。

適配器的概念

適配器的思想用線框圖來表示就是這樣：

 +------+          +------+
 |  某  |interface1|  適  | interface2
 |  個--|----------|--配--|------------→
 |  類  |          |  器  |
 +------+          +------+

這個框圖能讓人想起什么？我想到了這個：

將一個不能直接使用的耳機接頭進行轉換，成為可以使用的樣子。

假設一個類的方法是這樣的：

orange.showInfo = function(name, color, weight) {
  console.log(name + " is " + color + " and its weight is " + weight);
};

而我們現有的對象都是這樣

var o = {
  name: "classicemi",
  color: "orange",
  weight: "300g"
}

我們當然可以這樣使用接口：

orange.showInfo(o.name, o.color, o.weight);

同樣，我們也可以：

function adaptedShowInfo(o) {
  orange.showInfo(o.name, o.color, o.weight);
}

// 通過適配過的接口進行調用
adaptedShowInfo(o);

這樣，簡化了接口的調用過程，對接口進行了一定程度的改造。

jQuery中的適配器

上面提到的適配器寫法只是表現了適配器是一個什么樣的東西，但實際項目中不會出現這樣的代碼。我們以jQuery中的一個API為例，說說實際應用中的適配器模式的使用方法。

在jQuery樣式相關的API中，最方便使用的就是css()了，這個接口是把set和get的功能合二為一了：

// 既可以像這樣調用，取得opacity值
$(".elem").css("opacity");

// 也可以像這樣，設置opacity值
$(".elem").css({"opacity": "0.9"});

這是怎么實現的呢，在jQuery核心代碼中，與set/get opacity相關的代碼如下：

jQuery.cssHooks.opacity = {
  get: function( elem, computed ) {
    // IE uses filters for opacity
    return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?
      ( 0.01 * parseFloat( RegExp.$1 ) ) + "" :
      computed ? "1" : "";
  },

  set: function( elem, value ) {
    var style = elem.style,
      currentStyle = elem.currentStyle,
      opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
      filter = currentStyle && currentStyle.filter || style.filter || "";

    // IE has trouble with opacity if it does not have layout
    // Force it by setting the zoom level
    style.zoom = 1;

    // if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652
    // if value === "", then remove inline opacity #12685
    if ( ( value >= 1 || value === "" ) &&
        jQuery.trim( filter.replace( ralpha, "" ) ) === "" &&
        style.removeAttribute ) {

      // Setting style.filter to null, "" & " " still leave "filter:" in the cssText
      // if "filter:" is present at all, clearType is disabled, we want to avoid this
      // style.removeAttribute is IE Only, but so apparently is this code path...
      style.removeAttribute( "filter" );

      // if there is no filter style applied in a css rule or unset inline opacity, we are done
      if ( value === "" || currentStyle && !currentStyle.filter ) {
        return;
      }
    }

    // otherwise, set new filter values
    style.filter = ralpha.test( filter ) ?
      filter.replace( ralpha, opacity ) :
      filter + " " + opacity;
  }
};

通過對傳入參數的適配，實現不同的功能。因為不看參數的話，調用的方式是完全一樣的。那么從參數下手，通過校驗參數的形式，確定用戶要實現的功能。

適配器模式的適用場景

適配器不會去改變實現層，那不屬于它的職責范圍，它干涉了抽象的過程。外部接口的適配能夠讓同一個方法適用于多種系統。

如果內部的實現出現了問題，需要動手術解決的話，那就不應該使用適配器了，因為那只是治標不治本的方法，反而會增加代碼的復雜度。對實現進行全面優化的帶來的是真正的改善。而如果實現層的問題不大，要解決一部分適配問題的話，適配器模式就是很好的選擇了。

GPU云服務器云服務器適配器模式設計模式學習筆記 head-first設計模式筆記讀書筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78107.html

《JavaScript設計模式與開發實踐》讀書筆記

摘要：訂閱模式的一個典型的應用就是后面會寫一篇相關的讀書筆記。享元模式享元模式的核心思想是對象復用，減少對象數量，減少內存開銷。適配器模式對目標函數進行數據參數轉化，使其符合目標函數所需要的格式。設計模式單例模式 JS的單例模式有別于傳統面向對象語言的單例模式，js作為一門無類的語言。使用全局變量的模式來實現單例模式思想。js里面的單例又分為普通單例和惰性單例，惰性單例指的是只有這個實例...

Panda 2019-08-23 11:58 評論0 收藏0
《javascript高級程序設計》第六章讀書筆記之 javascript對象的幾種創建方式

摘要：三種使用構造函數創建對象的方法和的作用都是在某個特殊對象的作用域中調用函數。這種方式還支持向構造函數傳遞參數。叫法上把函數叫做構造函數，其他無區別適用情境可以在特殊的情況下用來為對象創建構造函數。一、工廠模式工廠模式：使用字面量和object構造函數會有很多重復代碼，在此基礎上改進showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 評論0 收藏0
《Tomcat架構解析》讀書筆記一

摘要：用來表示一個應用表示實例與當處理請求時，需要將請求映射到具體的容器進行處理請求映射，除了考慮映射規則，這時候還要對進行生命周期的管理組件的注冊初始化銷毀等等適配器模式解耦，與以及的溝通橋梁 title: Tomcat靜態架構date: 2018-10-24 13:46:20tags: tomcat 讀書筆記《Tomcat架構解析》讀書筆記一大體設計思路接收客戶端請求（Co...

rockswang 2019-08-16 13:30 評論0 收藏0
流暢的python讀書筆記-第十章-繼承優缺點

摘要：繼承的優缺點推出繼承的初衷是讓新手順利使用只有專家才能設計出來的框架。多重繼承的真實應用多重繼承能發揮積極作用。即便是單繼承，這個原則也能提升靈活性，因為子類化是一種緊耦合，而且較高的繼承樹容易倒。繼承的優缺點推出繼承的初衷是讓新手順利使用只有專家才能設計出來的框架。——Alan Kay 子類化內置類型很麻煩 (如 list 或 dict）) ,別搞這種直接子類化內置類型（如 ...

morgan 2019-07-31 11:09 評論0 收藏0