设计模式之其他设计模式(7-1)

简介: 设计模式之其他设计模式(7-1)

1、原型模式

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 自己敲一下
// 原型模式
const prototype = {
  getName: function () {
    return this.first + " " + this.last;
  },
  say: function () {
    alert("say");
  },
};
// 基于原型创建 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();
复制代码
  • 结果展示 弹出预期的结果

网络异常,图片无法展示
|

网络异常,图片无法展示
|

2、桥接模式

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 自己 敲一遍
// 桥接模式
class Color {
  constructor(name) {
    this.name = name;
  }
}
class Shap {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  draw() {
    console.log(`${this.color.name} ${this.name}`);
  }
}
const red = new Color("red");
const yellow = new Color("yellow");
const circle = new Shap("circle", red);
circle.draw();
const triangle = new Shap("triangle", yellow);
triangle.draw();
复制代码
  • 结果展示

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、组合模式

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

4、享元模式

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

5、策略模式

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 自己敲一下

网络异常,图片无法展示
|

  • 结果 ok的

网络异常,图片无法展示
|

  • 策略模式 更改一下
// 策略模式 优化一下
class OrdinaryUser {
  buy() {
    console.log("普通 用户购买");
  }
}
class MemuberUser {
  buy() {
    console.log("memuber 用户购买");
  }
}
class VipUser {
  buy() {
    console.log("vip 用户购买");
  }
}
let u1 = new OrdinaryUser();
u1.buy();
let u2 = new MemuberUser();
u2.buy();
let u3 = new VipUser();
u3.buy();
复制代码

网络异常,图片无法展示
|

网络异常,图片无法展示
|

6、模版方法 模式

  • 常用思想

网络异常,图片无法展示
|

7、职责链 模式

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 自己敲一下
// 职责链 模式
class Action {
  constructor(name) {
    this.name = name;
    this.nextAction = null;
  }
  setNextAction(action) {
    this.nextAction = action;
  }
  handle() {
    console.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();
复制代码
  • 结果

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|




相关文章
|
9月前
|
设计模式 算法 Java
C++设计模式
C++设计模式
52 0
|
9月前
|
设计模式 数据中心
常用设计模式这样学
常用设计模式这样学
|
设计模式 安全 Java
设计模式之单列模式
设计模式之单列模式
78 0
|
设计模式 存储 算法
设计模式
设计模式
|
设计模式
纵观设计模式
前言: 设计模式已经学习了近一个月,但深知还没有学到设计模式的精髓,先将这一阶段的感受记录下来,以后加实例辅助学习。
102 0
纵观设计模式
|
设计模式 算法 程序员
【3W2H设计模式】什么是设计模式
【3W2H设计模式】什么是设计模式
300 0
|
设计模式 程序员
设计模式(二)
设计模式
141 1
|
存储 设计模式 XML
设计模式(六)
设计模式
197 0
|
设计模式 数据可视化 程序员
设计模式(一)
设计模式
131 0
|
设计模式 uml
设计模式(二),设计模式详解
设计模式(二),设计模式详解