设计模式 - 模板方法

模板方法模式是一种只需使用继承就可以实现的非常简单的模式.

继承 => 实现

模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。

通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺
序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法

模板方法模式是一种典型的通过封装变化提高系统扩展性的设计模式。在传统的面向对象语
言中，一个运用了模板方法模式的程序中，子类的方法种类和执行顺序都是不变的，所以我们把
这部分逻辑抽象到父类的模板方法里面。而子类的方法具体怎么实现则是可变的，于是我们把这
部分变化的逻辑封装到子类中。通过增加新的子类，我们便能给系统增加新的功能，并不需要改
动抽象父类以及其他子类，这也是符合开放封闭原则的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板方法</title>
</head>
<body>
    
</body>
<script>
  var  lianAi  =  function() {

  }
  lianAi.prototype.renshi =  function () {
       console.log('我们终于认识了')
  };
  lianAi.prototype.tianjia  = function() {
       console.log('添加通信软件了')
  };
  lianAi.prototype.yuehui = function () {
       console.log('约会了')
  };
  lianAi.prototype.gaobai = function() {
        console.log('告白了')
  };
  lianAi.prototype.dengdai =function() {
        console.log('等待回复消息')
  };
  lianAi.prototype.init =function() {
       this.renshi();
       this.tianjia();
       this.yuehui();
       this.gaobai();
       this.dengdai();
  }




  var  Xiaoming  = function() {

  };
  Xiaoming.prototype = new lianAi();
  Xiaoming.prototype.renshi = function() {
      console.log('和小丽认识了');
  }
  Xiaoming.prototype.yuehui =function() {
      console.log('到电影院约会了');
  }
  Xiaoming.prototype.gaobai =function() {
       console.log('向小丽告白了')
  };
  var  xiaoming =new Xiaoming();
  xiaoming.init();
  //和小丽认识了
  //添加通信软件了
  // 到电影院约会了
  // 向小丽告白了
// 等待回复消息
 </script> 
</html>

谈恋爱可以总结为5个过程：

（1）认识

（2）加软件,比如微信

（3）两个人约会

（4）男生告白

（5）等待回复

（1）认识

 lianAi.prototype.renshi =  function () {
       console.log('我们终于认识了')
  };

（2）加软件,比如微信

 lianAi.prototype.tianjia  = function() {
       console.log('添加通信软件了')
  };

（3）两个人约会

  lianAi.prototype.gaobai = function() {
        console.log('告白了')
  };

（4）男生告白

 lianAi.prototype.yuehui = function () {
       console.log('约会了')
  };

（5）等待回复

 lianAi.prototype.dengdai =function() {
        console.log('等待回复消息')
  };

初始化方法

 lianAi.prototype.init =function() {
       this.renshi();
       this.tianjia();
       this.yuehui();
       this.gaobai();
       this.dengdai();
  }

子类来继承上面的父类:

  var  Xiaoming  = function() {

  };
  Xiaoming.prototype = new lianAi();

子类重写父类的方法

  Xiaoming.prototype.renshi = function() {
      console.log('和小丽认识了');
  }
  Xiaoming.prototype.yuehui =function() {
      console.log('到电影院约会了');
  }
  Xiaoming.prototype.gaobai =function() {
       console.log('向小丽告白了')
  };

直接调用init 方法，由于 xiaoming对象和 xiaoming构造器的原型 prototype 上都没有对应的 init 方法，

所以该请求会顺着原型链，

被委托给xiaoming的“父类”lianAi 原型上的 init 方法。

设计模式 - 模板方法

猜你喜欢