JavaScript設計模式經典之介面卡模式

去年年前當時正在開發dev.qplus.com, 有個儲存應用分類id的js檔案, 分類id的結構最開始設計的比較笨重. 於是我決定重構它. 我把它定義成一個json樹的形式, 大概是這樣:

var category = {

music: {

id: 1,

children: [ , , , , ]

}

}

dev.qplus.com裡大概有4，5個頁面都呼叫這個category物件. 春節前我休了1個星期假. 過年來之後發現郵箱裡有封郵件, 設計資料庫的同學把category..js也重構了一份, 並且其他幾個專案裡都是用了這份category.js, 我拿過來一看就傻眼了, 和我之前定的資料結構完全不一樣.

當然這是一個溝通上的反面例子. 但接下來的重點是我已經在N個檔案裡用到了之前我定的category.js. 而且惹上了一些複雜的相關邏輯. 怎麼改掉我之前的程式碼呢. 全部重寫肯定是不願意. 所以現在介面卡就派上用場了.

只需要把同事的category用一個函式轉成跟我之前定義的一樣.

my.category = adapterCategory ( afu.category );

介面卡模式的作用很像一個轉介面. 本來iphone的充電器是不能直接插在電腦機箱上的, 而通過一個usb轉介面就可以了.

所以, 在程式裡介面卡模式也經常用來適配2個介面, 比如你現在正在用一個自定義的js庫. 裡面有個根據id獲取節點的方法$id(). 有天你覺得jquery裡的$實現得更酷, 但你又不想讓你的工程師去學習新的庫和語法. 那一個介面卡就能讓你完成這件事情.

$id = function( id ){

return jQuery( ‘#’ + id )[0];

}