JavaScript设计模式
2019-03-21 10:19:26 0 举报登录查看完整内容
JavaScript设计模式UML
作者其他创作
大纲/内容
1. 随时记录一个对象的变化2.随时可以恢复之前的某个状态（如撤销）
SingletoPattern
+ main() : void
Target
+ adaptee : Adaptee
+ request()
Fn3
+ parma： String
+ do()
Subject
+ list : Array
+ getIterator() : Iterator
1. 一步操作分为多个职责角色处理2，将角色分开，用一个链串起来3. 将发起者和各个执行者隔离
1. 通过一个高级接口用来处理杂乱请求，总-分形式2. 不符合单一和开放封闭原则
状态模式
备忘录模式
Client
+ proxyImg : ProxyImg
+ main()
代理模式
1. 为对象添加新功能2. 不改变原有的结构和功能举例：1. ES7中Decorator2. core-decorator
系统中只有一个一个类只有一个实例举例：1.vuex redux中的store
1. 顺序访问一个集合2. 使用者无须知道集合内部结构举例：ES6 Iterator 、 jquery each
享元模式
Client1
+ facde: Facde
Iterator
- list : Array- index : int
+ next() : ini+ hasNext() : boolean
中介者模式
命令模式
State
+ handle(context)
asks
Creator
+ create(name): Product1+ start(name): Product2
观察者模式
Facade
+ fn1(): Fn1+ fn2() : Fn2+ fn3() : Fn3
1. 不同策略分开处理2. 避免出现大量if-else 或 switch-case
外观模式
作为两个不兼容的接口之间的桥梁
1. 用于将抽象化和实现化解耦2. 使二者独立
+ circle: Circle+ dec : Decorator
举例：1. 网页 ajax proxy 2. ES6 proxy3. dom事件委托
组合模式
访问者模式
Circle
+ draw()
Context
- state
+ getState() : State+ setState(state)
Decorator
+ realImg : RealImg
+ display()
Client2
+ circle: Circle
+ draw()+ setRedBorder(circle)
RealImg
+ fileName: String
+ display()+ loadFromDisk()
Product2
+ name: String
+ init()+ fn2()
装饰器模式
迭代器模式
桥接模式
1. 一个对象有状态变化2. 每次状态变化都会触发一个逻辑3. 不能总是用if-else控制举例：有限状态机promise中pending，fullfilled reject
1. 生成树形结构，表示“整体-部分”关系2. 让整体和部分的操作是一致的3. 整体和部分的数据结构也保持一致举例：DOM
1. 执行命令时，发布者和执行者分开2，中间加入命令对象，作为中转站举例：
1.一对多 发布订阅举例： promise、 jquery中callbacknodeJs中自定义事件vue react 组件生命周期触发vue watch
适配器模式
策略模式
returns
Observer
+name : String+ subject : Subject
+update()
Adaptee
+ specificRequest()
Fn1
+ target : Target
Fn2
单例模式
- observers :Array- state : init
+ getState(): init+setState(state)+ attach(observer)+ notifyAllObserver()
1. 将数据结构与数据操作分离
SingleObject
-instance: singleObject
- SingleObject()+ getInstance() : SingleObject+ showMessage() : void
职责链模式
工厂模式
Product1
+ init()+ fn1()+ fn2()
收藏
0 条评论
回复 删除
下一页
