javascript設(shè)計模式 – 模板方法模式原理與用法實例分析
本文實例講述了javascript設(shè)計模式 – 模板方法模式原理與用法。分享給大家供大家參考,具體如下:
介紹:模板方法模式是結(jié)構(gòu)最簡單的行為型設(shè)計模式,在其結(jié)構(gòu)中只存在父類與子類之間的繼承關(guān)系。使用模板方法模式,可以將一些復(fù)雜流程的實現(xiàn)步驟封裝在一系列基本方法中。
定義:定義一個操作中算法的框架,而將一些步驟延遲到子類中,模板方法使得子類可以不改變一個算法的結(jié)構(gòu)即可重定義該算法的某些特定步驟。模板方法是一種類行為型模式。
場景:我們設(shè)計一個游戲機(jī),用來運(yùn)行不同的游戲,
示例:
var Game = function(){ this.play = function(){ this.initialize(); this.startPlay(); this.endPlay(); this.uninstall(); } this.uninstall = function(){ console.log('uninstall Game') } } var CrossFire = function(){ this.initialize = function(){ console.log('CrossFire initialize') } this.startPlay = function(){ console.log('CrossFire startPlay') } this.endPlay = function(){ console.log('CrossFire endPlay') } } CrossFire.prototype = new Game(); var LeagueofLegends = function(){ this.initialize = function(){ console.log('LeagueofLegends initialize') } this.startPlay = function(){ console.log('LeagueofLegends startPlay') } this.endPlay = function(){ console.log('LeagueofLegends endPlay') } } LeagueofLegends.prototype = new Game(); var cf = new CrossFire(); cf.play(); // CrossFire initialize // CrossFire startPlay // CrossFire endPlay // uninstall Game var lol = new LeagueofLegends(); lol.play(); // LeagueofLegends initialize // LeagueofLegends startPlay // LeagueofLegends endPlay // uninstall Game
在這個例子里,Game稱為抽象類,抽象類內(nèi)部定義了一個模板方法play,play的內(nèi)部定義了算法的架構(gòu),算法的執(zhí)行順序,只有子類將步驟補(bǔ)齊后才能執(zhí)行模板方法。
LeagueofLegends,CrossFire這兩個類稱為子類,繼承自Game,他們的任務(wù)是實現(xiàn)模板方法中的步驟。
initialize,startPlay,endPlay,uninstall稱為基本方法,用來具體實現(xiàn)每個步驟
模板方法模式總結(jié):
優(yōu)點:
* 模板方法模式是一種代碼復(fù)用技術(shù),將公共行為放在父類中,而通過其子類來實現(xiàn)不同的行為,他鼓勵恰當(dāng)使用繼承來實現(xiàn)代碼復(fù)用。
* 模板方法可以實現(xiàn)一種反向控制結(jié)構(gòu),通過子類覆蓋父類的方法來決定某一步驟是否執(zhí)行。
缺點:
* 需要為每一個基本方法的不同實現(xiàn)提供一個子類,如果父類中可變的基本方法太多,將會導(dǎo)致類的個數(shù)增加,系統(tǒng)更加龐大。
適用場景:
* 對一些復(fù)雜的算法進(jìn)行分割,將其中固定不變的布馮設(shè)計為模板方法和父類基本方法,改變的細(xì)節(jié)由子類實現(xiàn)。
* 各子類的公共行為應(yīng)當(dāng)被提取出來并集中帶一個父類中,利于代碼復(fù)用。
* 需要子類決定父類的某個步驟是否執(zhí)行,實現(xiàn)子類對父類的反向控制。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
學(xué)習(xí)JavaScript圖片預(yù)加載模塊
這篇文章主要介紹了js實現(xiàn)圖片預(yù)加載的方法,內(nèi)容很詳細(xì),帶領(lǐng)大家全面認(rèn)識js圖片預(yù)加載模塊,感興趣的小伙伴們可以參考一下2016-11-11如何用JavaScript實現(xiàn)功能齊全的單鏈表詳解
這篇文章主要給大家介紹了關(guān)于如何用JavaScript實現(xiàn)功能齊全的單鏈表的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02微信小程序?qū)崿F(xiàn)頁面導(dǎo)航的方法詳解
這篇文章主要為大家詳細(xì)介紹一下微信小程序?qū)崿F(xiàn)頁面導(dǎo)航的幾種方法以及幫助大家掌握如何使用頁面之間的導(dǎo)航跳轉(zhuǎn),感興趣的可以了解一下2022-07-07你必須知道的Javascript知識點之"this指針"的應(yīng)用
本篇文章小編為大家介紹,你必須知道的Javascript知識點之"this指針"的應(yīng)用。需要的朋友參考下2013-04-04JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01