javascript设计模式——模版方法

模版方法模式： 父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。

代码实现：创建基本提示框，通过继承实现不同类型的提示框。

    <script>
        // 模版基类
        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-close'
          // 为确定按钮添加类
          this.confirmBtn.className = 'a-confirm'
          // 为确定按钮添加文案
          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.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)
          this.confirmBtn.className = this.confirmBtn.className + 'right'
        }
        RightAlert.prototype = new Alert()
      
        // 标题提示框
        var TitleAlert = function(data) {
          Alert.call(this,data)
          this.title = data.title
          this.titleNode = document.createElement('h3')
          this.titleNode.innerHTML = this.title
        }
      
        // 继承基础提示方法
        TitleAlert.prototype = new 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 = 'cancel'
          this.cancelBtn.innerHTML = this.cancel || '取消'
        }
        CancelAlert.prototype = new Alert()
        CancelAlert.prototype.init = function() {
          TitleAlert.prototype.init.call(this)
          this.panel.appendChild(this.cancelBtn)
        }
        CancelAlert.prototype.bindEvent = function() {
          var me = this
          TitleAlert.prototype.bindEvent.call(me)
          this.cancelBtn.onclick = function() {
            me.fail()
            me.hide()
          }
        }
      
        var cancel = new CancelAlert({
          title: '提示标题',
          content: '提示内容',
          success: function() {
            console.log('ok')
          },
          fail: function() {
            console.log('fail')
          }
        }).init()
        </script>