javascript 设计模式之模板方法模式

邱勇发布于2019-08-26 10:44 / 912人阅读

模板方法模式

定义: 在继承的基础上, 在父类中定义好执行的算法。
泡茶和泡咖啡
来对比下泡茶和泡咖啡过程中的异同

步骤泡茶泡咖啡
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("是否需要佐料吗")//弹框选择是否需要佐料
  }

海外云主机私有云模板方法模式 Java设计模式之（五）——代理模式工厂方法模式 javascript设计模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106691.html

【译】《精通使用AngularJS开发Web App》（二） --- 框架概览，双向数据绑定，MVC

摘要：本书的这一部分将为随后的章节打下基础，会涵盖模板，模块化，和依赖注入。本书的小例子中我们会使用未经压缩的，开发友好的版本，在的上。作用域也可以针对特定的视图来扩展数据和特定的功能。上一篇：【译】《精通使用AngularJS开发Web App》（一）下一篇：【译】《精通使用AngularJS开发Web App》（三）原版书名：Mastering Web Application D...

geekidentity 2019-08-19 14:26 评论0 收藏0
JavaScript之 new 命令

摘要：命令执行时，构造函数内部的，就代表了新生成的实例对象，表示实例对象有一个属性，值是。因此，应该非常小心，避免不使用命令直接调用构造函数。命令返回这个对象，而不是对象。JavaScript 面向对象编程的基础知识篇 1 。 1. 概述面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。那么，对象（object）到底是什么？对象是单...

desdik 2019-05-23 11:57 评论0 收藏0
JavaScript 进阶之深入理解数据双向绑定

摘要：当我们的视图和数据任何一方发生变化的时候，我们希望能够通知对方也更新，这就是所谓的数据双向绑定。返回值返回传入函数的对象，即第一个参数该方法重点是描述，对象里目前存在的属性描述符有两种主要形式数据描述符和存取描述符。前言谈起当前前端最热门的 js 框架，必少不了 Vue、React、Angular，对于大多数人来说，我们更多的是在使用框架，对于框架解决痛点背后使用的基本原理往往关注...

sarva 2019-08-20 18:28 评论0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

cfanr 2019-08-20 16:33 评论0 收藏0