學(xué)習(xí)JavaScript設(shè)計(jì)模式之模板方法模式
一、定義
模板方法是基于繼承的設(shè)計(jì)模式,可以很好的提高系統(tǒng)的擴(kuò)展性。 java中的抽象父類、子類
模板方法有兩部分結(jié)構(gòu)組成,第一部分是抽象父類,第二部分是具體的實(shí)現(xiàn)子類。
二、示例
Coffee or Tea
(1) 把水煮沸
(2) 用沸水浸泡茶葉
(3) 把茶水倒進(jìn)杯子
(4) 加檸檬
/* 抽象父類:飲料 */ var Beverage = function(){}; // (1) 把水煮沸 Beverage.prototype.boilWater = function() { console.log("把水煮沸"); }; // (2) 沸水浸泡 Beverage.prototype.brew = function() { throw new Error("子類必須重寫(xiě)brew方法"); }; // (3) 倒進(jìn)杯子 Beverage.prototype.pourInCup = function() { throw new Error("子類必須重寫(xiě)pourInCup方法"); }; // (4) 加調(diào)料 Beverage.prototype.addCondiments = function() { throw new Error("子類必須重寫(xiě)addCondiments方法"); }; /* 模板方法 */ Beverage.prototype.init = function() { this.boilWater(); this.brew(); this.pourInCup(); this.addCondiments(); } /* 實(shí)現(xiàn)子類 Coffee*/ var Coffee = function(){}; Coffee.prototype = new Beverage(); // 重寫(xiě)非公有方法 Coffee.prototype.brew = function() { console.log("用沸水沖泡咖啡"); }; Coffee.prototype.pourInCup = function() { console.log("把咖啡倒進(jìn)杯子"); }; Coffee.prototype.addCondiments = function() { console.log("加牛奶"); }; var coffee = new Coffee(); coffee.init();
通過(guò)模板方法模式,在父類中封裝了子類的算法框架。這些算法框架在正常狀態(tài)下是適用大多數(shù)子類的,但也會(huì)出現(xiàn)“個(gè)性”子類。
如上述流程,加調(diào)料是可選的。
鉤子方法可以解決這個(gè)問(wèn)題,放置鉤子是隔離變化的一種常見(jiàn)手段。
/* 添加鉤子方法 */ Beverage.prototype.customerWantsCondiments = function() { return true; }; Beverage.prototype.init = function() { this.boilWater(); this.brew(); this.pourInCup(); if(this.customerWantsCondiments()) { this.addCondiments(); } } /* 實(shí)現(xiàn)子類 Tea*/ var Tea = function(){}; Tea.prototype = new Beverage(); // 重寫(xiě)非公有方法 Tea.prototype.brew = function() { console.log("用沸水沖泡茶"); }; Tea.prototype.pourInCup = function() { console.log("把茶倒進(jìn)杯子"); }; Tea.prototype.addCondiments = function() { console.log("加牛奶"); }; Tea.prototype.customerWantsCondiments = function() { return window.confirm("需要添加調(diào)料嗎?"); }; var tea = new Tea(); tea.init();
JavaScript沒(méi)有提供真正的類式繼承,繼承是通過(guò)對(duì)象與對(duì)象之間的委托來(lái)實(shí)現(xiàn)的。
三、“好萊塢原則”:別調(diào)用我們,我們會(huì)調(diào)用你
典型使用場(chǎng)景:
(1)模板方法模式:使用該設(shè)計(jì)模式意味著子類放棄了對(duì)自己的控制權(quán),而是改為父類通知子類。作為子類,只負(fù)責(zé)提供一些設(shè)計(jì)上的細(xì)節(jié)。
(2)觀察者模式:發(fā)布者把消息推送給訂閱者。
(3)回調(diào)函數(shù):ajax異步請(qǐng)求,把需要執(zhí)行的操作封裝在回調(diào)函數(shù)里,當(dāng)數(shù)據(jù)返回后,這個(gè)回調(diào)函數(shù)才被執(zhí)行。
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- JavaScript設(shè)計(jì)模式之模板方法模式原理與用法示例
- javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 狀態(tài)模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 策略模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 備忘錄模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 中介者模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 命令模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 解釋器模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 裝飾模式原理與應(yīng)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 組合模式原理與應(yīng)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 模板方法模式原理與用法實(shí)例分析
相關(guān)文章
IE與FireFox的JavaScript兼容問(wèn)題解決辦法
本篇文章主要是對(duì)IE與FireFox的JavaScript兼容問(wèn)題解決辦法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12關(guān)于javaScript注冊(cè)click事件傳遞參數(shù)的不成功問(wèn)題
在javaScript中給一個(gè)html元素注冊(cè)click事件處理函數(shù)時(shí),比如給該處理函數(shù)傳3個(gè)參數(shù)。可是不管是使用下面那種方式都不能給事件處理函數(shù)傳遞參數(shù)2014-07-07基于javascript實(shí)現(xiàn)最簡(jiǎn)單選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)最簡(jiǎn)單選項(xiàng)卡切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02JavaScript隨機(jī)生成信用卡卡號(hào)的方法
這篇文章主要介紹了JavaScript隨機(jī)生成信用卡卡號(hào)的方法,涉及javascript操作隨機(jī)隨機(jī)數(shù)生成信用卡卡號(hào)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)
JSONP原理就是動(dòng)態(tài)插入帶有跨域url的script標(biāo)簽,然后調(diào)用回調(diào)函數(shù),把我們需要的json數(shù)據(jù)作為參數(shù)傳入,通過(guò)一些邏輯把數(shù)據(jù)顯示在頁(yè)面上,這篇文章主要給大家介紹了關(guān)于jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)的相關(guān)資料,需要的朋友可以參考下2022-01-01javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)?lái)一篇javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12