模板类模式

模板类模式，其实就是组合继承的应用场景。我们从复杂的业务中抽象出一个基本模板作为父类，而将一些具体的东西放在子类去实现。
举个例子。
假如某项目中的弹出框样式不统一，现在要求做成统一的样式，怎么办？
你肯定不会一个一个页面去改是吧？这时你可以按照项目经理的要求，做一个统一的模板弹框类，然后具体的弹框只要继承这个模板类，即可实现样式的统一。
下面看一下具体实现。
根据要求，我们要实现的模板类需要有：
1、提示内容。
2、一个确定按钮。
3、一个关闭按钮。

var UniteAlert = function(obj){
        if(!obj)
            return;
        this.content = obj.content//提示内容
        //================创建dom节点=============//
        this.panel = document.createElement('div')
        this.contentNode = document.createElement('p')
        this.confirmBtn = document.createElement('button')
        this.closeBtn = document.createElement('span')
        //给元素添加统一样式类
        this.panel.className = 'unite-alert'
        this.confirmBtn.className = 'unite-confirm'
        this.closeBtn.className = 'unite-close'
        //追加文字信息
        this.confirmBtn.innerHTML = obj.confirmText || '确定'
        this.closeBtn.innerHTML = 'x'
        this.contentNode.innerHTML = this.content
        //按钮回调方法
        this.successMethod = obj.success || function(){}
        this.closeMethod = obj.fail || function(){}
    }
    UniteAlert.prototype = {
        //创建方法
        init:function(){
            //组装元素
            this.panel.appendChild(this.contentNode)
            this.panel.appendChild(this.confirmBtn)
            this.panel.appendChild(this.closeBtn)
            document.body.append(this.panel)
            //绑定回调方法
            this.bindCallback()
            this.showAlert()
        },
        bindCallback:function(){
            var that = this
            this.confirmBtn.onclick = function(){
                that.successMethod()
                that.hideAlert()
            }
            this.closeBtn.onclick = function(){
                that.closeMethod()
                that.hideAlert()
            }
        },
        showAlert:function(){
            this.panel.style.display = 'block'
        },
        hideAlert:function(){
            this.panel.style.display= 'none'
        }

    }

然后是具体的弹框实现，只要继承这个模板类即可。
比如带标题的弹框：

//具体的弹出框可继承这个父类
    //带有标题的弹出框
    var TitleAlert = function(obj){
        UniteAlert.call(this,obj)//继承父类属性
        //=======新增子类特有的属性============//
        this.title = obj.title
        this.titleNode = document.createElement('h3')
        this.titleNode.innerHTML = this.title
    }
    TitleAlert.prototype = new UniteAlert()//继承父类的方法
    //子类修改父类的init实现
    TitleAlert.prototype.init = function(){
        this.panel.insertBefore(this.titleNode,this.panel.firstChild)
        UniteAlert.prototype.init.call(this) // 其他逻辑跟父类的一样
    }


var tl = new TitleAlert({title:'温馨提示', content:'这是一个测试',
    success:function(){
        console.log('ok')
    },
    fail:function(){
        console.log('close')
    }
})
    tl.init()

也可能是带取消按钮的弹框：

    var CancelAlert = function(obj){
        TitleAlert.call(this,obj) // 继承带标题
        this.cancelBtn = document.createElement('button')
        this.cancelBtn.className = 'unite-cancel'
        this.cancelBtn.innerHTML = obj.cancelText || '取消'

    }
    CancelAlert.prototype = new UniteAlert()
    CancelAlert.prototype.init = function(){
        TitleAlert.prototype.init.call(this)//调用标题类的init
        this.panel.appendChild(this.cancelBtn)//带上取消方法

    }
    CancelAlert.prototype.bindCallback = function(){
        var that = this
        TitleAlert.prototype.bindCallback.call(this)
        //增加新的cancel方法
        this.cancelBtn.onclick = function(){
            that.closeMethod()
            that.hideAlert()
        }
    }
   var cl = new CancelAlert({title:'标题',content:'提示内容',
        success:function(){
        console.log('cancel ok')
        },
        fail:function(){
            console.log('cancel fail')
        }
    })
    cl.init()