摘要:外觀設(shè)計(jì)模式的優(yōu)點(diǎn)易于使用在實(shí)現(xiàn)形式上通常占用較小的內(nèi)存。抽象的注意事項(xiàng)外觀設(shè)計(jì)模式雖然少有劣勢,但值得注意的一個問題是性能。
當(dāng)我們豎起一個門面時,我們向外展示的只是一種外表,它可能隱藏著一個非同一般的事實(shí)。這也就是我們所要說的外觀設(shè)計(jì)模式,這種模式為一大段的代碼體提供了一個便捷的高級接口,隱藏了底層復(fù)雜的實(shí)現(xiàn)。這種設(shè)計(jì)模式簡化代碼的呈現(xiàn)形式,給開發(fā)人員一個API,同時也能提高代碼的可用性。
外觀設(shè)計(jì)模式在JavaScript的庫中很常見,例如JQuery,盡管實(shí)現(xiàn)的是可能支持具有廣泛行為的方法(如:$("selector")用來獲取selector所指代的對象),但展示給使用者的只是一個 facade 或者這些方法的有限抽象。
我們經(jīng)常正面接觸的是外觀(Facade),而不是外觀背后具體實(shí)現(xiàn)的子系統(tǒng)。就如我們用jQuery,不管什么時候都是用的$(el).css(),$(el).animate(),我們使用的都是用的簡單的公共接口,這樣避免我們手動調(diào)用jQuery core的內(nèi)部方法,也避免了手動操作與dom的交互和維護(hù)狀態(tài)變量的需要。
jQuery core的方法被視為中間抽象。開發(fā)人員直接接觸的是DOM API和讓jQuery變得好用的外觀設(shè)計(jì)模式的應(yīng)用(Facade pattern)
基于我們所了解到的,外觀設(shè)計(jì)模式簡化了一個類接口,并弱化類的使用。不直接于子系統(tǒng)進(jìn)行交互可以減少錯誤的出現(xiàn)率。
外觀設(shè)計(jì)模式的優(yōu)點(diǎn):1.易于使用
2.在實(shí)現(xiàn)形式上通常占用較小的內(nèi)存。
這里有一個未經(jīng)優(yōu)化的例子,它能實(shí)現(xiàn)監(jiān)聽事件的跨瀏覽器使用,這種情況我們一般是通過創(chuàng)建一個通用的方法來實(shí)現(xiàn),在方法中我們檢查被使用的屬性是否存在,以便提供安全且能跨瀏覽器的解決方案。
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中我們找到了一個相似的實(shí)現(xiàn) $(document).ready(...),而其內(nèi)部的實(shí)現(xiàn)是通過調(diào)用 bindReady() 方法來實(shí)現(xiàn)的,如下是其內(nèi)部實(shí)現(xiàn):
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(...) 即可,其他的復(fù)雜實(shí)現(xiàn),被隱藏了起來。
外觀設(shè)計(jì)模式不一定多帶帶使用,它可能和其他設(shè)計(jì)模式一起使用,例如:Module設(shè)計(jì)模式,正如我們下面看到的,我們的模塊設(shè)計(jì)模式的實(shí)例包含了一些私有的方法。通過外觀設(shè)計(jì)模式可以用一些更簡單的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"
在這個示例中,調(diào)用 module.facade() 將最終最終出發(fā)一個私有方法 set ,使用者不關(guān)心這個,他只只要調(diào)用就可以了,而不用擔(dān)心實(shí)現(xiàn)的具體細(xì)節(jié)。
抽象的注意事項(xiàng)外觀設(shè)計(jì)模式雖然少有劣勢,但值得注意的一個問題是性能。
抽象出一個外觀設(shè)計(jì)模式都要花費(fèi)一些抽象成本,這樣我們就要靠這個成本的花費(fèi)是否合理。
以Jquery庫中的獲取元素為例,原生的getElementById("identifer")要比$("#identifer")的速率要快的多,但是我們要記住jquery的Sizzle選擇器引擎在幕后做了很多的優(yōu)化查詢,同時他返回一個jquery對象,而不是返回一個dom節(jié)點(diǎn)。
這個特殊的外觀設(shè)計(jì)模式為了實(shí)現(xiàn)一個優(yōu)雅的選擇器函數(shù),它能接受和解析多種類型的查詢,但它隱含著抽象的成本。時間證明jquery的Sizzle引擎是成功的。實(shí)際上一個簡單的外觀設(shè)計(jì)模式為一個團(tuán)隊(duì)來說是很有必要的,在使用模式時注意所涉及的性能成本,對它們是否值得提供抽象調(diào)用做評估。
其它設(shè)計(jì)模式相關(guān)文章請轉(zhuǎn)‘大處著眼,小處著手’——設(shè)計(jì)模式系列
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/90530.html
摘要:可以說,如果問題是我們的敵人,代碼是我們的劍,設(shè)計(jì)模式就是高手心中的劍譜。中級選手,在編程的時候知道何時該用什么設(shè)計(jì)模式,而什么時候不該用。設(shè)計(jì)模式被用來簡化設(shè)計(jì),讓設(shè)計(jì)更優(yōu)雅。其中最具有普遍性的方案往往就是我們的設(shè)計(jì)模式的內(nèi)容。 showImg(https://segmentfault.com/img/remote/1460000019100076?w=800&h=440); 目錄概...
摘要:我們今天也來做一個萬能遙控器設(shè)計(jì)模式適配器模式將一個類的接口轉(zhuǎn)換成客戶希望的另外一個接口。今天要介紹的仍然是創(chuàng)建型設(shè)計(jì)模式的一種建造者模式。設(shè)計(jì)模式的理論知識固然重要,但 計(jì)算機(jī)程序的思維邏輯 (54) - 剖析 Collections - 設(shè)計(jì)模式 上節(jié)我們提到,類 Collections 中大概有兩類功能,第一類是對容器接口對象進(jìn)行操作,第二類是返回一個容器接口對象,上節(jié)我們介紹了...
摘要:我們今天也來做一個萬能遙控器設(shè)計(jì)模式適配器模式將一個類的接口轉(zhuǎn)換成客戶希望的另外一個接口。今天要介紹的仍然是創(chuàng)建型設(shè)計(jì)模式的一種建造者模式。設(shè)計(jì)模式的理論知識固然重要,但 計(jì)算機(jī)程序的思維邏輯 (54) - 剖析 Collections - 設(shè)計(jì)模式 上節(jié)我們提到,類 Collections 中大概有兩類功能,第一類是對容器接口對象進(jìn)行操作,第二類是返回一個容器接口對象,上節(jié)我們介紹了...
摘要:原文地址設(shè)計(jì)模式七設(shè)計(jì)模式分類根據(jù)目的和范圍,設(shè)計(jì)模式可以分為五類。按照目的分為創(chuàng)建設(shè)計(jì)模式,結(jié)構(gòu)設(shè)計(jì)模式,以及行為設(shè)計(jì)模式。與類的設(shè)計(jì)模式不同,對象設(shè)計(jì)模式主要用于運(yùn)行期對象的狀態(tài)改變動態(tài)行為變更等。 原文地址:PHP設(shè)計(jì)模式(七):設(shè)計(jì)模式分類 Introduction 根據(jù)目的和范圍,設(shè)計(jì)模式可以分為五類。按照目的分為:創(chuàng)建設(shè)計(jì)模式,結(jié)構(gòu)設(shè)計(jì)模式,以及行為設(shè)計(jì)模式。按照范圍分為:...
摘要:創(chuàng)建型模式主要有以下五種簡單工廠模式和工廠方法模式抽象工廠模式單例模式建造者模式原型模式在設(shè)計(jì)模式一書中將工廠模式分為兩類工廠方法模式與抽象工廠模式。 一、 設(shè)計(jì)模式(Design pattern)是什么 設(shè)計(jì)模式是一套被反復(fù)使用、多數(shù)人知曉、經(jīng)過分類編目的代碼設(shè)計(jì)的經(jīng)驗(yàn)總結(jié)。使用設(shè)計(jì)模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 二、 為什么會有設(shè)計(jì)模式 在軟件開發(fā)過...
閱讀 2122·2021-11-22 09:34
閱讀 3533·2021-09-28 09:35
閱讀 14189·2021-09-09 11:34
閱讀 3728·2019-08-29 16:25
閱讀 2918·2019-08-29 15:23
閱讀 2127·2019-08-28 17:55
閱讀 2532·2019-08-26 17:04
閱讀 3117·2019-08-26 12:21