文章初衷
設計模式其實旨在解決語言本身存在的缺陷,
目前javaScript一些新的語法特性已經整合了一些設計模式的實現,
大家在寫程式碼的時候,沒必要為了用設計模式而去用設計模式,
那麼我這邊為什麼還寫設計模式的文章呢,
一方面是自己的一個整理,然後記錄出來,結合自己的理解,
一方面就是雖然語言特性本身已經實現這些模式,有了自己的語法,
但是我們何嘗不能去了解一下它是通過什麼樣的思路去實現了
在我看來設計模式更多的是讓我對於思考問題,有了一些更好的思路和想法
文章實現更多的表現為用一些簡單的案例,幫助大家去理解這樣的一種思路,
會存在故意把設計模式的實現往簡單的案例靠攏,
大家在真實專案中不要刻意去用設計模式實現相同的程式碼
設計模式在平時的一些程式碼中都會有所體現,大家也許經常用到,
耐心看文章,也許你會發現自己平時的程式碼就不斷在設計模式中體現
JavaScript設計模式系列
JavaScript設計模式系列,講述大概20-30種設計模式在JavaScript中的運用
後面對應的篇幅會陸續更新,歡迎大家提出建議
這是設計模式系列第五篇,講述介面卡模式
注意
深入系列文章部分是有先後順序的，按照目錄結構順序閱讀效果最好。
勘誤及提問
如果有疑問或者發現錯誤，可以在相應的 issues 進行提問或勘誤。
介面卡模式
概念:
將一個物件的方法或者屬性轉化成另外一個介面,
使得物件之間的方法或屬性不相容性問題通過介面卡得到解決
通俗點去理解
比如蘋果插座是三孔的,這時候我們想要充電,
但是並沒有三孔的插頭,這時候我們就需要介面卡轉換一下,
這樣我們就可以充電的,這就是介面卡模式解決問題的場景
案例體現
比如我們現在需要列印一個陣列,通過後臺介面我們取到的是一個物件,
這時候我們就需要通過轉換把對應的物件轉換為陣列,
這種場景在我們專案中還是經常會遇到的,下面簡單的進行一個模擬
程式碼體現
// 介面卡模式
// obj物件轉換為陣列
function objToArray(obj) {
var arr = []; //新陣列
for(var i in obj){
arr.push(obj[i]);
}
return arr;
}
// 建立一個物件
var obj = {
name: '小錢',
age: 18,
sex: '男'
}
// 假設我這邊需要的結果是一個陣列格式的輸出
console.log(objToArray(obj));//['小錢',18,'男']複製程式碼jQuery與zepto框架的適配
介面卡模式在
jQuery與zepto框架之間也有一個很好的體現,在之前,我們在開發移動端的時候,會選擇用
zepto框架來替代比較大的jQuery框架這邊其實就很好的利用了適配模式,基本上會
jQuery的同學很快速的可以掌握zepto
介面卡模式與外觀模式的對比
外觀模式
概念:
為一組複雜的子系統介面提供一個更高階的統一介面,
通過這個介面使得對子系統介面的訪問更容易
外觀模式又被稱作為門面模式
介面卡模式
概念:
將一個物件的方法或者屬性轉化成另外一個介面,
使得物件之間的方法或屬性不相容性問題通過介面卡得到解決
外觀模式與介面卡模式的不同點在於,外觀模式側重點在於提供統一介面,使得訪問介面更容易,介面卡模式側重點在於轉換介面,解決不相容問題
介面卡模式的優點
- 通過適配的方式,可以很好的解決原本存在的相容性問題
介面卡模式總結
在需要把物件進行轉換,解決一些相容性問題的時候,我們可以考慮用介面卡的思路去解決問題
注意
深入系列文章部分是有先後順序的，按照目錄結構順序閱讀效果最好。