外觀模式_JavaScript設計模式8

一.外觀模式

對底層組件接口進行二次封裝（三手、四手的也算二手），提供更易用的高層接口，這是外觀模式的核心思想。

外觀，很容易聯想到化妝，不過這裏不是爲了好看，而只是圖好用。

二.具體實現

---

var mod1 = { fun1: function() { // ... }, fun2: function() { // ... } // ... } var mod2 = { fun1: function() { // ... }, fun2: function() { // ... } // ... } // ... // facade var facade = { c: true, newFun1: function() { mod1.fun2(); if (this.c) { mod1.fun1(); } // ... }, newFun2: function() { mod2.fun1(); mod2.fun2(); mod1.fun1(); if (this.c) { mod1.fun2(); } // ... } // ... } // invoke facade facade.newFun1(); // invoke mods // mod1.fun2(); // if (c) { // mod1.fun1(); // } // ...

---

對低層模塊的接口進行進一步抽象，封裝出簡單易用的外觀，封裝是沒有盡頭的，從模塊內部到模塊間，到子系統間，再到系統自己，只要願意接着作，能夠添上n層封裝，甚至能夠用外觀模式解決方法名過長的問題，例如：

---

var d = { byId: function(strId) { return document.getElementById(strId); }, byClass: function(strClass) { return document.getElementsByClassName(strClass); }, byTag: function(strTag) { return document.getElementsByName(strTag); } // ... } // test d.byId('test').innerHTML = 'test facade';

---

三.外觀模式的優缺點

優勢

書上有一句比較貼切的話：

不須要關注實現細節，並且更容易使用

缺點

多層封裝意味着長調用鏈，存在性能成本，若是對性能要求很高，天然是封裝層數越少越好，越靠近底層執行效率越高，使用外觀模式時，可能須要考慮是否值得二次封裝（性能成本是否能夠接受）

至於JQuery的$比原生JS實現慢多少，答案是：其實沒有你想象的那麼慢

關於外觀模式的更多信息，請查看黯羽輕揚：設計模式以外觀模式（Facade Pattern）

參考資料

• 《JavaScript設計模式》

本文分享自微信公衆號 - 前端向後（backward-fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。