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

介紹：模板方法模式是結(jié)構(gòu)最簡(jiǎn)單的行為型設(shè)計(jì)模式，在其結(jié)構(gòu)中只存在父類與子類之間的繼承關(guān)系。使用模板方法模式，可以將一些復(fù)雜流程的實(shí)現(xiàn)步驟封裝在一系列基本方法中。

定義：定義一個(gè)操作中算法的框架，而將一些步驟延遲到子類中，模板方法使得子類可以不改變一個(gè)算法的結(jié)構(gòu)即可重定義該算法的某些特定步驟。模板方法是一種類行為型模式。

場(chǎng)景：我們?cè)O(shè)計(jì)一個(gè)游戲機(jī)，用來(lái)運(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

在這個(gè)例子里，Game稱為抽象類，抽象類內(nèi)部定義了一個(gè)模板方法play，play的內(nèi)部定義了算法的架構(gòu)，算法的執(zhí)行順序，只有子類將步驟補(bǔ)齊后才能執(zhí)行模板方法。
LeagueofLegends，CrossFire這兩個(gè)類稱為子類，繼承自Game，他們的任務(wù)是實(shí)現(xiàn)模板方法中的步驟。
initialize，startPlay，endPlay，uninstall稱為基本方法，用來(lái)具體實(shí)現(xiàn)每個(gè)步驟

模板方法模式總結(jié)：

優(yōu)點(diǎn)：
* 模板方法模式是一種代碼復(fù)用技術(shù)，將公共行為放在父類中，而通過其子類來(lái)實(shí)現(xiàn)不同的行為，他鼓勵(lì)恰當(dāng)使用繼承來(lái)實(shí)現(xiàn)代碼復(fù)用。
* 模板方法可以實(shí)現(xiàn)一種反向控制結(jié)構(gòu)，通過子類覆蓋父類的方法來(lái)決定某一步驟是否執(zhí)行。

缺點(diǎn)：
* 需要為每一個(gè)基本方法的不同實(shí)現(xiàn)提供一個(gè)子類，如果父類中可變的基本方法太多，將會(huì)導(dǎo)致類的個(gè)數(shù)增加，系統(tǒng)更加龐大。

適用場(chǎng)景：
* 對(duì)一些復(fù)雜的算法進(jìn)行分割，將其中固定不變的布馮設(shè)計(jì)為模板方法和父類基本方法，改變的細(xì)節(jié)由子類實(shí)現(xiàn)。
* 各子類的公共行為應(yīng)當(dāng)被提取出來(lái)并集中帶一個(gè)父類中，利于代碼復(fù)用。
* 需要子類決定父類的某個(gè)步驟是否執(zhí)行，實(shí)現(xiàn)子類對(duì)父類的反向控制。

感興趣的朋友可以使用在線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ì)有所幫助。