javascript設計模式 ? 外觀模式原理與用法實例分析

本文實例講述了javascript設計模式 ? 外觀模式原理與用法。分享給大家供大家參考，具體如下：

介紹：外觀模式是一種使用頻率非常高的結構型設計模式，它通過引入一個外觀角色來簡化客戶端與子系統之間的交互，為復雜的子系統調用提供一個統一的入口，隱藏系統復雜度，降低子系統與客戶端的耦合度。

定義： 為子系統中的一組接口提供一個統一的入口。外觀模式定義了一個高層接口，這個接口使得這一子系統更加容易使用。

場景：我們還是用畫圓的方式來介紹下外觀模式。

示例：

var Rectangle = function(){ this.draw = function(){ console.log(’畫一個矩形’); }} var Circle = function(){ this.draw = function(){ console.log(’畫一個圓’); }} var Triangle = function(){ this.draw = function(){ console.log(’畫一個三角形’); }} var ShapeMaker = function(){ this.rectangle = new Rectangle(); this.circle = new Circle(); this.triangle = new Triangle(); this.drawRectangle = function(){ this.rectangle.draw(); } this.drawCircle = function(){ this.circle.draw(); } this.drawTriangle = function(){ this.triangle.draw(); }} var shapeMaker = new ShapeMaker(); shapeMaker.drawRectangle(); //畫一個矩形shapeMaker.drawCircle(); //畫一個圓shapeMaker.drawTriangle(); //畫一個三角形

是不是豁然開朗？其實我們日常最常用的就是外觀模式。我們的工具類，jquery，包括一些瀏覽器兼容，我們都會把他們封裝到一個對象里。

這就是外觀模式提倡的把復雜的操作封裝到一個簡單接口中。幾乎所有的涉及多個業務對象交互的場景都可以考慮使用外觀模式進行重構。

外觀模式總結：

優點：* 對客戶端屏蔽了子系統組件，減少了客戶端所需處理的對象數目，并且提升使用便捷度。* 實現了客戶端與子系統之間的松耦合關系，這使得子系統的變化不會影響客戶端。

缺點：* 不能??玫南拗瓶突Ф酥苯郵褂米酉低忱?br>* 如果設計不當，增加新的子系統可能需要修改外觀類的源代碼，違背了開關原則

適用場景：* 需要對一個復雜子系統提供一個簡單入口時可以采用外觀模式

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。