外觀設計模式

zzbo 發布于2019-08-21 18:30 / 693人閱讀

摘要：外觀設計模式的優點易于使用在實現形式上通常占用較小的內存。抽象的注意事項外觀設計模式雖然少有劣勢，但值得注意的一個問題是性能。

當我們豎起一個門面時，我們向外展示的只是一種外表，它可能隱藏著一個非同一般的事實。這也就是我們所要說的外觀設計模式，這種模式為一大段的代碼體提供了一個便捷的高級接口，隱藏了底層復雜的實現。這種設計模式簡化代碼的呈現形式，給開發人員一個API，同時也能提高代碼的可用性。

外觀設計模式在JavaScript的庫中很常見，例如JQuery，盡管實現的是可能支持具有廣泛行為的方法（如：$("selector")用來獲取selector所指代的對象），但展示給使用者的只是一個 facade 或者這些方法的有限抽象。

我們經常正面接觸的是外觀（Facade），而不是外觀背后具體實現的子系統。就如我們用jQuery，不管什么時候都是用的$(el).css()，$(el).animate()，我們使用的都是用的簡單的公共接口，這樣避免我們手動調用jQuery core的內部方法，也避免了手動操作與dom的交互和維護狀態變量的需要。

jQuery core的方法被視為中間抽象。開發人員直接接觸的是DOM API和讓jQuery變得好用的外觀設計模式的應用（Facade pattern）

基于我們所了解到的，外觀設計模式簡化了一個類接口，并弱化類的使用。不直接于子系統進行交互可以減少錯誤的出現率。

外觀設計模式的優點：

1.易于使用

2.在實現形式上通常占用較小的內存。

這里有一個未經優化的例子，它能實現監聽事件的跨瀏覽器使用，這種情況我們一般是通過創建一個通用的方法來實現，在方法中我們檢查被使用的屬性是否存在，以便提供安全且能跨瀏覽器的解決方案。

var addMyEvent = function( el, ev, fn ){

   if( el.addEventListener ) {
            el.addEventListener( ev, fn, false );
      } else if(el.attachEvent) {
            el.attachEvent( "on" + ev, fn );
      } else {
           el["on" + ev] = fn;
    }
 
};

在jQuery中我們找到了一個相似的實現 $(document).ready(...)，而其內部的實現是通過調用 bindReady() 方法來實現的，如下是其內部實現：

bindReady: function() {
    ...
    if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
 
      // A fallback to window.onload, that will always work
      window.addEventListener( "load", jQuery.ready, false );
 
    // IE 情況下
    } else if ( document.attachEvent ) {
 
      document.attachEvent( "onreadystatechange", DOMContentLoaded );
 
      window.attachEvent( "onload", jQuery.ready );
               ...

用戶只使用這個被暴露出來的 $(document).ready(...) 即可，其他的復雜實現，被隱藏了起來。

外觀設計模式不一定多帶帶使用，它可能和其他設計模式一起使用，例如：Module設計模式，正如我們下面看到的，我們的模塊設計模式的實例包含了一些私有的方法。通過外觀設計模式可以用一些更簡單的API訪問這些方法。

var 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();
            }
        }
    };
}());
 
 
// usage
module.facade( {run: true, val: 10} );
// Outputs: "current value: 10" and "running"

在這個示例中，調用 module.facade() 將最終最終出發一個私有方法 set ，使用者不關心這個，他只只要調用就可以了，而不用擔心實現的具體細節。

抽象的注意事項

外觀設計模式雖然少有劣勢，但值得注意的一個問題是性能。

抽象出一個外觀設計模式都要花費一些抽象成本，這樣我們就要靠這個成本的花費是否合理。

以Jquery庫中的獲取元素為例，原生的getElementById("identifer")要比$("#identifer")的速率要快的多，但是我們要記住jquery的Sizzle選擇器引擎在幕后做了很多的優化查詢，同時他返回一個jquery對象，而不是返回一個dom節點。

這個特殊的外觀設計模式為了實現一個優雅的選擇器函數，它能接受和解析多種類型的查詢，但它隱含著抽象的成本。時間證明jquery的Sizzle引擎是成功的。實際上一個簡單的外觀設計模式為一個團隊來說是很有必要的，在使用模式時注意所涉及的性能成本，對它們是否值得提供抽象調用做評估。

其它設計模式相關文章請轉‘大處著眼，小處著手’——設計模式系列

云服務器 GPU云服務器模式設計外觀模式代碼設計模式工廠模式設計模式?

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

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

被誤讀的設計模式

摘要：可以說，如果問題是我們的敵人，代碼是我們的劍，設計模式就是高手心中的劍譜。中級選手，在編程的時候知道何時該用什么設計模式，而什么時候不該用。設計模式被用來簡化設計，讓設計更優雅。其中最具有普遍性的方案往往就是我們的設計模式的內容。 showImg(https://segmentfault.com/img/remote/1460000019100076?w=800&h=440); 目錄概...

William_Sang 2019-08-16 17:14 評論0 收藏0
php設計模式

摘要：我們今天也來做一個萬能遙控器設計模式適配器模式將一個類的接口轉換成客戶希望的另外一個接口。今天要介紹的仍然是創建型設計模式的一種建造者模式。設計模式的理論知識固然重要，但計算機程序的思維邏輯 (54) - 剖析 Collections - 設計模式上節我們提到，類 Collections 中大概有兩類功能，第一類是對容器接口對象進行操作，第二類是返回一個容器接口對象，上節我們介紹了...

Dionysus_go 2019-06-28 14:37 評論0 收藏0
php設計模式

摘要：我們今天也來做一個萬能遙控器設計模式適配器模式將一個類的接口轉換成客戶希望的另外一個接口。今天要介紹的仍然是創建型設計模式的一種建造者模式。設計模式的理論知識固然重要，但計算機程序的思維邏輯 (54) - 剖析 Collections - 設計模式上節我們提到，類 Collections 中大概有兩類功能，第一類是對容器接口對象進行操作，第二類是返回一個容器接口對象，上節我們介紹了...

vspiders 2019-06-28 14:33 評論0 收藏0
PHP設計模式(七)：設計模式分類

摘要：原文地址設計模式七設計模式分類根據目的和范圍，設計模式可以分為五類。按照目的分為創建設計模式，結構設計模式，以及行為設計模式。與類的設計模式不同，對象設計模式主要用于運行期對象的狀態改變動態行為變更等。原文地址：PHP設計模式(七)：設計模式分類 Introduction 根據目的和范圍，設計模式可以分為五類。按照目的分為：創建設計模式，結構設計模式，以及行為設計模式。按照范圍分為：...

tracymac7 2019-06-27 13:50 評論0 收藏0
PHP 設計模式概述

摘要：創建型模式主要有以下五種簡單工廠模式和工廠方法模式抽象工廠模式單例模式建造者模式原型模式在設計模式一書中將工廠模式分為兩類工廠方法模式與抽象工廠模式。一、設計模式（Design pattern）是什么設計模式是一套被反復使用、多數人知曉、經過分類編目的代碼設計的經驗總結。使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。二、為什么會有設計模式在軟件開發過...

IntMain 2019-07-01 10:48 評論0 收藏0