继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

javascript设计模式之其他设计模式

侠客岛的含笑
关注TA
已关注
手记 133
粉丝 1.6万
获赞 1807

创建型

原型模式

  • clone自己,生成一个新对象,减少开销
  • java 默认有clone接口,不用自己实现
  • prototype 可以理解为ES6 class的一种底层原理
  • 而class是实现面向对象的基础,并不是服务于某个模式
  • 若干年后ES6全面普及,大家可能会忽略掉 prototype
  • 但是Object.create会长久保留
    图片描述

结构型

桥接模式

  • 用于把抽象化与实现化解耦
  • 使得二者可以独立变化
  • 验证
    • 抽象和实现分离,解耦
    • 符合开放封闭原则

图片描述

组合模式

  • 生成树形结构,表示“整体-部分”关系
  • 让整体和部分都具有一致的操作方式
  • 虚拟DOM中的vnode是这种形式,但数据类型简单
  • 整体和单个节点的操作是一致的
  • 整体和单个节点的数据结构也保持一致
  • 验证
    • 将整体和单个节点的操作抽象出来
    • 符合开放封闭原则

图片描述

享元模式

  • 共享内存(主要考虑内存,而非效率)
  • 相同的数据,共享使用
  • 验证
    • 将相同的部分抽象出来
    • 符合开放封闭原则

图片描述

行为型

策略模式

  • 不同策略分开处理
  • 避免出现大量if…else或者switch…case
  • 验证
    • 不同策略,分开处理,而不是混合在一起
    • 符合开放封闭原则

图片描述

模板方法模式

图片描述

职责链模式

  • 一步操作可能分位多个职责角色来完成
  • 把这些角色都分开,然后用一个链串起来
  • 将发起者和各个处理者进行隔离
  • 职责链模式和业务结合较多,JS中能联想到链式操作
  • jQuery的链式操作Promise.then的链式操作
  • 验证
    • 发起者与各个处理者进行隔离
    • 符合开放封闭原则

图片描述

命令模式

  • 执行命令时,发布者和执行者分开
  • 中间加入命令对象,作为中转站
  • 网页富文本编辑器操作,浏览器封装了一个命令对象
    • document.execCommand("bold’)
    • document.execCommand('undo)
  • 验证
    • 命令对象与执行对象分开,解耦
    • 符合开放封闭原则

图片描述
图片描述

备忘录模式

  • 随时记录一个对象的状态变化
  • 随时可以恢复之前的某个状态(如撤销功能)
  • 验证
    • 状态对象与使用者分开,解耦
    • 符合开放封闭原则

图片描述
图片描述

中介者模式

  • 将各关联对象通过中介者隔离
  • 符合开放封闭原则

图片描述

图片描述

访问者模式

  • 将数据操作和数据结构进行分离
  • 使用场景不多

解释器模式

  • 描述语言语法如何定义,如何解释和编译
  • 用于专业场景

实践

图片描述

  • 工厂模式:$(xxx’),创建商品
  • 单例模式:购物车
  • 装饰器模式:打点统计
  • 观察者模式:网页事件,Promise
  • 状态模式:添加到购物车&从购物车删除
  • 模板方法模式:渲染有统一的方法,内部包含了各模块渲染
  • 代理模式:打折商品信息处理
打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP