JavaScript設計模式之外觀模式介紹
外觀模式說明
說明：外觀模式是用于由于子系統(tǒng)或程序組成較復雜而提供的一個高層界面接口，使用客戶端更容易訪問底層的程序或系統(tǒng)接口;
外觀模式是我們經(jīng)常使用遇到的模式，我們經(jīng)常涉及到的功能，可能需要涉及到幾個子接口或子系統(tǒng)，而我們的某個功能，可能只需要這向個多個子接口中的一個或幾個組成的順序封裝。如果是業(yè)務功能直接對應子接口或子系統(tǒng)的，可能要求開發(fā)人員對內(nèi)部需要相當?shù)牧私?；你可能需要去了解業(yè)務流程是怎么走，他的順序是什么，等等。這即需要開發(fā)員了解業(yè)務，也使得客戶端編程變得相當?shù)膹碗s；
這里如果有一層，或是一個類，專門提供好封裝好我們要使用的方法，客戶端功能只需要與這個中間層類交互，中間層類的相應方法有了解業(yè)務的相關開發(fā)人員組織封裝，那么程序將變得非常的簡單，程序員只需要知道他這個功能所需要對應方法是哪個即可，也不用知道內(nèi)部的邏輯。
這個中間層類就是我們說的外觀類，這就是外觀模式的思想。
場景實例:
1>. 比如總開關的例子，這個總開關，可以控制家里的大門的一盞燈，大廳的幾盞燈，并控制著家電視機，電冰箱等的供電，你把哪個小按鈕按上“ON”，哪個就有了電，甚至直接發(fā)光輸熱，你不必知道，這總開關上的按鈕是怎么出來電的，或是怎么按制到相關電器的，反正直接壓上就來電了。
這些個電燈，電視機等就是我們要使用的接口，小系統(tǒng)；這個總開關就是我們的外觀類，我們直接面對它操作即可。
2>. 還好比一個公司，有好幾個職能部門，老板哪一天需要各方面工作的執(zhí)行情況了，他就跑去一個個部門內(nèi)部，問個員工說這個某某事情辦得怎么樣了，如果問對人了能直接給老板答案，要是不是這個人負責的，他還會跟老板說，哦，這事是誰誰負責的，老板還得跑去問下那人，多麻煩。
如果每個職能部門設個主管負責人，老板直接去找它了解情況就可以了，老板也不用關心這個負責人是怎么知道這些的，他只要想了解的這么1,2,3件事情的情況跟進展即可。
實例源碼
現(xiàn)在按第二個實例場景實現(xiàn)源碼：
1. 幾個部門職能類:
部門1 (業(yè)務部門):
function BusinessDept() {
this.manager = '陳經(jīng)理'; //負責人
}
BusinessDept.prototype = {
MonthSales: function() {
console.log(this.manager + '說：這個月銷售額是xxx');
},
NextPlan: function() {
console.log(this.manager + '說：接下來的計劃是這樣的,xxxx');
}
}
部門2(研發(fā)部門):
function RDdept() {
this.manager = '黃經(jīng)理';
}
RDdept.prototype = {
progress: function() {
console.log(this.manager + '說：目前的項目情況跟進展是這樣的xxx');
},
deptPlan: function() {
console.log(this.manager + '說：接下來的部門規(guī)劃是這樣的xxx');
}
}
以上是各部門主管所要回答老板的問題;
接下來建立外觀類，用于組織老板想問的問題；
function Facade() {
this.business = new BusinessDept() ;
this.rddept = new RDdept();
}
Facade.prototype = {
DeptSituation: function() {
this.business.MonthSales(); //銷售部經(jīng)理先說;
this.rddept.progress();
},
deptPlan: function() {
this.business.NextPlan(); //報告接下來計劃;
this.rddept.deptPlan();
}
}
接下來老板把兩位經(jīng)理叫到面前，開始問話了:
var facade = new Facade();
console.log('老板問：現(xiàn)在介紹下自己部門的情況?');
facade.DeptSituation();
console.log('老板問：接下來有什么規(guī)劃?');
facade.deptPlan();
其他說明
使用外觀模式，可以使得接口或類之間解耦，使得類之間不必產(chǎn)生依賴，不必要使用時得A包含B，或是B一定得包含A，這違反了關閉修改原則，使用中間層外觀類包裝，可以使得接口調用變得簡單，使用子接口或子系統(tǒng)對象調用變得更加自由可組織。
外觀模式經(jīng)常出現(xiàn)我們的編程中，外觀模式經(jīng)常使用在架構系統(tǒng)的模式定義中出現(xiàn)，我們的系統(tǒng)要使用第三方的接口服務，也經(jīng)常再加層外觀層用于組織可用的業(yè)務接口;
- 設計模式中的facade外觀模式在JavaScript開發(fā)中的運用
- 深入理解JavaScript系列（30）：設計模式之外觀模式詳解
- JavaScript設計模式之外觀模式實例
- javascript設計模式 – 裝飾模式原理與應用實例分析
- javascript設計模式 – 組合模式原理與應用實例分析
- javascript設計模式 – 橋接模式原理與應用實例分析
- javascript設計模式 – 適配器模式原理與應用實例分析
- JS中間件設計模式的深入探討與實例分析
- javascript設計模式 – 建造者模式原理與應用實例分析
- javascript設計模式 – 原型模式原理與應用實例分析
- javascript設計模式 – 外觀模式原理與用法實例分析
相關文章
這篇文章主要為大家詳細介紹了微信小程序用swiper實現(xiàn)滑動刻度尺，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JS閉包的學習心得，以及分析其中遇到的問題，需要的朋友跟著參考下吧。2018-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)搜索提示框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了javascript canvas封裝動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
有人認為Javascript缺乏隱藏對象細節(jié)信息的特性，因為Javascript的對象沒有私有變量和私有方法。這其實是個誤解，Javascript對象是可以有這些私有成員的。下面我們來詳細了解一下吧2019-05-05
這篇文章主要介紹了利用try-catch判斷變量是已聲明未賦值還是未聲明,需要的朋友可以參考下2014-03-03
用ThreeJS加載大模型總要遇到性能問題,性能優(yōu)化一般包括加載性能優(yōu)化、渲染幀率優(yōu)化、內(nèi)存優(yōu)化等,下面這篇文章主要給大家介紹了關于Three.js渲染模型卡頓問題的一些優(yōu)化辦法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了JS函數(shù)this的用法,實例分析了javascript中this的功能、定義及相關使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家介紹了JavaScript中可選鏈(?.)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了JS獲取表格視圖所選行號的ids過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02