模板方法模式(Template Method):父类中定义一组操作算法骨架,而降一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。

项目经理体验了各个页面的交互功能,发现每个页面的弹出框样式都不太一致,有的是高度高一些,有的是字体大了些,有的是按钮歪了些。 于是我们就需要将这些页面中的弹出框归一化。

我们首先要做的就是创建一个基本提示框基类,然后其他提示框类只需要在继承的基础上,拓展自己所需即可了吧,这样日后需求再变动我们修改基础类就可以使所有提示框的样式都统一化了。

基本提示框,它有一个提示内容、一个关闭按钮和确定按钮

// 模板类 基础提示框 data 渲染数据

var Alert = function(data) {
// 没有数据则返回,防止后面程序执行
if(!data) return;
// 设置内容
this.content = data.content;
// 创建提示框模板
this.panel = document.createElement('div');
// 创建提示内容组件
this.contentNode = document.createElement('p');
// 创建确定按钮组件
this.confirmBtn = document.createElement('span');
// 创建关闭按钮组件
this.closeBtn = document.createElement('b');
// 为提示框模板添加类
this.panel.className = 'alert';
// 为关闭按钮添加类
this.closeBtn.className = 'a-closse';
// 为确定按钮添加类
this.confirmBtn.className = 'a-confirm';
// 为确定按钮添加文案
this.confirmBtn.innerHTML = data.confirm || '确认';
// 为提示内容添加文本
this.contentNode.innerHTML = this.content;
// 点击确定按钮执行方法 如果data中有success方法则为success方法,否则为空函数
this.success = data.success || function();
// 点击关闭按钮执行方法
this.fail = data.fail || function();
}

模板的原型方法

既然这个基本提示框是可创建的,那么它也应该具有一些基本方法,比如应该有init方法来组装提示框, bindEvent方法来绑定点击确定或关闭按钮事件,等等。

// 提示框原型方法
Alert.prototype = {
// 创建方法
init: function() {
// 生成提示框
this.panel.appendChild(this.closeBtn);
this.panel.appendChild(this.contentNode);
this.panel.appendChild(this.confirmBtn);
// 插入页面中
document.body.appendChild(this.panel);
// 绑定事件
this.bindEvent();
// 显示提示框
this.show();
},
bindEvent: function() {
var me = this;
// 关闭按钮点击事件
this.closeBtn.onclick = function() {
// 执行关闭取消方法
me.fail();
// 隐藏弹层
me.hide();
}
// 确定按钮点击事件
this.confirmBtn.onclick = function() {
// 执行关闭确认方法
me.success();
// 隐藏弹层
me.hide();
}
},
// 隐藏弹层方法
hide: function() {
this.panel.style.display = 'none';
},
// 显示弹层方法
show: function() {
this.panel.style.display = 'block';
},
// 确认方法
success: function() {
console.log('success');
}
// 取消方法
fail: function() {
console.log('fail');
}
}

有了这个提示框基类,再想拓展其他类型弹层则容易多了,比如右侧按钮提示框

// 右侧按钮提示框
var RightAlert = function(data) {
// 继承基本提示框的构造函数
Alert.call(this. data);
// 为确认按钮添加right类设置位置偏右
this.confirmBtn.className = this.confirmBtn.className + ' right';
} // 继承基本提示框方法
RightAlert.prototype = new Alert();

取消按钮提示框

// 取消按钮提示框

var CancelAlert = function(data) {
Alert.call(this, data);
this.cancelBtn = document.createElement('span');
this.cancelBtn.innerHTML = data.cancelText || '取消';
this.cancelBtn.className = 'a-cancel btn';
} CancelAlert.prototype = new Alert(); CancelAlert.prototype.init = function() {
Alert.prototype.init.call(this);
this.panel.appendChild(this.cancelBtn);
}

右侧取消按钮提示框

/ 右侧取消按钮提示框
var RightCancelAlert = function(data) {
// 继承取消提示框的构造函数
CancelAlert.call(this, data);
this.cancelBtn.className = this.cancelBtn.className + ' right'
} RightCancelAlert.prototype = new CancelAlert(); RightCancelAlert.prototype.init = function() {
CancelAlert.prototype.init.call(this);
}

javascript设计模式(张容铭)学习笔记 - 照猫画虎-模板方法模式的更多相关文章

  1. javascript设计模式(张容铭)学习笔记 - 外观模式绑定事件

    有一个需求要为document对象绑定click事件来是想隐藏提示框的交互功能,于是小白写了如下代码: document.onclick = function(e) { e.preventDefaul ...

  2. javascript设计模式(张容铭) 第14章 超值午餐-组合模式 学习笔记

    JS 组合模式更常用于创建表单上,比如注册页面可能有不同的表单提交模块.对于这些需求我们只需要有基本的个体,然后通过一定的组合即可实现,比如下面这个页面样式(如图14-2所示),我们来用组合模式实现. ...

  3. JavaScript设计模式之观察者模式(学习笔记)

    设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...

  4. min-max容斥学习笔记

    min-max容斥学习笔记 前置知识 二项式反演 \[ f(n)=\sum_{i=0}^n\binom{n}{i}g(i)\Leftrightarrow g(n)=\sum_{i=0}^n(-1)^{ ...

  5. 【Head-First设计模式】C#版-学习笔记-开篇及文章目录

    原文地址:[Head-First设计模式]C#版-学习笔记-开篇及文章目录 最近一年断断续续的在看技术书,但是回想看的内容,就忘了书上讲的是什么东西了,为了记住那些看过的东西,最好的办法就是敲代码验证 ...

  6. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  7. thinkphp学习笔记6—url模式

    原文:thinkphp学习笔记6-url模式 入口文件是应用的唯一入口,因为可以多入口,每个应用可以对应一个入口文件,系统会从rul参数中解析当前请求的模块,控制器,操作.ThinkPHP是区分大小写 ...

  8. JavaScript闭包(Closure)学习笔记

    闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解 ...

  9. 设计模式学习笔记--备忘录(Mamento)模式

    写在模式学习之前 什么是设计模式:在我们进行程序设计时,逐渐形成了一些典型问题和问题的解决方式,这就是软件模式:每个模式描写叙述了一个在我们程序设计中常常发生的问题,以及该问题的解决方式:当我们碰到模 ...

随机推荐

  1. [Xcode 实际操作]一、博主领进门-(13)在控制台的几种打印输出语句和po命令

    目录:[Swift]Xcode实际操作 本文将演几种在控制台输出日志的方式. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class ...

  2. mysql--浅谈查询1

    这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql5.6 系统环境:win 在谈查询之前,先说一个特别重要的概念 一定将列名看成变量,既然是变量就可以运算 一定将 ...

  3. Vue.js实战

    指令 什么是指令 指令,directives,是vue非常常用的功能,在template里. 都是以v-开头 不是自己所为html元素,比如假设指令叫v-abc,没有这种写法,这是组件(compone ...

  4. windows如何搭建redis集群

    操作系统:win10 64位 redis版本:3.2.1-x64 ruby版本:2.5.1-1-x64 rubygems版本:2.7.6 今天突然想简单的搭建一个redis的集群,因为系统是Windo ...

  5. AKOJ-2010-魔法石

    链接:https://oj.ahstu.cc/JudgeOnline/problem.php?id=2010 题意: Vyoung最近收集到一大批魔法石,这些魔法石有两种特性,攻击和防守,不同特性的两 ...

  6. UVA-11584:Partitioning by Palindromes(基础DP)

    今天带来一个简单的线性结构上的DP,与上次的照明系统(UVA11400)是同一种类型题,便于大家类比.总结.理解,但难度上降低了. We say a sequence of characters is ...

  7. SSAS 维度属性自定义排序

    默认设置: 排序设置:

  8. 关于nodejs模块安装后找不到包解决办法

    主要原因是类似bower.gulp这些包后,没有添加到环境变量,但是有洁癖的我也不希望添加太多的软链接,所以在用phpstorm开始时有需要的情况下 定义临时的环境变量 http://stackove ...

  9. SpringBoot实现登陆拦截

    一.创建interceptor包,在interceptor中创建一个拦截器并实现HandlerInterceptor 代码: @Componentpublic class LoginHandlerIn ...

  10. 洛谷 P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers

    贪婪的送礼者Greedy Gift Givers 难度:☆ Code: #include <iostream> #include <cstdio> #include <c ...