模板方法模式
2020/10/3 8:03:40
本文主要是介绍模板方法模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
模板方法模式
将不变的部分封装在父类中,而可变的部分则通过子类继承并进行扩展,就叫做模板方法模式。
使用场景
我们在使用UI框架的时候,可能会注意到:框架中的很多组件,比如按钮、提示框等,样式比较统一:
如果现在让我们去制作截图中的两种提示框,或者更多类似的提示框,我们完全可以抽象出一个最基础、最简单的一个提示框, 而其他的只要在此基础上增加一些功能即可。
首先,我们写一个最基础的提示框,它应该包括提示内容和一个确认按钮:
例子:
<style> .alert_style { width: 33%; border: 1px solid rgb(255, 152, 0); text-align: center; margin: 0 auto; } </style> // 创建基本提示框 let Alert = function (data) { // 创建提示框的容器 this.containerNode = document.createElement('div'); this.containerNode.className = 'alert_style'; // 创建提示内容的节点与文本 this.contentNode = document.createElement('p'); this.contentNode.innerHTML = data.content || ''; // 创建确认按钮的节点、文本与回调 this.confireBtnNode = document.createElement('button'); this.confireBtnNode.innerHTML = data.confireBtnTxt || '确认'; this.confireCallBack = data.confireCallBack || function () {}; }; // 创建基本方法 Alert.prototype = { // 初始化提示框 init() { this.containerNode.appendChild(this.contentNode); this.containerNode.appendChild(this.confireBtnNode); this.confireBtnNode.onclick = () => { this.confireCallBack(); this.hide(); }; document.body.appendChild(this.containerNode); this.hide(); }, // 隐藏提示框 hide() { this.containerNode.style.display = 'none'; }, // 显示提示框 show() { this.containerNode.style.display = 'block'; }, }; // 测试基础提示框 let panel = new Alert({ content: '基础框', confireBtnTxt: 'ok', confireCallBack() { alert('true'); }, }); panel.init(); panel.show();
接下来,如果我们想创建一个带有取消按钮的提示框,那么在此基础上,只需要进行拓展即可。
例子:
let CancelAlert = function (data) { // 继承基本提示框 Alert.call(this, data); // 创建取消按钮的节点、文本与回调 this.cancelBtnNode = document.createElement('button'); this.cancelBtnNode.innerHTML = data.cancelBtnTxt || '取消'; this.cancelCallBack = data.cancelCallBack || function () {}; }; // 继承基本提示框的方法 CancelAlert.prototype = Object.create(Alert.prototype); // 重写基本提示框的init方法 CancelAlert.prototype.init = function () { Alert.prototype.init.call(this); this.containerNode.appendChild(this.cancelBtnNode); this.cancelBtnNode.onclick = () => { this.cancelCallBack(); this.hide(); }; }; // 测试带有取消按钮的提示框 let panel = new CancelAlert({ content: '带有取消按钮的框', confireBtnTxt: 'ok', cancelBtnTxt: 'no', confireCallBack() { alert('true'); }, cancelCallBack() { alert('false'); }, }); panel.init(); panel.show();
如有错误,欢迎指正,本人不胜感激。
这篇关于模板方法模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求