JavaScript設(shè)計(jì)模式之模板方法模式原理與用法示例
本文實(shí)例講述了JavaScript設(shè)計(jì)模式之模板方法模式原理與用法。分享給大家供大家參考,具體如下:
一、模板方法模式:一種只需使用繼承就可以實(shí)現(xiàn)的非常簡(jiǎn)單的模式。
二、模板方法模式由兩部分組成,第一部分是抽象父類,第二部分是具體的實(shí)現(xiàn)子類。
三、以設(shè)計(jì)模式中的Coffee or Tea來說明模板方法模式:
1、模板Brverage,代碼如下:
var Beverage = function(){}; Beverage.prototype.boilWater = function(){ console.log('把水煮沸'); }; Beverage.prototype.pourInCup = function(){ throw new Error( '子類必須重寫pourInCup' ); }; Beverage.prototype.addCondiments = function(){ throw new Error( '子類必須重寫addCondiments方法' ); }; Beverage.prototype.customerWantsConditions = function(){ return true; //默認(rèn)需要調(diào)料 }; Beverage.prototype.init = function(){ this.boilWater(); this.brew(); this.pourInCup(); if(this.customerWantsCondiments()){ //如果掛鉤返回true,則需要調(diào)料 this.addCondiments(); } };
2、子類繼承父類
var CoffeeWithHook = function(){}; CoffeeWithHook.prototype = new Beverage(); CoffeeWithHook.prototype.brew = function(){ console.log('把咖啡倒進(jìn)杯子'); }; CoffeeWithHook.prototype.addCondiments = function(){ console.log('加糖和牛奶'); }; CoffeeWithHook.prototype.customerWantsCondiments = function(){ return window.confirm( '請(qǐng)問需要調(diào)料嗎?' ); };
3、煮一杯咖啡
var coffeeWithHook = new CoffeeWithHook(); coffeeWithHook.init();
四、另一種寫法
var Beverage = function( param ){ var boilWater = function(){ console.log( '把水煮沸' ); }; var brew = param.brew || function(){ throw new Error( '必須傳遞brew方法' ); }; var pourInCup = param.pourInCup || function(){ throw new Error( '必須傳遞pourInCup方法' ); }; var addCondiments = param.addCondiments || function(){ throw new Error( '必須傳遞addCondiments方法' ); }; var F = function(){}; F.prototype.init = function(){ boilWater(); brew(); pourInCup(); addCondiments(); }; return F; }; var Coffee = Beverage({ brew: function(){ console.log( '用沸水沖泡咖啡' ); }, pourInCup: function(){ console.log('把咖啡倒進(jìn)杯子'); }, addCondiments: function(){ console.log('加糖和牛奶'); } }); var coffee = new Coffee(); coffee.init();
上述代碼使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行結(jié)果:
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 學(xué)習(xí)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)文章
JavaScript實(shí)現(xiàn)獲取網(wǎng)絡(luò)通信進(jìn)度
這篇文章主要為大家詳細(xì)介紹了如何使用Fetch?API和XMLHttpRequest(XHR)來執(zhí)行網(wǎng)絡(luò)請(qǐng)求,并重點(diǎn)說明如何獲取這兩種方法的網(wǎng)絡(luò)請(qǐng)求進(jìn)度,感興趣的可以了解下2023-12-12js將滾動(dòng)條滾動(dòng)到指定位置的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s將滾動(dòng)條滾動(dòng)到指定位置的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06微信小程序自定義yPicker組件實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能
這篇文章主要介紹了微信小程序自定義yPicker組件分析及省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法
這篇文章主要介紹了小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05