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

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. ASP.NET MVC 视图(二)

    ASP.NET MVC 视图(二) 前言 上篇中对于视图引擎只是做了简单的演示,对于真正的理解视图引擎的工作过程可能还有点模糊,本篇将会对由MVC框架提供给我们的Razor视图引擎的整个执行过程做一个 ...

  2. MSSQL 基础语句笔记

    建库 CREATE DATABASE 数据库名 ON[PRIMARY] --默认属于PRIMARY主文件组,可省略 ( NAME='', --主数据文件的逻辑名 名称 FILEAME='', --主数 ...

  3. angular2

    1 class两种写法 (1).直接写 class="{{}}"; (2).数组 arr[a,b,c] ng-class = "arr" 2.class和sty ...

  4. 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换

    查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...

  5. Android线程管理之ExecutorService线程池

    前言: 上篇学习了线程Thread的使用,今天来学习一下线程池ExecutorService. 线程管理相关文章地址: Android线程管理之Thread使用总结 Android线程管理之Execu ...

  6. .NET Core采用的全新配置系统[2]: 配置模型设计详解

    在<.NET Core采用的全新配置系统[1]: 读取配置数据>中,我们通过实例的方式演示了几种典型的配置读取方式,其主要目的在于使读者朋友们从编程的角度对.NET Core的这个全新的配 ...

  7. jQuery-1.9.1源码分析系列(十六)ajax——jsonp原理

    json jsonp 类型 "json":  把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...

  8. 用github来展示你的前端页面吧

    前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先 ...

  9. NSwagStudio for Swagger Api

    本案例主要说明如何使用NSwag 工具使用桌面工具快速生成c# 客户端代码.快速的访问Web Api. NSwagStudio 下载地址 比较强大.可以生成TypeScript.WebApi Cont ...

  10. VS2012程序打包部署详解

    VS2012没有自带打包工具,所以要先下载并安装一个打包工具.我采用微软提供的打包工具:  InstallShield2015LimitedEdition.下载地址:https://msdn.micr ...