design-patter（js设计模式）

面向对象

结构化，数据结构化

三要素

继承

子类继承父类

• 继承可将公共属性/方法抽离出来，提高复用，减少冗余

封装

数据的权限和保密

• 减少耦合，不该外露的不外露
• 利于数据、接口的权限管理
• ES6目前不支持，一般认为_开头的属性是private

多态

同一接口不同实现

• 保持子类的开放性和灵活性
• 面向接口编程
• js应用极少，了解即可
  -需要结合java等语言的接口、重写、重载等功能

UML类图

• 泛化：表示继承
• 关联：表示引用

设计原则

《UNIX/LINUX设计哲学》

九大准则

• 准则1：小即是美
• 准则2：让每个程序只做好一件事
• 准则3：快速建立原型
• 准则4：舍弃高效率而取可移植性
• 准则5：采用纯文本来存储数据
• 准则6：充分利用软件的杠杆效应（软件复用）
• 准则7：使用Shell脚本来提高杠杆效应和可移植性
• 准则8：避免强制性的用户界面
• 准则9：让每个程序都称为过滤器

小准则

• 允许用户定制环境
• 尽量使操作系统内核小而轻量化
• 使用小写字母并尽量简短
• 沉默是金
• 各部分之和大于整体
• 寻求90%的解决方案

SOLID 五大设计原则

JS中用得比较多的是S 和 O原则，其他原则了解其用意即可

S(simple) - 单一职责原则

• 一个程序只做好一件事
• 如果功能过于复杂就拆分开，每个部分保持独立

O(open) - 开放封闭原则

• 对拓展开放，对修改封闭
• 增加需求时，拓展新代码，而非修改已有代码
• 这是软件设计的终极目标

L - 李氏置换原则

• 子类能覆盖父类
• 父类能出现的地方子类就能出现
• js中使用极少（弱类型 & 继承使用较少）

I(interface) - 接口独立原则

• 保持接口的单一独立，避免出现“胖接口”
• 类似于单一职责原则，这里更关注接口
• js中没有借口(typescript除外)，使用较少

D - 依赖导致原则

• 面向接口编程，依赖与抽象而不依赖于具体
• 使用防止关注接口而不关注具体类的实现
• js中使用较少（没有接口 & 弱类型）

用promise说明SO (例子)

• 单一职责原则：每个then中的逻辑只做好一件事
• 开放封闭原则：如果新增需求，拓展then
• 对拓展开放、对修改封闭

创建型

工厂模式（工厂方法模式，抽象工厂模式、建造者模式）

• 将new操作单独封装
• 遇到new时，就要考虑是否使用工厂模式

场景：

• jQuery - $(‘div’)
• React.createElement
• Vue异步组件

设计原则验证

• 构造函数和创建者分离
• 符合开放封闭原则

单例模式

• 系统中被唯一使用
• 一个类只有一个实例

场景：

• jQuery只有一个$
• 模拟登录框
• 其他

设计原则验证

• 符合单一职责原则，只实例化唯一的对象
• 没法具体开放封闭原则，但是绝对不违反开封封闭原则

组合型

适配器模式

• 旧接口格式和使用者不兼容
• 中间加一个适配转换接口
• 老的东西与新东西不兼容，尽量使用适配器来解决

装饰器模式

• 为对象添加新功能
• 不改变其原有的结构和功能
• core-decorators：装饰器库

设计原则验证

• 将现有对象和装饰器进行分离，两者独立存在
• 符合开放封闭原则

代理模式

• 使用者无权访问目标对象
• 中间加代理，通过代理做授权和控制

设计原则验证

• 代理类和目标类分离，隔离目标类和使用者
• 符合开放封闭原则

代理模式 vs 适配器模式

• 适配器模式：提供一个不同的接口（如不同版本的插头）
• 代理模式：提供一模一样的接口

代理模式 vs 装饰器模式

• 装饰器模式：扩展功能，原有功能不变且可直接使用
• 代理模式：显示原有功能，但是经过限制或者阉割之后的

外观模式

• 为子系统中的一组接口提供了一个高层接口
• 使用者使用这个高层接口

设计原则验证

• 不符合单一职责原则和开放封闭原则，因此谨慎使用，不可滥用

行为型-1

观察者模式

• 发布 & 订阅
• 一对多

场景

• 网页事件绑定
• promise
• jquery callbacks
• node.js自定义事件

迭代器模式

• 顺序访问一个集合
• 使用者无需知道集合的内部结构（封装）

设计原则验证

• 迭代器对象与目标对象分离
• 迭代器将使用者与目标对象隔离开
• 符合开放封闭原则

状态模式

• 一个对象有状态变化
• 每次状态变化都会触发一个逻辑
• 不能总是用if…else来控制

场景

• 有限状态机

  • 有限个状态，以及在这些状态之间的变化
  • 如交通信号灯
  • 使用开源库lib：javascript-state-machine

• 写一个简单的Promise

  • 三种状态：pending fullfilled rejected
  • pending -> fullfilled 或者 pending -> rejected
  • 不可逆向变化

设计原则验证

• 将状态对象和主题对象分离，状态的变化逻辑单独处理
• 符合开放封闭原则

其他模式

创建型

原型模式

• clone自己，生成一个新对象

组合型

桥接模式

• 用于把抽象化与实现化解耦
• 使得二者可以独立变化
  -（未找到js中经典应用场景）

组合模式

• 生成树形结构，表示‘整体-部分关系’
• 让整体和部分都具有一致的操作方式

享元模式

• 共享内存（主要考虑内存，而非效率）
• 相同的数据，共享使用
  -（未找到js中经典应用场景）

行为型

策略模式

• 不同策略分开处理
• 避免出现大量if…else 或者 switch…case
  -（未找到js中经典应用场景）

模板方法模式

• 将需要执行的各个方法统一在某个方法中初始化，对外展示

职责连模式

• 一步操作可能分为多个职责角色来完成
• 把这些角色都分开，然后用一个链串起来
• 将发起者和各个处理者进行隔离

设计原则验证

• 发起者与各个处理者进行隔离
• 符合开放封闭原则

命令模式

• 执行命令时，发布者与执行者分开
• 中间加入命令对象，作为中转站

设计原则验证

• 命令对象与执行对象分开，解耦
• 符合开放封闭原则

中介者模式

• 讲各个对象通过中介者关联

设计原则验证

• 讲各关联对象通过中介者隔离
• 符合开放封闭原则

备忘录模式

• 随时记录一个对象的状态变化
• 随时可以恢复之前的某个状态（如撤销功能）
• 未找到js中经典应用，除了一些工具（如编辑器）

设计原则验证

• 状态对象与使用者分开，解耦
• 符合开放封闭原则

访问者模式

解释器模式

ES6 Iterator

为何存在

• Array Map Set String TypedArray arguments nodeList等数据有序集合
• 需要有一个统一的遍历接口来遍历所有数据类型
  注意：object不是有序集合，可以用Map来代替

Iterator是什么

• 以上数据类型，都有[Symbol.iterator]属性
• 属性值是函数，执行函数返回一个迭代器
• 这个迭代器就有next方法可顺序迭代子元素
• 可运行Array.prototype[Symbol.iterator]来测试
• Iterator中没有hasNext()方法，可通过next()方法返回的done属性判断是否还有下一个子元素