快捷導(dǎo)航

javascript設(shè)計(jì)模式 – 外觀模式原理與用法實(shí)例分析

更新時(shí)間：2020年04月15日 08:33:20 作者：李小強(qiáng)

這篇文章主要介紹了javascript設(shè)計(jì)模式 – 外觀模式,結(jié)合實(shí)例形式分析了javascript外觀模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了javascript設(shè)計(jì)模式 – 外觀模式原理與用法。分享給大家供大家參考，具體如下：

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

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

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

示例：

var Rectangle = function(){
  this.draw = function(){
    console.log('畫一個(gè)矩形');
  }
}
 
var Circle = function(){
  this.draw = function(){
    console.log('畫一個(gè)圓');
  }
}
 
var Triangle = function(){
  this.draw = function(){
    console.log('畫一個(gè)三角形');
  }
}
 
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(); //畫一個(gè)矩形
shapeMaker.drawCircle(); //畫一個(gè)圓
shapeMaker.drawTriangle(); //畫一個(gè)三角形

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

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

外觀模式總結(jié)：

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

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

適用場(chǎng)景：
* 需要對(duì)一個(gè)復(fù)雜子系統(tǒng)提供一個(gè)簡單入口時(shí)可以采用外觀模式

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: