JS 设计模式

介绍

使用 javascript 语法实现设计模式

babel 安装

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

并配置 .babelrc 文件：

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

安装 babel 装饰器

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

并配置 .babelrc 文件：

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

TypeScript 演示网址

https://www.typescriptlang.org/play

装饰器模式

装饰类

// 装饰类的原理

@decorator
class A {}

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

第三方 装饰器类库 core-decorators

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 类图

Demo 中使用到的设计模式

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

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

装饰器模式：日志统计

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

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

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

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