# 设计模式

**Repository Path**: lyc458216/design-pattern

## Basic Information

- **Project Name**: 设计模式
- **Description**: 偏向于前端的设计模式
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-19
- **Last Updated**: 2021-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JS 设计模式

#### 介绍

使用 javascript 语法实现设计模式

#### babel 安装

```bash
cnpm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest -D
```

并配置 .babelrc 文件：

```json
{
  "presets": ["es2015", "latest"]
}
```

#### 安装 babel 装饰器

```bash
cnpm install babel-plugin-transform-decorators-legacy -D
```

并配置 .babelrc 文件：

```json
{
  "plugins": ["transform-decorators-legacy"]
}
```

#### TypeScript 演示网址

https://www.typescriptlang.org/play

# 装饰器模式

装饰类

```javascript
// 装饰类的原理

@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A;
```

#### 第三方 装饰器类库 core-decorators

```bash
cnpm install core-decorators --save
```

示例见 03-装饰器-4.js

#### 迭代器模式

ES6 语法中有序结合的类型：
Array、Map、Set、String、TypedArray、arguments、NodeList

ES6 Iterator 是什么？

以上数据类型，都有 [Symbol.iterator] 属性

属性值是函数，执行函数返回一个迭代器

注意：object 不是有序集合，可以用 Map 代替

`Symbol.iterator` 并不是人人都知道
也不是每个人都需要封装一个 each 方法
因此有了 `for...of` 语法

#### 状态模式

有限状态机

有限个状态、以及在这些状态之间的变化，如交通信号灯

使用开源 lib：javascript-state-machine

Promise 就是有限状态机

Promise 三种状态：pending、fullfilled、rejected

pending -> fullfilled 或者 pending -> rejected

不能逆向变化

#### 原型模式

对比 JS 中的原型 prototype

prototype 可以理解为 ES6 class 的一种底层原理

而 class 是实现面向对象的基础，并不是服务于某个模式

若干年后 ES6 全面普及，大家可能会忽略掉 prototype

但是 Object.create 却会长久存在

#### 桥接模式

用于把抽象化与实现化解耦

使得二者可以独立变化

#### 组合模式

生成树形结构，表示 “整体-部分”关系

让整体和部分都具有一致的操作方式，将整体和单个节点的操作抽象出来

整体和单个节点的数据结构也保持一致

虚拟 DOM 中的 vnode 是这种形式

#### 享元模式

共享内存（主要考虑内存，而非效率）

相同的数据，共享使用

#### 策略模式

不同策略，分开处理，而不是混在一起

#### 职责链模式

职责链模式和业务结合较多，JS 中能联想到链式操作

jQuery 的链式操作 Promise.then 的链式操作

#### 中介者模式

将各关联对象通过中介者隔离

#### 解释器模式

描述语言语法如何定义，如何解释和编译

如果自己实现 Babel 或 Sass 会用到

#### 购物车 demo UML 类图

![Image '购物车UML类图.png'](购物车UML类图.png)

#### Demo 中使用到的设计模式

工厂模式：\$('xxx')
创建商品：商品中可能会有折扣信息，折扣信息中有逻辑要处理，所以在工厂函数中把这逻辑处理，最后返回商品的实例

单例模式：购物车
没有直接返回 Cart 类，而是返回了 getCart 函数，函数里面返回购物车单例

装饰器模式：日志统计

观察者模式：网页事件 click, Promise

状态模式：添加到购物车 & 从购物车删除

模板方法模式：参考每个类的 init 函数，渲染有统一的方法，内部包含了各种模块渲染

代理模式：打折商品信息处理