模板方法模式笔记
   父类中定义一组算法操作骨架,而将一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤
   实例:弹出框归一化插件

css样式

             .alert{position: fixed;left: 50%;top: 50%;background-color: #ffffff;z-index:;width:400px;
border-radius: 5px;font-weight: bold;color: #535e66;box-shadow: 1px 1px 4px #eee,-1px -1px 4px #eee;margin-top:-9rem;margin-left:-200px;}
.alert h3{text-indent:2rem;border-bottom:1px solid #eef0f1;margin:;padding:1rem 0;}
.alert p{padding: 2rem 5rem;height: 5rem;overflow: hidden;margin:;border-bottom:1px solid #eef0f1;}
.alert .a-close{display: block;cursor: pointer;width: 12px;height: 12px;position: absolute;top: 1.2rem;right: 1.5rem;background: url(../img/icons.png) -48px -96px no-repeat;}
.alert .a-close:after{display: block;content: ""; clear: both;}
.alert .btn{display: inline-block;cursor: pointer;width: 4.5rem;height: 1.8rem;line-height: 1.8rem;text-align: center;color: #FFFFFF;
border-radius: 5px;margin:0.5rem;}
.alert .panelFooter{width:11rem;float:right;}
.alert .a-confirm{background-color: #0095d9;}
.alert .cancel{background-color: #546a79;}
.alert .right{float:right} @media only screen and (min-width: 100px) and (max-width: 640px) {
.alert{width:80%;margin-left:-40%;}
.alert h3{text-indent: 1rem;}
.alert p{padding:1rem;}
.alert .a-close{right: 1rem;}
}

运用寄生组合继承方法

             //原型式继承
function inheritobject(o){
//声明一个过渡函数对象
function F(){
}
//过渡原型对象继承父对象
F.prototype=o;
//返回过渡对象的一个实列,该实例的原型继承了父对象
return new F();
} /*
*寄生式继承 继承原型
* 传递参数subclass 子类
* 传递参数superclass 父类
* */
function inheritPrototype(subclass,superclass){
//复制一份父类的原型副本保存在变量中
var p=inheritobject(superclass.prototype);
//修正因为重写子类原型导致子类的constructor属性被修改
p.constructor=subclass;
//设置子类原型
subclass.prototype=p;
}

首先要创建基本提示框基类(模板类),然后其他提示框类只需要在继承的基础上,拓展自己所需即可,日后需求变更,修改基础类,所有提示框类实现的样式都会统一变化

基本提示框类:只实现一个提示内容、一个关闭按钮、一个确定按钮

            var Alert = function(data){
if(!data) return;
this.content=data.content;
this.panel =document.createElement("div");//提示框面板
this.contentNode=document.createElement("p");
this.panelFooter=document.createElement("div");
this.confirmBtn=document.createElement("span");
this.closeBtn=document.createElement("b");
this.panel.className="alert";
this.panelFooter.className="panelFooter";
this.confirmBtn.className="btn a-confirm";
this.closeBtn.className="a-close";
this.confirmBtn.innerHTML=data.confirm || '确认';
this.contentNode.innerHTML=this.content;
this.success=data.success || function(){};
this.fail=data.fail || function(){};
}
Alert.prototype={
init :function(){
this.panel.appendChild(this.closeBtn);
this.panel.appendChild(this.contentNode);
this.panelFooter.appendChild(this.confirmBtn);
this.panel.appendChild(this.panelFooter);
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';
}
}

右侧按钮提示框类:继承基本提示框类,拓展需求,使按钮移动到右侧显示

             //右侧按钮提示框
var RightAlert =function(data){
Alert.call(this,data);
this.panelFooter.className = this.panelFooter.className + ' right';
}
inheritPrototype(RightAlert,Alert);

标题提示框类 :继承基本提示框类,拓展需求,添加一个提示框标题

            //标题提示框类
var TitleAlert=function(data){
Alert.call(this,data);
this.title = data.title;
this.titleNode = document.createElement("h3");
this.titleNode.innerHTML = this.title;
}
inheritPrototype(TitleAlert,Alert);
TitleAlert.prototype.init =function(){
this.panel.insertBefore(this.titleNode,this.panel.firstChild);
Alert.prototype.init.call(this); }

继承类也可作为模板

带有取消按钮的弹出框:继承标题提示框类,拓展需求,添加一个取消按钮

             //继承类也可作为模板
var CancelAlert = function(data){
//继承标题提示框构造函数
TitleAlert.call(this,data);
//取消按钮文案
this.cancel = data.cancel;
this.cancelBtn = document.createElement('span');
this.cancelBtn.className='btn cancel';
this.cancelBtn.innerHTML = this.cancel || '取消';
}
inheritPrototype(CancelAlert,TitleAlert);
CancelAlert.prototype.init = function(){
TitleAlert.prototype.init.call(this);
this.panelFooter.appendChild(this.cancelBtn);
}
CancelAlert.prototype.bindEvent = function(){
var me=this;
TitleAlert.prototype.bindEvent.call(me);
this.cancelBtn.onclick = function(){
me.fail();
me.hide();
}
}

测试代码

           new CancelAlert({
title : '提示',
content : '提示内容',
success : function(){
console.log('ok');
},
fail : function(){
console.log("cancel");
}
}).init();

浏览器显示

javascript-模板方法模式-提示框归一化插件的更多相关文章

  1. javascript模板方法模式

    一:什么是模板方法模式: 模板方法模式由二部分组成,第一部分是抽象父类,第二部分是具体实现的子类,一般的情况下是抽象父类封装了子类的算法框架,包括实现一些公共方法及封装子类中所有方法的执行顺序,子类可 ...

  2. 轻松掌握:JavaScript模板方法模式

    模板方法模式 假如我们有一些对象,各个对象之间有一些相同的行为,也有一些不同的行为,这时,我们就可以用模板方法模式来把相同的部分上移到它们的共同原型中(父类),而将不同的部分留给自己各自重新实现. 模 ...

  3. Jquery 弹出提示框输入插件 apprise 修改中文按钮以及使用说明

      apprise的使用非常简单,引入js脚本和css <script type="text/javascript" src="/js/apprise-1.5.fu ...

  4. jQuery警告/确认/提示弹出对话框效果(替换传统JavaScript下的提示框)

    http://www.51xuediannao.com/js/jquery/jquery_tsk/ http://www.jq22.com/demo/jqueryConfirm20160413/

  5. javascript中简单提示框

    CSS部分 .help-tip{ width: 340px; border:1px solid #A0A0A0; background-color: #F8F8F8; border-radius: 5 ...

  6. JavaScript实现延时提示框

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  7. 基于jquery的提示框JavaScript 插件,类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  8. 再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)

    模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...

  9. javascript设计模式(张容铭)学习笔记 - 照猫画虎-模板方法模式

    模板方法模式(Template Method):父类中定义一组操作算法骨架,而降一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 项目经理体验了各个页面的 ...

随机推荐

  1. Python初学者之网络爬虫(二)

    声明:本文内容和涉及到的代码仅限于个人学习,任何人不得作为商业用途.转载请附上此文章地址 本篇文章Python初学者之网络爬虫的继续,最新代码已提交到https://github.com/octans ...

  2. 文本比较算法:Needleman/Wunsch算法

    本文介绍基于最长公共子序列的文本比较算法——Needleman/Wunsch算法.还是以实例说明:字符串A=kitten,字符串B=sitting那他们的最长公共子序列为ittn(注:最长公共子序列不 ...

  3. Kafka 文档用例

    1.2 用例 以下是一些Kafka 常见的用例.关于功能方面的一些概念,可以看这篇博客:http://engineering.linkedin.com/distributed-systems/log- ...

  4. Python(六)面向对象、异常处理、反射、单例模式

    本章内容: 创建类和对象 面向对象三大特性(封装.继承.多态) 类的成员(字段.方法.属性) 类成员的修饰符(公有.私有) 类的特殊成员 isinstance(obj, cls) & issu ...

  5. Notepad++ 实用技巧

    Notepad++是一款开源的文本编辑器,功能强大.很适合用于编辑.注释代码.它支持绝大部分主流的编程语言. 本文主要列举了本人在实际使用中遇到的一些技巧. 快捷键 自定义快捷键 首先,需要知道的是: ...

  6. 微信小程序基础入门

    准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root ...

  7. es6学习笔记一数组(上)

    最近公司没什么事情,我们老大让我看看es6,小颖就练习了下数组的各个方法,今天先给大家分享一部分.嘻嘻,希望对大家有所帮助. every方法: 概述:    every() 方法测试数组的所有元素是否 ...

  8. 关于Java语言中那些修饰符

    一.在java中提供的一些修饰符,这些修饰符可以修饰类.变量和方法,在java中常见的修饰符有:abstract(抽象的).static(静态的).public(公共的).protected(受保护的 ...

  9. Asp.Net Core 项目实战之权限管理系统(5) 用户登录

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  10. [unity]UGUI界面滑动,ScrollRect嵌套滑动

    原因:老板蛋痛,让我去抄皇室战争. 思路:我大概知道ngui(后来改成UGUI的)里面有个ScrollView.于是我就想一个横着的SV加上5个竖的SV不就好了吗. 过程: 于是 但是有个问题就是UI ...