有的時(shí)候在開發(fā)過程中，我們會(huì)發(fā)現(xiàn)，客戶端需要的接口和提供的接口發(fā)生不兼容的問題。由于特殊的原因我們無法修改客戶端接口。在這種情況下，我們需要適配現(xiàn)有接口和不兼容的類，這就要提到適配器模式。通過適配器，我們可以在不用修改舊代碼的情況下也能使用它們，這就是適配器的能力。

基本理論

適配器模式：將一個(gè)接口轉(zhuǎn)換成客戶端需要的接口而不需要去修改客戶端代碼，使得不兼容的代碼可以一起工作。

適配器主要有3個(gè)角色組成：
（1）客戶端：調(diào)用接口的類
（2）適配器：用來連接客戶端接口和提供服務(wù)的接口的類
（3）適配者：提供服務(wù)，但是卻與客戶端接口需求不兼容服務(wù)類。

適配器模式的實(shí)現(xiàn)

最簡(jiǎn)單的適配器

適配器模式?jīng)]有想象中的那么復(fù)雜，舉個(gè)最簡(jiǎn)單的例子。
客戶端調(diào)用一個(gè)方法進(jìn)行加法計(jì)算：

1 var result = add(1,2);

但是我們沒有提供add這個(gè)方法，提供了同樣類似功能的sum方法：

1 function sum(v1,v2){ 2 return v1 + v2; 3 }

為了避免修改客戶端和服務(wù)端，我們?cè)黾右粋€(gè)包裝函數(shù)：

1 function add (v1,v2){ 2 reutrn sum(v1,v2); 3 }

這就是一個(gè)最簡(jiǎn)單的適配器模式，我們?cè)趦蓚€(gè)不兼容的接口之間添加一個(gè)包裝方法，用這個(gè)方法來連接二者使其共同工作。

實(shí)際應(yīng)用

隨著前端框架的發(fā)展，越來越多的開發(fā)者開始使用MVVM框架進(jìn)行開發(fā)，只需要操作數(shù)據(jù)而不需要操作DOM元素，jQuery的作用越來越少。而很多項(xiàng)目中還是引用著jQuery庫(kù)作用工具類，因?yàn)槲覀円胘Query提供的ajax去服務(wù)器請(qǐng)求數(shù)據(jù)。如果jQuery在項(xiàng)目中的作用僅僅是作為ajax工具庫(kù)的話，有點(diǎn)殺雞焉用牛刀的感覺，造成資源浪費(fèi)。這個(gè)時(shí)候我們完全可以封裝一個(gè)自己的ajax庫(kù)。
假設(shè)我們封裝的ajax就通過一個(gè)函數(shù)進(jìn)行使用：

1 ajax({ 2 url:'/getData', 3 type:'Post', 4 dataType:'json', 5 data:{ 6 id:"123" 7 } 8 }) 9 .done(function(){})

除了調(diào)用接口ajax與jQuery的$.ajax的不同，其他完全一樣。

項(xiàng)目中請(qǐng)求ajax的地方必然很多，我們替換jQuery的時(shí)候不可能一個(gè)一個(gè)去修改$.ajax，那怎么辦呢，這個(gè)時(shí)候，我們就可以增加一個(gè)適配器：

1 var $ = { 2 ajax:function (options){ 3 return ajax(options); 4 } 5 }

這樣就能兼容舊代碼和新接口，避免對(duì)已有的代碼的修改。

總結(jié)

適配器模式的原理很簡(jiǎn)單，就是新增一個(gè)包裝類，對(duì)新的接口進(jìn)行包裝以適應(yīng)舊代碼的調(diào)用，避免修改接口和調(diào)用代碼。

適用場(chǎng)景：存在較多代碼調(diào)用舊接口，為了避免修改舊代碼和更換新接口，不影響現(xiàn)有實(shí)現(xiàn)方式的應(yīng)用場(chǎng)景。

原文地址：http://luopq.com/2015/11/10/desgin-pattern-adapter/

轉(zhuǎn)載于:https://www.cnblogs.com/lrzw32/p/4954895.html

總結(jié)

以上是生活随笔為你收集整理的Javascript设计模式理论与实战：适配器模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。