資訊專欄INFORMATION COLUMN
模板方法模式
定義: 在繼承的基礎(chǔ)上, 在父類中定義好執(zhí)行的算法。
泡茶和泡咖啡
來對(duì)比下泡茶和泡咖啡過程中的異同
步驟 泡茶 泡咖啡
1 燒開水 燒開水
2 浸泡茶葉 沖泡咖啡
3 倒入杯子 倒入杯子
4 加檸檬 加糖
可以清晰地看出僅僅在步驟 2 和 4 上有細(xì)微的差別, 下面著手實(shí)現(xiàn):
const Drinks = function(){}
Drinks.prototype.firstStep=function(){
console.log("燒開水")
}
Drinks.prototype.secondStep =function(){}
Drinks.prototype.thirdStep = function(){
console.log("倒入杯子")
}
Drinks.prototype.fourthStep = function(){}
Drinks.prototype.init = function(){//模板方法模板核心：父類上定義好執(zhí)行算法
this.firstStep()
this.secondStep()
this.thirdStep()
this.fourthStep()
}
const Tea=function(){}
Tea.prototype=new Drinks
Tea.prototype.secondStep = function(){
console.log("浸泡茶葉")
}
Tea.prototype.fourthStep =function(){
console.log("加檸檬")
}
const Coffee =function(){}
Coffee.prototype = new Drinks
Coffee.prototype.secondStep = function(){
console.log("沖泡咖啡")
}
Coffee.prototype.fourthStep = function(){
console.log("加糖")
}
const tea = new Tea()
tea.init()
// 燒開水
// 浸泡茶葉
// 倒入杯子
// 加檸檬
const coffee =new Coffee()
coffee.init()
// 燒開水
// 沖泡咖啡
// 倒入杯子
// 加糖
鉤子
假如客人不想加佐料(糖、檸檬)怎么辦, 這時(shí)可以引人鉤子來實(shí)現(xiàn)之, 實(shí)現(xiàn)邏輯如下:
Drinks.prototype.ifNeedFlavour = function(){//加上鉤子
return true
}
Drinks.prototype.init = function(){
//模板方法模式核心：在父類上定義好執(zhí)行算法
this.firstStep()
this.secondStep()
this.thirdStep()
if(this.ifNeedFlavour){//默認(rèn)是true 也就是要加調(diào)料
this.fourthStep()
}
}
const Coffee = function(){}
Coffee.prototype = new Drinks()
Coffee.prototype.ifNeedFlavour = function(){
return window.confirm("是否需要佐料嗎")//彈框選擇是否需要佐料
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106691.html
摘要：本書的這一部分將為隨后的章節(jié)打下基礎(chǔ)，會(huì)涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會(huì)使用未經(jīng)壓縮的，開發(fā)友好的版本，在的上。作用域也可以針對(duì)特定的視圖來擴(kuò)展數(shù)據(jù)和特定的功能。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（一） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（三） 原版書名：Mastering Web Application D...
摘要：命令執(zhí)行時(shí)，構(gòu)造函數(shù)內(nèi)部的，就代表了新生成的實(shí)例對(duì)象，表示實(shí)例對(duì)象有一個(gè)屬性，值是。因此，應(yīng)該非常小心，避免不使用命令直接調(diào)用構(gòu)造函數(shù)。命令返回這個(gè)對(duì)象，而不是對(duì)象。JavaScript 面向?qū)ο缶幊痰幕A(chǔ)知識(shí)篇 1 。 1. 概述 面向?qū)ο缶幊蹋∣bject Oriented Programming，縮寫為 OOP）是目前主流的編程范式。 那么，對(duì)象（object）到底是什么？ 對(duì)象是單...
摘要：當(dāng)我們的視圖和數(shù)據(jù)任何一方發(fā)生變化的時(shí)候，我們希望能夠通知對(duì)方也更新，這就是所謂的數(shù)據(jù)雙向綁定。返回值返回傳入函數(shù)的對(duì)象，即第一個(gè)參數(shù)該方法重點(diǎn)是描述，對(duì)象里目前存在的屬性描述符有兩種主要形式數(shù)據(jù)描述符和存取描述符。 前言 談起當(dāng)前前端最熱門的 js 框架，必少不了 Vue、React、Angular，對(duì)于大多數(shù)人來說，我們更多的是在使用框架，對(duì)于框架解決痛點(diǎn)背后使用的基本原理往往關(guān)注...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
閱讀 1328·2023-04-26 01:28
閱讀 2084·2021-11-08 13:28
閱讀 2332·2021-10-12 10:17
閱讀 2309·2021-09-28 09:46
閱讀 4154·2021-09-09 09:33
閱讀 3734·2021-09-04 16:40
閱讀 1122·2019-08-29 15:21
閱讀 2700·2019-08-26 17:17
