• 60090

    文章

  • 611

    评论

  • 59

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

好程序员web前端教程分享js模板模式

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

什么是模板模式?

 

模板模式是抽象父类定义了子类需要重写的相关方法。 而这些方法,仍然是通过父类方法调用的。  根据描述,“模板”的思想体现在:父类定义的接口方法。 除此之外,子类方法的调用,也是被父类控制的。

 

应用场景

 

  一些系统的架构或者算法骨架,由“BOSS”编写抽象方法,具体的实现,交给“小弟们”实现。 而绝对是不是用“小弟们”的方法,还是看“BOSS”的心情。 不是很恰当的比喻哈~

 

 

ES6 实现

 

Animal是抽象类,Dog和Cat分别具体实现了eat()和sleep()方法。 Dog或Cat实例可以通过live()方法调用eat()和sleep()。

 

 注意:Cat和Dog实例会被自动添加live()方法。不暴露live()是为了防止live()被子类重写,保证父类的控制权。

 

class Animal {

  constructor() {

    // this 指向实例

    this.live = () => {

      this.eat();

      this.sleep();

    };

  }

 

  eat() {

    throw new Error("模板类方法必须被重写");

  }

 

  sleep() {

    throw new Error("模板类方法必须被重写");

  }

}

 

class Dog extends Animal {

  constructor(...args) {

    super(...args);

  }

  eat() {

    console.log("狗吃粮");

  }

  sleep() {

    console.log("狗睡觉");

  }

}

 

class Cat extends Animal {

  constructor(...args) {

    super(...args);

  }

  eat() {

    console.log("猫吃粮");

  }

  sleep() {

    console.log("猫睡觉");

  }

}

 

/********* 以下为测试代码 ********/

 

// 此时, Animal中的this指向dog

let dog = new Dog();

dog.live();

 

// 此时, Animal中的this指向cat

let cat = new Cat();

cat.live();


 转载至链接:https://my.oschina.net/530504/blog/3036063。

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客