（JS设计模式篇）一、基础入门

一、搭建开发环境

1.初始化npm环境

2.安装webpack

3.安装webpack-dev-server

 

二、UML图

1.图写法

2.关系

泛化，表示继承

关联，表示引用

 

三、设计原则

1.描述：即按照哪一种思路或者标准来实现功能。

功能相同，可以有不同设计方案来实现

 

2.准则：

1).小即是美

2).让每个程序只做好一件事

3).快速建立原型

4).舍弃高效率而取可移植性

5).采用纯文本来存储数据

6).充分利用软件的杠杆效应（软件复用）

7).使用shell脚本来提高杠杆效应和可移植性

8).避免强制性的用户界面

9).让每个程序都称为过滤器

小准则：

1).允许用户定制环境

2).尽量使操作系统内核小而轻量化

3).使用小写字母并尽量简短

4).沉默是金

5).各部分之和大于整体

6).寻求90%的解决方案

 

3.五大设计原则（SOLID）

1).S-单一职责原则

a.一个程序只做好一件事

b.如果功能过于复杂就拆分开，每个部分保持独立

 

2).O-开放封闭原则

a.对扩展开发，对修改封闭

b.增加需求时，扩展新代码，而非修改已有代码

c.软件设计的终极目标

 

3).L-李氏置换原则

a.子类能覆盖父类

b.父类能出现的地方子类就能出现

c.JS中使用较少（弱类型&继承使用较少）

 

4).I-接口独立原则

a.保持接口的单一独立，避免出现“胖接口”

b.JS中没有接口（typescript例外），使用较少

c.类似于单一职责原则，这里更关注接口

 

5).D-依赖导致原则

a.面向接口编程，依赖于抽象而不依赖于具体

b.使用方只关注接口而不关注具体类的实现

c.JS中使用较少（没有接口&弱类型）

 

总结：1).S O 体现较多

2).L I D体现较少，但是要了解其用意

 

4.案例

用Promise来说明S O

单一职责原则：每个then中的逻辑只做好一件事

开放封闭原则：如果新增需求，扩展then

对扩展开放，对修改封闭。

 

四、从设计到模式

1.几种类型：创建型、结构型、行为型

1).创建型：工厂模式（工厂方法模式，抽象工厂模式，建造者模式）、单例模式、原型模式

2).结构型：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式

3).行为型：策略模式、模板方法模式、观察者模式、迭代器模式、指责连模式、命令模式、

备忘录模式、状态模式、访问者模式、中介者模式、解释器模式

 

五、工厂模式

1.介绍

将new操作单独封装

遇到new时，就要考虑是否该使用工厂模式

 

2.示例

你去购买汉堡，直接点餐、取餐，不会自己亲手做

商店要“封装”做汉堡的工作，做好直接给买者

 

3.UML类图

 

4.代码示例

 

5.场景

1).jQuery - $('div')

$('div')和 new $('div')有何区别？

第一：书写麻烦，jQuery的链式操作将成为噩梦

第二：一旦jQuery名字变化，将是灾难性的

2).React.createElement

3).vue异步组件

 

6.设计原则验证

构造函数和创建者分离

符合开放封闭原则

 

六、单例模式

1.介绍

系统中被唯一使用

一个类只有一个实例

 

2.示例

登录框

购物车

说明：单例模式需要用到java的特性（private）

ES6中没有（typescript除外）

只能用java代码来演示UML图的内容

 

3.场景

jQuery只有一个$

模拟登录框

 

七、适配器模式

1.介绍

旧接口格式和使用者不兼容

中间加一个适配转换接口

 

2.解决jquery项目中的兼容

说明：拿到一个jquery项目中很多$.ajax

使用适配器模式

说明：将旧接口和使用者进行分离   符合开放封闭原则

 

八、装饰器模式

1.介绍

为对象添加新功能

不改变其原有的结构和功能

 

2.使用场景

ES7装饰器

core-decorators   第三方库

 

ES7装饰器

配置环境

装饰类

装饰方法

 

3.第三方库 core-decorators

第三方开源lib

提供常用的装饰器

github上可以查看

 

使用示例：

设计原则验证

1.将现有对象和装饰器进行分离，两者独立存在

2.符合开放封闭原则

 

九、代理模式

1.介绍

使用者无权访问目标对象

中间加代理，通过代理做授权和控制

 

2.示例

科学上网。访问github

明星经纪人

 

 

3.场景

网页事件代理

jQuery $.proxy

ES6 Proxy

 

 

 

4.设计原则验证

a.代理类和目标类分类，隔离开目标类和使用者

b.符合开放封闭原则

 

十、几种模式区别

1.代理模式VS适配器模式

a.适配器模式：提供一个不同的接口（如不同版本的插头）

b.代理模式：提供一模一样的接口

 

2.代理模式VS装饰器模式

a.装饰器模式：扩展功能，原有功能不变且可直接使用

b.代理模式：显示原有功能，但是经过限制或者阉割之后的。

 

十一、外观模式

1.介绍

为子系统中的一组接口提供了一个高层接口

使用者使用这个高层接口

2.设计原则验证

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

 

十二、观察者模式

1.介绍

发布&订阅

一对多

 

2.场景

网页事件绑定

Promise

jQuery callbacks

nodejs自定义事件

 

3.其他场景

nodejs中：处理http请求；多进程通讯

vue和React组件生命周期触发

vue watch

4.设计原则验证

主题和观察者分离，不是主动触发而是被动监听，两者解耦

符合开放封闭原则

 

十三、迭代器模式

1.介绍

顺序访问一个集合

使用者无需知道集合的内部结构（封装）

 

2.示例

没有合适的示例，用常用的jQuery演示一下