JavaScript設計模式——適配器模式 無問西東 適配器模

無問西東

今日觀影《無問西東》感觸最深的話，記錄於此：

人把自己置身於忙碌當中，有一種麻木的踏實，但喪失了真實，你的青春也不過只有這些日子。
什麼是真實？
你看到什麼，聽到什麼，做什麼，和誰在一起，有一種從心靈深處滿溢出來的不懊悔，也不羞恥的平和與喜悅。

適配器模

下圖就是適配器，emmmm...明明白白，清清楚楚。

先來看看它的定義：

適配器模式：將一個類（對象）的接口（方法或者屬性）轉化成另一個接口，以滿足用戶的需求，使類（對象）之間藉口的不兼容問題通過適配器得以解決。

所以當iPhone上的3.5mm耳機孔被砍掉時，爲了能夠讓新iPhone繼續使用3.5mm接口的耳機來聽歌，我們不得不使用lightning轉3.5mm接口，作爲適配器。

一個簡單的適配器

早先各種框架還沒有流行的時候，我們通過document.getElementById()來獲取DOM元素，進行DOM操作的，只不過每次都要寫很長一段字符，就很麻煩，本着偷懶的原則，我們會封裝一個適配器，用一個$就可以搞定。

function $(id) {
    return document.getElementById(id)
}

後來有了jQuery，只要引入jQuery.js文件，便可以直接使用$('#')，進行DOM操作。

從jQuery源碼中看適配器

⚠️這裏使用jQuery的版本爲v3.4.1

在jQuery樣式相關的API中，最方便使用的就是css()了：

// 既可以像這樣調用，取得display值
$('.elem').css('display');

// 也可以像這樣，設置display值
$('.elem').css({'display': 'none'});

它是怎麼實現的呢？

jQuery.fn.extend( {
    css: function( name, value ) {
        return access( this, function( elem, name, value ) {
            var styles, len,
                map = {},
                i = 0;

            if ( Array.isArray( name ) ) {
                styles = getStyles( elem );
                len = name.length;

                for ( ; i < len; i++ ) {
                    map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
                }

                return map;
            }

            return value !== undefined ?
                jQuery.style( elem, name, value ) :
                jQuery.css( elem, name );
        }, name, value, arguments.length > 1 );
    }
} );

總結

上一章節我們學習了外觀者模式，外觀模式的作用和適配器比較相似，有人把外觀模式看成一組對象的適配器，但外觀模式最顯著的特點是定義了一個新的接口。但是，適配器模式主要用來解決兩個已有接口之間不匹配的問題，它不考慮這些接口是怎樣實現的，也不考慮它們將來可能會如何演化。適配器模式不需要改變已有的接口，就能夠使它們協同作用。

結束語

最後借用《無問西東》裏的結束語，爲結尾：

願你在被打擊時，記起你的珍貴，抵抗惡意；願你在迷茫時，堅信你的珍貴，愛你所愛，行你所行，聽從你心，無問西東。