本文例項講述了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，包括一些瀏覽器相容，我們都會把他們封裝到一個物件裡。

這就是外觀模式提倡的把複雜的操作封裝到一個簡單介面中。幾乎所有的涉及多個業務物件互動的場景都可以考慮使用外觀模式進行重構。

外觀模式總結：

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

缺點：
* 不能姮好的限制客戶端直接使用子系統類
* 如果設計不當，增加新的子系統可能需要修改外觀類的原始碼，違背了開關原則

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

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

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

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