照猫画虎--模板模式(继承)

来源：互联网发布：amv格式视频软件编辑：程序博客网时间：2024/04/18 08:31

在父类中定义一组操作算法骨架，而将一些实现不走延迟到子类中，使子类可以不盖被父级的算法结构的同时可以重新定义算法中某些实现步骤以下实现的效果比较简单实际中应该会更复杂的

基础类:

var Alert = function(data) {    //如果没有数据返回，防止后面程序执行    if (!data) {        return false;    }    this.content = data.content;    this.ce = function(elem) {            return document.createElement(elem);        }        //创建提示框面板    this.panel = this.ce("div");    //创建内容组件    this.contentNode = this.ce("p");    //创建确定按钮组件    this.confirmBtn = this.ce("span");    //创建关闭按钮组件    this.closeBtn = this.ce("b");    //为提示框面板添加类    this.panel.className = "alert";    //为关闭按钮添加类    this.closeBtn.className = "a-close";    //为确认按钮添加类    this.confirmBtn.className = "a-confirm";    //为确定按钮添加文案    this.confirmBtn.innerHTML = data.confim || "确认";    //为提示内容添加文本    this.contentNode.innerHTML = this.content;    //点击关闭按钮执行方法    this.fail = data.fail || function() {};    this.success=data.success||function(){};};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";    }}

子类：

//根据模板创建类//右侧按钮提示框--------------------------------------var RightAlert=function(data){ //继承基本提示框构造函数 Alert.call(this,data); //确认按钮添加right类设置位置居右 this.confirmBtn.className=this.confirmBtn.class+"right";}//接触基本提示框的原型方法RightAlert.prototype=new Alert();//实现标题提示框-----------------------------------------var TitleAlert=function(data){//基础基本提示框构造函数Alert.call(this,data);//设置标题内容this.titleNode=this.ce("h3");//标题组件中写入标题内容this.title=data.title;this.titleNode.innerHTML=this.title;}//基础提示框的原型方法TitleAlert.prototype=new Alert();//对基本提示框创建方法拓展TitleAlert.prototype.init=function(){//插入标题this.panel.insertBefore(this.titleNode,this.panel.firstChild);//基础提示框的init方法Alert.prototype.init.call(this);}

子类也可以用来做模板类：

//继承类也可以作为模板*****************************************var CanelAlert=function(data){//继承标题提示框构造函数TitleAlert.call(this,data);//取消按钮文案this.cancel=data.cancel;//创建取消按钮this.cancelBtn=this.ce("span");//为取消按钮添加类this.cancelBtn.className="canel";//设置取消按钮内容this.cancelBtn.innerHTML=this.cancel||"取消";}//继承标题提示框原型方法CanelAlert.prototype=new Alert();CanelAlert.prototype.init=function(){//继承标题提示框创建方法TitleAlert.prototype.init.call(this);this.panel.appendChild(this.cancelBtn);}CanelAlert.prototype.bindEvent=function(){var me=this;//标题提示框板凳事件方法继承TitleAlert.prototype.bindEvent.call(this);this.cancelBtn.onclick=function(){me.fail();me.hide();}}

页面调用：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.alert{width:200px;min-height: 200px;border: 1px solid #000;position: relative;}.a-close{position: absolute;width: 30px;height: 30px;line-height: 30px;text-align: center;right:0;top:0;}.a-close:after{content: "X";display: inline-block;}h3{border-bottom: #eee solid 1px;padding:0 20px;}p{padding: 0 20px;}span{width: 40px;height: 30px;line-height: 30px;text-align: center;background: #eee;padding:10px;}span+span{margin-left: 20px;}</style></head><body><script src="template.js"></script><script>new CanelAlert({title:"提示标题",content:"提示内容",success:function(){console.log("ok")},fail:function(){console.log("cancel")}}).init();</script></body></html>

下一篇文章继续:http://blog.csdn.net/xiaomogg/article/details/53271479

0 0