JavaScript設計模式之適配器模式

CNZPH 發布于2019-08-23 13:46 / 979人閱讀

摘要：舊接口格式和使用者不兼容，中間加一個適配器轉換接口。模式作用使用一個已經存在的對象，但其方法或接口不符合你的要求。

原文博客地址：https://finget.github.io/2018/11/22/adapter/

適配器模式

適配器模式(Adapter)是將一個類(對象)的接口(方法或屬性)轉換成客戶希望的另外一個接口(方法或屬性),適配器模式使得原本由于接口不兼容而不能一起工作的那些類(對象)可以一起工作。[舊接口格式和使用者不兼容，中間加一個適配器轉換接口。]

UML

模式作用：

使用一個已經存在的對象，但其方法或接口不符合你的要求。

創建一個可復用的對象，該對象可以與其他不相關或不可見的對象協同工作。

使用已經存在的一個或多個對象，但是不能進行繼承已匹配它的接口。

注意事項：

與代理模式的區別，代理模式是不改變原接口，適配是原接口不符合規范

代碼示例

//谷歌地圖show方法
var googleMap = {
  googlShow: function() {
    console.log("谷歌地圖");
  }
};
//百度地圖show方法
var baiduMap = {
  baiduShow: function() {
    console.log("百度地圖");
  }
};
//渲染地圖函數
var renderMap=function(map){
  if(map.show instanceof Function){
    map.show();        
  }
};
renderMap(googleMap);//輸出:開始渲染谷歌地圖
renderMap(baiduMap);//輸出:開始渲染百度地圖

適配器模式還有數據的適配，在現在開發中，各種UI框架層出不窮(elementUI),每個框架中對組件數據格式的定義不一樣，后臺返回的數據也不能完全按照框架的格式，這時作為前端程序猿，我們就需要把后臺返回的數據做一次修改，以適應框架。這就是設配器的想法，不要聽到設計模式就很惱火，說不定你每天都在用?。?！

最后

創建了一個前端學習交流群，感興趣的朋友，一起來嗨呀！

GPU云服務器云服務器適配器模式 Java設計模式之（五）——代理模式 javascript設計模式 javascript命令模式

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

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

JavaScript設計模式之結構型設計模式

摘要：享元模式通過分析應用程序的對象，將其解析為內在數據和外在數據，減少對象數量，從而提高程序的性能。通過這種方式進行事件綁定，可以減少事件處理程序的數量，這種方式叫做事件委托，也是運用了享元模式的原理。事件處理程序是公用的內在部分，每個菜單項各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript設計模式之外觀模式概念外觀模式：為一組復雜子系統接口提...

xiaoqibTn 2019-08-21 18:24 評論0 收藏0
Javascript之適配者模式

摘要：適配者模式適配者模式主要用于解決兩個接口之間不匹配的問題。新接口希望是下面的形式這時候就可以采用適配者模式適配者模式適配者模式: 主要用于解決兩個接口之間不匹配的問題。demo const zhejiangCityOld = (function(){ return [ { name:hangzhou, id: 11, ...

zhangrxiang 2019-08-26 10:49 評論0 收藏0
JavaScript設計模式

摘要：依賴于接口的設計模式下面列出的設計模式，尤其依賴接口工廠模式。這些私用的靜態成員可以從構造器內部訪問，這意味著所有私用函數和特權函數都能訪問它們。構造器靜態特權方法封裝之弊私用方法很難進行單元測試。 1.弱類型語言在JavaScript中，定義變量時不必聲明其類型。但這并不意味著變量沒有類型。一個變量可以屬于幾種類型之一，這取決于其包含的數據。JavaScript中有三種原始類型：...

mingzhong 2019-08-19 18:46 評論0 收藏0
JavaScript 設計模式讀書筆記(七)——適配器模式

摘要：與門面模式的聯系本文要說的適配器模式和上一篇門面模式在思想上有相似之處，所以放在一起說。我們以中的一個為例，說說實際應用中的適配器模式的使用方法。而如果實現層的問題不大，要解決一部分適配問題的話，適配器模式就是很好的選擇了。與門面模式的聯系本文要說的適配器模式和上一篇門面模式在思想上有相似之處，所以放在一起說。它們都對類的接口進行了一些改變。門面模式是把相似的或是完成相關任務的接...

AZmake 2019-08-19 14:46 評論0 收藏0
從ES6重新認識JavaScript設計模式(四): 適配器模式

摘要：什么是適配器模式適配器模式將一個類的接口轉換成客戶希望的另外一個接口，使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。中的適配器模式在前端項目中，適配器模式的使用場景一般有以下三種情況庫的適配參數的適配和數據的適配。 1 什么是適配器模式適配器模式(Adapter)：將一個類的接口轉換成客戶希望的另外一個接口，使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。在...

URLOS 2019-08-22 18:30 評論0 收藏0