秋雨
首页
  • 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 Navbar {
  init() {
    console.log("navbar-init");
  }

  getData() {
    console.log("navbar-getData");
    return "navbar-1111";
  }

  render() {
    console.log("navbar-render");
  }
}

class List {
  init() {
    console.log("List-init");
  }

  getData() {
    console.log("List-getData");
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("list-1111");
      }, 1000);
    });
  }

  render() {
    console.log("List-render");
  }
}

class Creator {
  async startBuild(builder) {
    await builder.init();
    await builder.getData();
    await builder.render();
  }
}

const op = new Creator();
op.startBuild(new Navbar());
op.startBuild(new List());

建造者模式将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示。工厂模式主要是为了创建对象或者类簇(抽象工厂),关心的事最终产出(创建)的是什么,而不关心创建的过程。二建造者模式关心的事创建这个对象的整个过程,甚至于每个细节。

最后更新:
贡献者: Mrlishizhen
Prev
抽象工厂模式
Next
单例模式