你好世界
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • DesignMode

    • 设计模式
    • 面向对象
    • UML 类图
    • 设计原则
    • 面试题分析
    • 工厂模式
    • 单例模式
    • 适配器模式
    • 装饰器模式
    • 代理模式
    • 外观模式(网关?)
    • 观察者模式
    • 迭代器模式
    • 状态模式
    • 其它设计模式
  • SoftwareArchitecturePatterns

    • SoftwareArchitecturePatterns (软件架构模式)
    • MVVC
    • MVC
    • MVP

其它设计模式

优先级划分依据

  • 不常用
  • 对应不到经典的应用场景

创建型

原型模式

概念

  • clone自己,生成一个新对象;
  • java默认有clone接口,不用自己实现;

示例

// 一个原型 对象
const prototype = {
  getName: function(){
    return this.first + '' + this.last
  },
  say: function(){
    alert('hello');
  }
}

// 基于原型创建x
let x = Object.create(prototype);
x.first = "A";
x.last = "B";
alert(x.getName());
x.say();
// 基于原型创建y
let y = Object.create(prototype);
y.first = "C";
y.last = "D";
alert(y.getName());
y.say();

对比JS中的原型prototype

  • prototype可以理解为ES6 class的一种底层原理;
  • 而class是实现面向对象的基础,并不是服务于某个模式;
  • 若干年后ES6全面普及,可能会忽略掉prototype;
  • Object.create却会长久存在;

结构型

桥接模式

概念

  • 用于把抽象化与实现化解耦
  • 使得二者可以独立变化

组合模式

概念

  • 生成树形结构,表示“整体-部分”关系;
  • 让整体和部分都具有一致的操作方式;

享元模式

概念

  • 共享内存(主要考虑内存,而非效率);
  • 相同的数据,共享使用;

行为型

策略模式

概念

  • 不同策略分开处理;
  • 避免出现大量if...else 或者 switch...case

模板方法模式

  • ...

职责链模式

概念

  • 一步操作可能分为多个职责角色来完成;
  • 把这些角色都分开,然后用一个链串起来;
  • 将发起者和各个处理者进行隔离;

示例

// 请假审批,需要组长审批、经理审批、最后总监审批
class Action {
  constructor(name){
    this.name = name
    this.nextAction = null
  }
  setNextAction(action){
    this.nextAction = action
  }
  handle() {
    corfsole.log(`${this.name}审批`)
    if (this.nextAction != null) {
      this.nextAction.handle()
    }
  }
}
let a1 = new Action('组长')
let a2 = new Action('经理')
let a3 =new Action('总监')
a1.setNextAction(a2)
a2.setNextAction(a3)
a1.handle()

JS中的链式操作

  • 职责链模式和业务结合较多,JS中能联想到链式操作;
  • jQuery的链式操作 Promise.then 的链式操作;

命令模式

概念

  • 执行命令时,发布者和执行者分开
  • 中间加入命令对象,作为中转站

示例

class Receiver {
  exec(){
    console.log('执行')
  }
}
class Command {
  constructor(receiver){
    this.receiver = receiver;
  }
  cmd(){
    console.log('触发命令')
    this.receiver.exec();
  }
}
class Invoker {
  constructor(command){
    this.command = command
  }
  ivoke(){
    console.log('开始');
    this.command.cmd();
  }
}
// 士兵
let soldier = new Receiver();
// 小号手
let trumpeter = new Command(soldier);
// 将军
let general = new Invoker(trumpeter);
general.ivoke();

JS中的应用

  • 网页富文本编辑器操作,浏览器封装了一个命令对象;
  • document.execCommand('bold');
  • document.execCommand('undo');

备忘录模式

概念

  • 随时记录一个对象的状态变化
  • 随时可以恢复之前的某个状态(如撤销功能)

中介者模式

  • ...

访问者模式

概念

  • 将数据操作和数据结构进行分离

解释器模式

概念

  • 描述语言语法如何定义,如何解释和编译
最后更新时间: 3/7/22, 9:11 PM
贡献者: DESKTOP-ER5718D\zt
Prev
状态模式