javascript設(shè)計(jì)模式 ? 外觀模式原理與用法實(shí)例分析
本文實(shí)例講述了javascript設(shè)計(jì)模式 ? 外觀模式原理與用法。分享給大家供大家參考,具體如下:
介紹:外觀模式是一種使用頻率非常高的結(jié)構(gòu)型設(shè)計(jì)模式,它通過(guò)引入一個(gè)外觀角色來(lái)簡(jiǎn)化客戶端與子系統(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)景:我們還是用畫(huà)圓的方式來(lái)介紹下外觀模式。
示例:
var Rectangle = function(){ this.draw = function(){ console.log(’畫(huà)一個(gè)矩形’); }} var Circle = function(){ this.draw = function(){ console.log(’畫(huà)一個(gè)圓’); }} var Triangle = function(){ this.draw = function(){ console.log(’畫(huà)一個(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(); //畫(huà)一個(gè)矩形shapeMaker.drawCircle(); //畫(huà)一個(gè)圓shapeMaker.drawTriangle(); //畫(huà)一個(gè)三角形
是不是豁然開(kāi)朗?其實(shí)我們?nèi)粘W畛S玫木褪峭庥^模式。我們的工具類(lèi),jquery,包括一些瀏覽器兼容,我們都會(huì)把他們封裝到一個(gè)對(duì)象里。
這就是外觀模式提倡的把復(fù)雜的操作封裝到一個(gè)簡(jiǎn)單接口中。幾乎所有的涉及多個(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):* 不能??玫南拗瓶突Ф酥苯郵褂米酉低忱?br>* 如果設(shè)計(jì)不當(dāng),增加新的子系統(tǒng)可能需要修改外觀類(lèi)的源代碼,違背了開(kāi)關(guān)原則
適用場(chǎng)景:* 需要對(duì)一個(gè)復(fù)雜子系統(tǒng)提供一個(gè)簡(jiǎn)單入口時(shí)可以采用外觀模式
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章:
1. IntelliJ IDEA恢復(fù)刪除文件的方法2. IntelliJ IDEA配置Tomcat服務(wù)器的方法3. docker鏡像完全卸載的操作步驟4. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程5. idea刪除項(xiàng)目的操作方法6. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法7. IntelliJ IDEA導(dǎo)入jar包的方法8. idea導(dǎo)入maven項(xiàng)目的方法9. idea重置默認(rèn)配置的方法步驟10. Docker 部署 Prometheus的安裝詳細(xì)教程

網(wǎng)公網(wǎng)安備