在前端身边的设计模式
导读
时至今日，前端代码的可读性、可维护性绝对是排在第一位的。
提到设计模式就要说一下Java这种强类型语言，GOF提出的24中设计模式可以看作抽象、封装、继承、多态不同'剂量'的实现，侧重点不一样。
实际应用当中更多的是将其作为参考，完全可以自己调制剂量。
达到代码的高内聚、低耦合，提升性能，合理划分代码、优化数据传递，减少判断等
设计模式分类
创建型模式
这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式，而不是使用 new 运算符直接实例化对象。
这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活。
- 工厂模式（Factory Pattern）
- 抽象工厂模式（Abstract Factory Pattern）
- 单例模式（Singleton Pattern）
- 建造者模式（Builder Pattern）
- 原型模式（Prototype Pattern）
结构型模式
这些设计模式关注类和对象的组合。
继承的概念被用来组合接口和定义组合对象获得新功能的方式。
- 适配器模式（Adapter Pattern）
- 桥接模式（Bridge Pattern）
- 过滤器模式（Filter、Criteria Pattern）
- 组合模式（Composite Pattern）
- 装饰器模式（Decorator Pattern）
- 外观模式（Facade Pattern）
- 享元模式（Flyweight Pattern）
- 代理模式（Proxy Pattern）
行为型模式
这些设计模式特别关注对象之间的通信。
- 责任链模式（Chain of Responsibility Pattern）
- 命令模式（Command Pattern）
- 解释器模式（Interpreter Pattern）
- 迭代器模式（Iterator Pattern）
- 中介者模式（Mediator Pattern）
- 备忘录模式（Memento Pattern）
- 观察者模式（Observer Pattern）
- 状态模式（State Pattern）
- 空对象模式（Null Object Pattern）
- 策略模式（Strategy Pattern）
- 模板模式（Template Pattern）
- 访问者模式（Visitor Pattern）
设计模式就在身边
工厂模式
document.createElement，可以创建input、div，因为他们都是HTML元素，不会对外暴漏的具体的创建细节。
抽象工厂模式
创建按钮、单选按钮、输入框，每个都是一个单独的工厂，创建表单则是一个超级工厂。
围绕一个超级工厂创建其他工厂。
比如一个厂家生产电脑，也生产鼠标垫、键盘这些。
原型模式
DOM cloneNode方法，用于创建当前对象的克隆。
当直接创建对象的代价比较大时，则采用这种模式
享元模式
复用已经创建好的对象，没有在创建新的。
比如DOM节点只是属性更改了，并不用删除它再创建一个新的加进去。
外观模式
我们使用iview组件，只需要关注对外提供的属性、事件、插槽这些，降低自身的复杂程度。
责任链模式
事件冒泡、异常捕获，每一步都能对任务做处理。
适配器模式
当后台接口返回的数据格式与第三方组件渲染需要的格式有差异，对数据本身做转换，作为不兼容接口间的桥梁。
美国电器 110V，中国 220V，就要有一个适配器将 110V 转化为 220V
装饰器模式
String.prototype.print = function(){};在原型链上添加一个函数。
不改变对象的结构，添加新的功能。
代理模式
Object.defineProperty 能对一个属性的取值、赋值加以控制。
解释器模式
HTML代码、正则表达式,浏览器解析执行，提供了评估语言的语法或表达式的方式
访问器模式
调用console.log ，能够对不同的数据类型做处理。
单例模式
window、body,全局只有一个。
观察者模式
Vue中的数据绑定，当数据发生变化时，有关联的计算属性、DOM元素也会更新。
对象之间存在一对多关系。
空对象模式
用Jquery时，没有查到元素也可以调用上面的方法，减少null判断和错误的发生。
命令模式
使用ajax，发起get、post请求，请求以命令的形式包裹在对象中，并传给调用对象
组合模式
区域、文件夹这些树形结构。
迭代器模式
用for of遍历数组，这种模式用于顺序访问集合对象的元素，不需要知道集合对象的底层表示，还可以遍历Map、Set
模板模式
编写Vue组件时对外提供插槽，特定部分的实现可以延迟到使用组件的时候。
桥接模式：
再调用canvas上的API时，对于背景，我们可以设置普通颜色、渐变，对于图像我们话正方向，画长方形。
将抽象部分与实现部分分离，使它们都可以独立的变化。
策略模式
img的src属性，支持http协议,也支持base64码。
可以在运行时更改，定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。
比如去上班，可以坐公交、坐地铁。
状态模式
将一个div的display设置位block或none时，一些属性的值也会发生变化，对象内部状态发生变化。
过滤器模式
使用filter过滤数组，这种模式允许开发人员使用不同的标准来过滤一组对象
备忘录模式
使用编辑器的时候，可以撤销和恢复操作
中介者模式
点击按钮，触发按钮的回调，浏览器在这里充当了中介，降低通信的复杂性。
