JavaScript设计模式.jpeg

1.总览

根据张容铭老师所著《JavaScript设计模式》一书,JavaScript设计模式共分5大类,39种设计模式。
以下导图对这39种设计模式分类别进行了整理。
39种设计模式导图JavaScript设计模式(张容铭)39种.png

2.创建型设计模式

创建型设计模式是一类处理对象创建的设计模式。通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。
关于对象创建的内容,可参见本人如下一篇博客:
链接JavaScript面向对象的程序设计(一)——对象的创建

创建型设计模式有以下6种:

  • 简单工厂模式
  • 工厂方法模式
  • 抽象工厂模式
  • 建造者模式
  • 原型模式
  • 单例模式

    2.1 简单工厂模式

    又称静态工厂方法。
    由一个工厂对象创建某一类对象的实例。
    示例:

2.2 工厂方法模式

通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。

  1. const BallFactory = function (type, price) {
  2. // 安全模式构造函数
  3. if (this instanceof BallFactory) {
  4. return this[type](price)
  5. } else {
  6. return new BallFactory(type, price)
  7. }
  8. }
  9. BallFactory.prototype = {
  10. football: function (price) {
  11. DoSomething()
  12. },
  13. basketball: function (price) {
  14. DoSomething()
  15. console.log('the price of basketball is', price)
  16. },
  17. tennis: function (price) {
  18. DoSomething()
  19. console.log('the price of tennis is', price)
  20. }
  21. }

2.3 抽象工厂模式

通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。
抽象类:是一种声明但不能使用的类,使用时会报错。JavaScript中可以在类的方法中手动抛出错误来模拟抽象类。

  1. // 汽车抽象类
  2. const Car = function () {
  3. }
  4. Car.prototype = {
  5. getPrice: function () {
  6. return new Error('抽象方法不能调用')
  7. },
  8. getSpeed: function () {
  9. return new Error('抽象方法不能调用')
  10. }
  11. }

未完待续……