JS設計模式之Facade（外觀）模式

概念

Facade模式為更大的程式碼提供了一個方便的高層次介面，能夠隱藏其底層的真是複雜性。
可以把它想成是簡化API來展示給其他開發人員。

優缺點

優點

• 簡化介面
• 使用者與程式碼解耦
• 易於使用

缺點

• 存在隱性成本，效能相對差一些

應用

栗子1

jquery框架中的$(el),對外提供一個簡單介面，實現各種元素的選取，使用者不必手動呼叫框架內部的各種方法，使用簡單，下面提供了簡化了的jq DOM選取的實現。

jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor `enhanced`
    return new jQuery.fn.init( selector, context, rootjQuery );
};
        
jQuery.fn = jQuery.prototype = {
    init: function( selector, context, rootjQuery ) {
        var match, elem;

        // HANDLE: $(""), $(null), $(undefined), $(false)
        if ( !selector ) {
            return this;
        }

        // Handle HTML strings
        if ( typeof selector === "string" ) {
        
            ...

        } else if ( selector.nodeType ) {
           
            ...
           
        } else if ( jQuery.isFunction( selector ) ) {
           
           ...
           
        }

        return jQuery.makeArray( selector, this );
        //將一個 HTMLElements 集合轉換成對應的陣列對內和merge相同可以操作類陣列
    }
}

.css()同理

栗子2

這個例子是外觀模式和模組模式的組合，對外提供一個更加簡單的facade介面。

let module = (function() {
    var _private = {
        i: 5,
        get: function() {
            console.log(`current value:` + this.i);
        },
        set: function(val) {
            this.i = val;
        },
        run: function() {
            console.log(`running`);
        },
        jump: function() {
            console.log(`jumping`);
        }
    },

    return {
        facade: function(args) {
            _private.set(args.val);
            _private.get();

            if(args.run) {
                _private.run();
            }
        }
    }
}());

module.facade({run: true, value: 10});

參考

《JavaScript設計模式》

JS設計模式系列文章

JS設計模式之Module（模組）模式、Revealing Module（揭示模組）模式
JS設計模式之Singleton（單例）模式
JS設計模式之Facade（外觀）模式