通过模版类把公共内容进行抽离封装、提供给其他子类继承使用

主要解决：一些方法通用，却在每一个子类都重新写了这一方法。
何时使用：有一些通用的方法。
如何解决：将这些通用算法抽象出来。
关键代码：在抽象类实现，其他步骤在子类实现。
应用实例：
1、在造房子的时候，地基、走线、水管都一样，只有在建筑的后期才有加壁橱加栅栏等差异。
2、西游记里面菩萨定好的 81 难，这就是一个顶层的逻辑骨架。

提示框案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. </html>
  14. <script>
  15. class Alert{
  16.     constructor(data){
  17.         const { content, close, confirm, success, fail } = data;
  18.         this.content = content;
  19.         // 提示框面板
  20.         this.panel = document.createElement('div')
  21.         // 提示内容组件
  22.         this.contentNode = document.createElement('p')
  23.         this.contentNode.innerHTML = content;
  24.         // 创建确认按钮组件
  25.         this.confirmBtn = document.createElement('span')
  26.         this.confirmBtn.innerHTML = confirm || '确认'
  27.         // 创建关闭按钮组件
  28.         this.closeBtn = document.createElement('b')
  29.         this.closeBtn.innerHTML = close || '关闭'
  31.         // 事件绑定
  32.         this.success = success || function(){}
  33.         this.fail = fail || function(){}
  34.     } 
  35.     init(){
  36.         this.panel.appendChild(this.contentNode)
  37.         this.panel.appendChild(this.confirmBtn)
  38.         this.panel.appendChild(this.closeBtn)
  39.         document.body.appendChild(this.panel)
  40.         this.bindEvent()
  41.     } 
  42.     bindEvent(){
  43.         this.confirmBtn.onclick = () =>{
  44.             this.success()
  45.             this.hide()
  46.         }
  47.         this.closeBtn.onclick = () =>{
  48.             this.fail()
  49.             this.hide()
  50.         }
  51.     }
  52.     hide(){
  53.         this.panel.style.display = 'none'
  54.     }
  55.     show(){
  56.         this.panel.style.display = 'block'
  57.     }
  58. }
  61. class MessageBox extends Alert{
  62.     constructor({ confirm }){
  63.         super({
  64.             content:"您是否需要执行删除操作？？",
  65.             confirm:"确认",
  66.             close:"取消",
  67.             success:confirm,
  68.         })
  69.     }
  70. }
  72. function confirms(){
  73.     console.log('用户按了确认')
  74. }
  75. let messageBox = new MessageBox({
  76.     confirm:confirms
  77. })
  78. messageBox.init()
  81. </script>

总结

优点

  • 公共的抽离、扩展性好