好程序员web前端教程分享js模板模式

简介: 什么是模板模式?模板模式是抽象父类定义了子类需要重写的相关方法。 而这些方法,仍然是通过父类方法调用的。 根据描述,“模板”的思想体现在:父类定义的接口方法。 除此之外,子类方法的调用,也是被父类控制的。

什么是模板模式?

模板模式是抽象父类定义了子类需要重写的相关方法。 而这些方法,仍然是通过父类方法调用的。 根据描述,“模板”的思想体现在:父类定义的接口方法。 除此之外,子类方法的调用,也是被父类控制的。

应用场景

一些系统的架构或者算法骨架,由“BOSS”编写抽象方法,具体的实现,交给“小弟们”实现。 而绝对是不是用“小弟们”的方法,还是看“BOSS”的心情。 不是很恰当的比喻哈~

ES6 实现

Animal是抽象类,Dog和Cat分别具体实现了eat()和sleep()方法。 Dog或Cat实例可以通过live()方法调用eat()和sleep()。

注意:Cat和Dog实例会被自动添加live()方法。不暴露live()是为了防止live()被子类重写,保证父类的控制权。

class Animal {
constructor() {

// this 指向实例
this.live = () => {
  this.eat();
  this.sleep();
};

}

eat() {

throw new Error("模板类方法必须被重写");

}

sleep() {

throw new Error("模板类方法必须被重写");

}
}

class Dog extends Animal {
constructor(...args) {

super(...args);

}
eat() {

console.log("狗吃粮");

}
sleep() {

console.log("狗睡觉");

}
}

class Cat extends Animal {
constructor(...args) {

super(...args);

}
eat() {

console.log("猫吃粮");

}
sleep() {

console.log("猫睡觉");

}
}

/ 以下为测试代码 */

// 此时, Animal中的this指向dog
let dog = new Dog();
dog.live();

// 此时, Animal中的this指向cat
let cat = new Cat();
cat.live();
好程序员web前端分享

相关文章
|
11天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
4天前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
19 6
|
1天前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
9 0
|
1天前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
9 0
|
1天前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
13 0
|
10天前
|
JSON JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的完美结合
【9月更文挑战第28天】在现代Web开发中,Node.js和Express框架的结合为创建高性能、易扩展的应用提供了强有力的支持。本文将深入探讨如何利用这两种技术构建一个简单但功能强大的Web服务,同时提供代码示例以加深理解。
|
26天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
30 0
|
4月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
76 2
|
4月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记