# JavaScript 设计模式与开发实践

曾探

◆ 前言

这就造成了 JavaScript 语言的装饰者模式不再关注于给对象动态添加职责,而是关注于给函数动态添加职责。

辨别模式的关键是这个模式出现的场景,以及为我们解决了什么问题。

◆ 第一部分 基础知识

鸭子类型指导我们只关注对象的行为,而不关注对象本身,也就是关注 HAS-A,而不是 IS-A。

多态

多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来,也就是将“不变的事物”与“可能改变的事物”分离开来。

相对于修改代码来说,仅仅增加代码就能完成同样的功能,这显然优雅和安全得多。

在 JavaScript 这种将函数作为一等对象的语言中,函数本身也是对象,函数用来封装行为并且能够被四处传递。当我们对一些函数发出“调用”的消息时,这些函数会返回不同的执行结果,这是“多态性”的一种体现,也是很多设计模式在 JavaScript 中可以用高阶函数来代替实现的原因。

相比对象的类型,客户更关心对象的行为。

创建型模式、结构型模式和行为型模式

如果对象无法响应某个请求,它会把这个请求委托给它的构造器的原型

分离业务代码中变化与不变的部分

让函数继续返回一个可执行的函数,意味着运算过程是可延续的。

◆ 第二部分 设计模式

创建对象和管理单例的职责被分布在两个不同的方法中,这两个方法组合起来才具有单例模式的威力

状态在这里通常指属性

# 多态

同一个操作,在不同对象上,运行结果不同。做。开放原则:对扩展开放,对修改关闭。

设计模式 系统中稳定不变的部分和容易变化的部分隔离开

创建型 封装创建对象的变化

原型模式 (克隆)

行为型 对象的行为变化

结构型 对象之间的组合关系

This/Call/Apply/bind

# 闭包

# 高阶函数

参数是函数 分离业务代码中变化与不变的部分

返回值是函数 让函数继续返回一个可执行的函数,意味着运算过程是可延续的。

Currying 函数柯里化 部分求值

uncurrying 反柯里化 保存 this 使用其他对象的方法

节流函数

分段函数

懒惰加载函数

# 单例

instance

代理 instance

惰性(非不要不生成,生成了直接用原来的对象)单例

创建对象和管理单例的职责被分布在两个不同的方法中,这两个方法组合起来才具有单例模式的威力

JavaScript 中 单例的应用:Vuex 模态框隐藏显示 axios 取消重复请求

# 策略模式

省略大量 if else 及重复代码 观察可变量和不可变量 状态 行为

应用:表单 动画 业务判断

# 迭代模式

顺序判断的时候可以使用迭代器模式

# 订阅发布 / 观察者模式

订阅者

发布者 一个订阅者列表 一个触发函数

# 命令模式 隔离对象和行为

# 享元模式 共享内部状态

# 责任链模式 链式处理不同的情况 减少 ifelse 判断

# 中介者模式 通过一个中介对象去处理其他对象之间的耦合

# 装饰器模式 在不影响原功能的情况下 添加新的功能