设计模式笔记

设计模式的东西比较容易归类,但是一般都写的是后端常用的东西,前端的写的比较少,这里稍微写一下各个设计模式在前端编码中的应用。

目录


适配器模式

适配器模式即将一个类(对象)的接口(方法或者属性)转化为另外一个接口,使得不兼容的问题通过适配器来解决。

一般而言,在前端编码中有以下几个用途:

  • 引入其他的框架或者库函数,在原有函数的上面提供一层包装,使得满足当前框架的语法规范。
  • 对后端传来的数据使用一个适配器函数处理,修改不规范的数据格式。

观察者模式

观察者模式中可以抽象为三个主体:观察者、被观察者、执行者。观察者观察被观察者的状态,并且将状态通知给执行者执行相应的动作。

观察者一般而言要包含四类方法:

  • 接受被观察者的消息。(由被观察者调用,主动“汇报”变化。)
  • 接受执行者的订阅。(由执行者调用,传入自己,添加到执行者队列中。)
  • 取消执行者的订阅。(由执行者调用,将自己从执行者队列中移除。)
  • 向执行者发送对应的消息。

事件监听器就是典型的观察者模式应用,可以为同一个监听器绑定多个事件,事件将会独立的触发。


状态模式

状态模式就是在一个对象中,将不同状态的方法分离开来,因为当存在很多个状态的时候,如果允许状态之间的组合,则 if- else 或 switch 的写法将使得组合的数量膨胀,代码难以维护。

举个例子,比如有 A、B、C 三种状态,则一共包含 $C_{3}^{3}$ 种可能性,也就是说 if-else 的需要这么多个分支,当增加一个 D 状态,则可能性变为 $C_{4}^{4}$,需要增加 $C_{4}^{4}-C_{3}^{3}$ 个分支,同时在删除分支时候也需要大量的修改。

状态模式将不同状态分离,可以将需要执行的状态用一个数组来维护,这样的话仅仅需要关注状态本身的维护,不需要关注整个 if-else 的分支维护。


委托模式

委托模式是指多个对象接受并处理同意请求,他们将请求委托给另一个对象统一处理请求。

一个典型的应用就是将子元素的事件委托给更高层面上的父元素去执行,比如在 ul 中将 li 的 onclick 点击事件绑定在 ul 上面,利用事件冒泡的性质减少重复的代码。