如何使用javascript中的外觀模式

發(fā)布時間：2020-08-04 09:27:07 來源：億速云閱讀：116 作者：小豬欄目：web開發(fā)

這篇文章主要講解了如何使用javascript中的外觀模式，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

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

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

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

示例：

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(); //畫一個三角形

是不是豁然開朗？其實我們?nèi)粘Ｗ畛Ｓ玫木褪峭庥^模式。我們的工具類，jquery，包括一些瀏覽器兼容，我們都會把他們封裝到一個對象里。

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

外觀模式總結(jié)：

優(yōu)點：
* 對客戶端屏蔽了子系統(tǒng)組件，減少了客戶端所需處理的對象數(shù)目，并且提升使用便捷度。
* 實現(xiàn)了客戶端與子系統(tǒng)之間的松耦合關(guān)系，這使得子系統(tǒng)的變化不會影響客戶端。

缺點：
* 不能姮好的限制客戶端直接使用子系統(tǒng)類
* 如果設(shè)計不當，增加新的子系統(tǒng)可能需要修改外觀類的源代碼，違背了開關(guān)原則

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

看完上述內(nèi)容，是不是對如何使用javascript中的外觀模式有進一步的了解，如果還想學習更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

如何使用javascript中的外觀模式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽