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

简介

由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类对象。

ES5

function UserFactory(role) {
  function User(role, pages) {
    this.role = role;
    this.pages = pages;
  }

  switch (role) {
    case "superadmin":
      return new User("superadmin", [
        "home",
        "user-manage",
        "right-manage",
        "news-manage",
      ]);
      break;

    case "admin":
      return new User("admin", ["home", "user-manage", "news-manage"]);
      break;

    case "editor":
      return new User("editor", ["home", "news-manage"]);
      break;

    default:
      throw new Error("参数错误");
  }
}

let user = new UserFactory("admin");

ES6

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

  static UserFactory(role) {
    switch (role) {
      case "superadmin":
        return new User("superadmin", [
          "home",
          "user-manage",
          "right-manage",
          "news-manage",
        ]);
        break;

      case "admin":
        return new User("admin", ["home", "user-manage", "news-manage"]);
        break;

      case "editor":
        return new User("editor", ["home", "news-manage"]);
        break;

      default:
        throw new Error("参数错误");
    }
  }
}

let user = User.UserFactory("admin");
最后更新:
贡献者: Mrlishizhen
Prev
原型链模式
Next
抽象工厂模式