前言
前几天非常非常粗的读了一本书Head First 设计模式(中文版),一本 Java 语言层面的设计模式,看这本书的目的只是为了提升自己代码设计上的能力,并且可以和前端代码有所结合,一直以来,,总感觉自己的代码设计得非常非常烂。
先给个定义:设计模式,即解决某个特定场景下对某种问题的解决方案。因此,当我们遇到合适的场景时,我们可能会条件反射一样自然而然想到符合这种场景的设计模式。
策略模式
概念:
定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。
意义:
- 利用组合,委托等技术和思想,有效的避免很多 if 条件语句。
- 提供了开放-封闭原则,使代码更容易理解和扩展。
- 代码复用。
应用场景:表单校验
示例:
1 | var strategies = { |
观察者模式(发布/订阅模式)
概念:
定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。
意义:
- 支持简单的广播通信,自动通知所有已经订阅过的对象。
- 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
应用场景:双向数据绑定
1 | class EventEmitter { |
单例模式
概念:
保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
意义:
- 对象只有一个实例,节约系统资源,提供性能。
- 提供对唯一实例的受控访问。
- 类可以灵活的改变实例化过程。
应用场景:redux 下的 store、浏览器写某个特定的浮框…
示例:
1 | const Singleton = name => { |
代理模式
概念:
为对象提供一个代用品或者占位符,以便控制对它的访问。
意义:
- 单一职责,只有代理对象才能引起该对象的变化。
- 用代理来过滤掉一些不合规的的访问,减少该对象的访问,在某种意义上可以提高性能。
应用场景:图片预加载、mobx 的变量拦截。
示例:
1 | var myImage = (function() { |
装饰者模式
概念:在不改变对象自身的基础上,在程序运行期间给对象动态地添加方法。
意义:
- 原有方法维持不变,在原有方法上再挂载其他方法来满足现有需求;函数的解耦,将函数拆分成多个可复用的函数,再将拆分出来的函数挂载到某个函数上,实现相同的效果但增强了复用性。
- 拓展对象功能。
应用场景:动态表单验证…
示例:
1 | function Sale(price) { |