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