(TODO)设计模式在前端开发中的应用

菜鸟教程里面，把设计模式看一遍先

https://www.runoob.com/design-pattern/design-pattern-tutorial.html

mindmap
  root((设计模式))
    创建型
      类
        工厂方法
      对象
        抽象工厂
        建造者
        原型
        单例
    结构型
      类
        适配器(类)
      对象
        适配器(对象)
        桥接
        组合
        装饰
        外观
        享元
        代理
    行为型
      类
        模板方法
        解释器
      对象
        策略
        状态
        观察者
        迭代器
        责任链
        命令
        备忘录
        中介者
        访问者

单例

闭包实现单例

export default a

编译的时候会形成一个闭包，可以分析下编译过程

我之前用组件，想通过单例保存数据，也是这个原理

工厂模式

组件的注册机制用到了，通过组件名称(ClassName)，获取组件实例

这次的装饰器是不是也可以用工厂？

抽象工厂和工厂的区别是什么？

责任链模式

洋葱圈模型

区别于拦截过滤器

感觉就是任务队列机制，grunt类似

短视频后端处理，很适合用责任链模式；目前是用链式调用实现的

过滤器模式

webpack loader

观察者模式

订阅发布模式

观察者模式和订阅发布模式的区别

订阅发布的耦合度，比观察者低，因为有个中介代理

装饰器模式

增强XX的能力

prototype扩展，比如蔡东实现个性化的可视化需求

增强的是行为还是表现？还是属性(prototype)

装饰器和继承重写方法的区别是什么？保有原来能力的情况下，增强新功能。

流程：

1、先用一个变量保存原来的方法

2、重写类的方法

3、在新的方法最后调用重写前的方法

1、继承的方式扩展

2、组合的方式

传入一个定位信息，每一个tick绘制一下；自定义图形的方式实现？

通过每一个插值的回调来实现个性化的效果！！！！牛逼了这个

错误的案例：动态条形图的增强

动态条形图，每一行其实包括了好几个元素：排名、名称、柱子、logo、数值。看起来似乎可以用装饰器模式，但是柱状图的场景，是包含了增强+独立操控的，后者不适合装饰器，装饰器是一锤子买卖，只有一个子组件。

装饰器模式不好在后续操作中，针对具体的小元素进行操作。比如修改value的数值。

这种场景，应该采用下面的组合模式。

组合模式

https://refactoringguru.cn/design-patterns/composite

适用于每个子组件有自己的行为或者属性，需要针对子组件细粒度操控的场景。

当你的场景包含如下几个特性，就可以考虑组合模式了：

树状结构(层级结构)
需要对子组件进行细粒度的操控和交互

这在3D游戏开发中，也经常用到，比如物体的位置信息，通过构建树状结构，然后以层层本地坐标转换的方式，最终算出每个物体的世界坐标。

案例：动态条形图的增强

动态条形图，每一行包括了好几个元素：排名、名称、柱子、logo、数值。

可以这样设计：

class Widget<W:Widget>{
  protected _widget: W | null;
  constructor() {
    _widget = widget;
  }

  render() {

  }
}

class Bar extends Widget {
  constructor(widget: Widget) {
    _widget = widget;
  }
  render() {
    this._widget.render();
    // DO SOMETHING
  }
}

class Rank extends Widget {
  render() {
    this._widget.render();
    // DO SOMETHING
  }
}

const bar = new Bar();

const rank = new Rank(bar);