適配器模式

• 適配器模式
• 適配器模式 介紹
• • 概念
  • 示例
• 適配器模式 演示
• 適配器模式 場景
• • 封裝舊接口
  • vue computed
• 適配器模式 總結

適配器模式

• 介紹
• 演示
• 場景
• 總結

適配器模式 介紹

• 舊接口格式和使用者不兼容
• 中間加一個適配轉換接口

概念

將一個類的接口適配成用戶所期待的。一個適配允許通常因為接口不兼容而不能在一起工作的類工作在一起，做法是將類自己的接口包裹在一個已存在的類中。

示例

我們國家的電器使用普通的扁平兩項或三項插頭，而去外國的話，使用的標準就不一樣了，比如德國，使用的是德國標準，是兩項圓頭的插頭。怎樣解決這個問題呢？只要使用一個電源轉化器就行了。

適配器模式 演示

常見的 UML 類圖是

因為 JS 少有類繼承，也沒有強類型，因此可簡化為

代碼是：

class Adaptee {specificRequest() {return '德國標準的插頭'} }class Target {constructor() {this.adaptee = new Adaptee()}request() {let info = this.adaptee.specificRequest()return `${info} -> 轉換器 -> 中國標準的插頭`} }// 測試 let target = new Target() target.request()

適配器模式 場景

封裝舊接口

隨著前端框架的發展，越來越多的開發者開始使用MVVM框架進行開發，只需要操作數據而不需要操作DOM元素，jQuery的作用越來越少。而很多項目中還是引用著jQuery庫作用工具類，因為我們要利用jQuery提供的ajax去服務器請求數據。如果jQuery在項目中的作用僅僅是作為ajax工具庫的話，有點殺雞焉用牛刀的感覺，造成資源浪費。這個時候我們完全可以封裝一個自己的ajax庫。
假設我們封裝的ajax就通過一個函數進行使用：

// 自己封裝的 ajax ，使用方式如下： ajax({url:'/getData',type:'Post',dataType:'json',data:{id:"123"} }) .done(function(){})// 但因為歷史原因，代碼中全都是： // $.ajax({...})

除了調用接口ajax與jQuery的$.ajax的不同，其他完全一樣。項目中請求ajax的地方必然很多，我們替換jQuery的時候不可能一個一個去修改$.ajax，那怎么辦呢，這個時候，我們就可以增加一個適配器：

// 做一層適配器 var $ = {ajax:function (options){return ajax(options);} }

vue computed

適配器模式 總結

• 什么是適配器模式
• 應用場景
• 關鍵點 - 重新封裝一個接口

設計原則驗證：

• 將現有接口和使用者進行分離
• 符合開放封閉原則

總結

以上是生活随笔為你收集整理的（六）适配器模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。