資訊專欄INFORMATION COLUMN
模板方法模式
定義: 在繼承的基礎上, 在父類中定義好執行的算法。
泡茶和泡咖啡
來對比下泡茶和泡咖啡過程中的異同
步驟 泡茶 泡咖啡
1 燒開水 燒開水
2 浸泡茶葉 沖泡咖啡
3 倒入杯子 倒入杯子
4 加檸檬 加糖
可以清晰地看出僅僅在步驟 2 和 4 上有細微的差別, 下面著手實現:
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(){//模板方法模板核心：父類上定義好執行算法
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()
// 燒開水
// 沖泡咖啡
// 倒入杯子
// 加糖
鉤子
假如客人不想加佐料(糖、檸檬)怎么辦, 這時可以引人鉤子來實現之, 實現邏輯如下:
Drinks.prototype.ifNeedFlavour = function(){//加上鉤子
return true
}
Drinks.prototype.init = function(){
//模板方法模式核心：在父類上定義好執行算法
this.firstStep()
this.secondStep()
this.thirdStep()
if(this.ifNeedFlavour){//默認是true 也就是要加調料
this.fourthStep()
}
}
const Coffee = function(){}
Coffee.prototype = new Drinks()
Coffee.prototype.ifNeedFlavour = function(){
return window.confirm("是否需要佐料嗎")//彈框選擇是否需要佐料
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106691.html
摘要：本書的這一部分將為隨后的章節打下基礎，會涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會使用未經壓縮的，開發友好的版本，在的上。作用域也可以針對特定的視圖來擴展數據和特定的功能。 上一篇：【譯】《精通使用AngularJS開發Web App》（一） 下一篇：【譯】《精通使用AngularJS開發Web App》（三） 原版書名：Mastering Web Application D...
摘要：命令執行時，構造函數內部的，就代表了新生成的實例對象，表示實例對象有一個屬性，值是。因此，應該非常小心，避免不使用命令直接調用構造函數。命令返回這個對象，而不是對象。JavaScript 面向對象編程的基礎知識篇 1 。 1. 概述 面向對象編程（Object Oriented Programming，縮寫為 OOP）是目前主流的編程范式。 那么，對象（object）到底是什么？ 對象是單...
摘要：當我們的視圖和數據任何一方發生變化的時候，我們希望能夠通知對方也更新，這就是所謂的數據雙向綁定。返回值返回傳入函數的對象，即第一個參數該方法重點是描述，對象里目前存在的屬性描述符有兩種主要形式數據描述符和存取描述符。 前言 談起當前前端最熱門的 js 框架，必少不了 Vue、React、Angular，對于大多數人來說，我們更多的是在使用框架，對于框架解決痛點背后使用的基本原理往往關注...
摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言 面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...
閱讀 1315·2023-04-26 01:28
閱讀 2065·2021-11-08 13:28
閱讀 2315·2021-10-12 10:17
閱讀 2280·2021-09-28 09:46
閱讀 4141·2021-09-09 09:33
閱讀 3719·2021-09-04 16:40
閱讀 1076·2019-08-29 15:21
閱讀 2689·2019-08-26 17:17
