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

xiaodao 發布于2019-08-23 13:57 / 2226人閱讀

摘要：概念模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性。參考設計模式設計模式系列文章設計模式之模塊模式揭示模塊模式設計模式之單例模式設計模式之外觀模式

概念

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（外觀）模式

GPU云服務器云服務器外觀模式 Java設計模式之（五）——代理模式 JS設計模式 js繼承模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99835.html

JS 外觀模式

摘要：外觀模式在中常常用于解決瀏覽器兼容性問題。實現外觀模式不僅簡化類中的接口，而且對接口與調用者也進行了解耦。外觀模式的優勢是易于使用，而且本身也比較輕量級。 1. 簡介外觀模式（Facade）為子系統中的一組接口提供了一個一致的界面，此模塊定義了一個高層接口，這個接口值得這一子系統更加容易使用。外觀模式在JS中常常用于解決瀏覽器兼容性問題。 2. 實現外觀模式不僅簡化類中的接口，而且...

BothEyes1993 2019-08-22 11:18 評論0 收藏0
js設計模式 --- 外觀設計模式

摘要：外觀設計模式外部與一個子系統的通信必須通過一個統一的門面對象進行，這就是門面模式。此角色知曉相關的子系統的功能和責任。外觀模式結構客戶端正常調用方式外觀模式調用方式實現未使用外觀模式子系統類客戶端調用使用外觀模式子系統類同上外觀類客戶端調用外觀設計模式外部與一個子系統的通信必須通過一個統一的門面(Facade)對象進行，這就是門面模式。外觀模式為子系統提供了統一的界面, 屏蔽了子類...

saucxs 2019-08-26 11:47 評論0 收藏0
設計模式系列·Facade模式之MVC的煩惱

摘要：沒有任何意外，王小二的公司用來開發公司的主打產品。臃腫的著手開干吧小二打開熟悉的，找到提交訂單模塊的。要不再去請教下哥的煩惱小二找到哥，詳細的描述了他的問題。流行的MVC架構模式如今的Web開發，各種框架風起云涌，勢如破竹。從國民第一的ThinkPhp到稱霸全球的Laravel，這些框架有一個共同特征，都采用了MVC的架構模式。 showImg(https://segmentfa...

zhichangterry 2019-06-27 15:51 評論0 收藏0
一起學設計模式 - 外觀模式

摘要：適配器是將接口轉換為不同接口，而外觀模式是提供一個統一的接口來簡化接口。外觀模式（Facade Pattern）屬于結構型模式的一種，為子系統中的一組接口提供一個統一的入口，它通過引入一個外觀角色來簡化客戶端與子系統之間的交互... 概述外觀模式是一種使用頻率非常高的結構型設計模式，當你要為一個復雜子系統提供一個簡單接口時。子系統往往因為不斷演化而變得越來越復雜。大多數模式使用時...

zone 2019-08-15 12:29 評論0 收藏0
開發之路（設計模式八：外觀模式）

摘要：改變接口的新模式，為了簡化接口這次帶來的模式為外觀模式，之所以這么稱呼，因為它將一個或多個類復雜的一切都隱藏起來。改變接口的新模式，為了簡化接口這次帶來的模式為外觀模式，之所以這么稱呼，因為它將一個或多個類復雜的一切都隱藏起來。我依舊舉生活中例子，現在有些朋友家的液晶電視可能是大尺寸的，或者有用投影儀來看電視，打游戲的。有一天我想用家庭影院系統在家里看一次大片。 ...

hosition 2019-08-16 10:47 評論0 收藏0