秋雨
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
  • 构造器模式
  • 原型链模式
  • 工厂模式
  • 抽象工厂模式
  • 建造者模式
  • 单例模式
  • 装饰器模式
  • 适配器模式
  • 适配器模式
  • 代理模式
  • 观察者模式
  • 发布订阅模式
  • 模块模式
  • 桥接模式
  • 组合模式
  • 命令模式
  • 命令模式
  • 迭代器模式
  • 职责链模式

简介

抽象工厂模式不直接生成实例,而是用于对产品类簇的创建

ES6

class User {
  constructor(name, role, pages) {
    this.name = name;
    this.role = role;
    this.pages = pages;
  }

  weclome() {
    console.log("欢迎回来" + this.name);
  }
  dataShow() {
    throw new Error("抽象方法需要被实现");
  }
}

class SuperAdmin extends User {
  constructor(name) {
    super(name, "superadmin", [
      "home",
      "user-manage",
      "right-manage",
      "news-manage",
    ]);
  }
  dataShow() {
    console.log("superadmin-datashow");
  }

  addRight() {}

  addUser() {}
}

class Admin extends User {
  constructor(name) {
    super(name, "admin", ["home", "user-manage", "news-manage"]);
  }

  dataShow() {
    console.log("admin-datashow");
  }

  addUser() {}
}

class Editor extends User {
  constructor(name) {
    super(name, "editor", ["home", "news-manage"]);
  }

  dataShow() {
    console.log("editor-datashow");
  }
}

function getAbstractUserFactory(role) {
  switch (role) {
    case "superadmin":
      return SuperAdmin;
    case "admin":
      return Admin;
    case "editor":
      return Editor;
    default:
      throw new Error("参数错误");
  }
}

let UserClass = getAbstractUserFactory("admin");

let user = new UserClass("kerwin");
最后更新:
贡献者: Mrlishizhen
Prev
工厂模式
Next
建造者模式