資訊專欄INFORMATION COLUMN
摘要：概念模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性。參考設(shè)計模式設(shè)計模式系列文章設(shè)計模式之模塊模式揭示模塊模式設(shè)計模式之單例模式設(shè)計模式之外觀模式
概念
Facade模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性。
可以把它想成是簡化API來展示給其他開發(fā)人員。
優(yōu)點
簡化接口
使用者與代碼解耦
易于使用
缺點
存在隱性成本，性能相對差一些
應用栗子1
jquery框架中的$(el),對外提供一個簡單接口，實現(xiàn)各種元素的選取，用戶不必手動調(diào)用框架內(nèi)部的各種方法，使用簡單，下面提供了簡化了的jq DOM選取的實現(xiàn)。
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 集合轉(zhuǎn)換成對應的數(shù)組對內(nèi)和merge相同可以操作類數(shù)組
}
}
.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設(shè)計模式》
JS設(shè)計模式系列文章JS設(shè)計模式之Module（模塊）模式、Revealing Module（揭示模塊）模式
JS設(shè)計模式之Singleton（單例）模式
JS設(shè)計模式之Facade（外觀）模式
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99835.html
摘要：外觀模式在中常常用于解決瀏覽器兼容性問題。實現(xiàn)外觀模式不僅簡化類中的接口，而且對接口與調(diào)用者也進行了解耦。外觀模式的優(yōu)勢是易于使用，而且本身也比較輕量級。 1. 簡介 外觀模式（Facade）為子系統(tǒng)中的一組接口提供了一個一致的界面，此模塊定義了一個高層接口，這個接口值得這一子系統(tǒng)更加容易使用。外觀模式在JS中常常用于解決瀏覽器兼容性問題。 2. 實現(xiàn) 外觀模式不僅簡化類中的接口，而且...
摘要：外觀設(shè)計模式外部與一個子系統(tǒng)的通信必須通過一個統(tǒng)一的門面對象進行，這就是門面模式。此角色知曉相關(guān)的子系統(tǒng)的功能和責任。外觀模式結(jié)構(gòu)客戶端正常調(diào)用方式外觀模式調(diào)用方式實現(xiàn)未使用外觀模式子系統(tǒng)類客戶端調(diào)用使用外觀模式子系統(tǒng)類同上外觀類客戶端調(diào)用 外觀設(shè)計模式 外部與一個子系統(tǒng)的通信必須通過一個統(tǒng)一的門面(Facade)對象進行，這就是門面模式。外觀模式為子系統(tǒng)提供了統(tǒng)一的界面, 屏蔽了子類...
摘要：沒有任何意外，王小二的公司用來開發(fā)公司的主打產(chǎn)品。臃腫的著手開干吧小二打開熟悉的，找到提交訂單模塊的。要不再去請教下哥的煩惱小二找到哥，詳細的描述了他的問題。 流行的MVC架構(gòu)模式 如今的Web開發(fā)，各種框架風起云涌，勢如破竹。 從國民第一的ThinkPhp到稱霸全球的Laravel，這些框架有一個共同特征，都采用了MVC的架構(gòu)模式。 showImg(https://segmentfa...
摘要：適配器是將接口轉(zhuǎn)換為不同接口，而外觀模式是提供一個統(tǒng)一的接口來簡化接口。 外觀模式（Facade Pattern）屬于結(jié)構(gòu)型模式的一種，為子系統(tǒng)中的一組接口提供一個統(tǒng)一的入口，它通過引入一個外觀角色來簡化客戶端與子系統(tǒng)之間的交互... 概述 外觀模式是一種使用頻率非常高的結(jié)構(gòu)型設(shè)計模式，當你要為一個復雜子系統(tǒng)提供一個簡單接口時。子系統(tǒng)往往因為不斷演化而變得越來越復雜。大多數(shù)模式使用時...
摘要：改變接口的新模式，為了簡化接口這次帶來的模式為外觀模式，之所以這么稱呼，因為它將一個或多個類復雜的一切都隱藏起來。 改變接口的新模式，為了簡化接口 這次帶來的模式為外觀模式，之所以這么稱呼，因為它將一個或多個類復雜的一切都隱藏起來。 我依舊舉生活中例子，現(xiàn)在有些朋友家的液晶電視可能是大尺寸的，或者有用投影儀來看電視，打游戲的。有一天我想用家庭影院系統(tǒng)在家里看一次大片。 ...
閱讀 3110·2021-08-03 14:05
閱讀 2154·2019-08-29 15:35
閱讀 691·2019-08-29 13:30
閱讀 3180·2019-08-29 13:20
閱讀 2545·2019-08-23 18:15
閱讀 1810·2019-08-23 14:57
閱讀 2230·2019-08-23 13:57
閱讀 1324·2019-08-23 12:10
