js设计模式【详解】—— 建造者模式

简介: js设计模式【详解】—— 建造者模式

建造者模式的定义

用途: 创建极其复杂的对象(若不是极其复杂的对象,应选择使用对象字面或工厂模式等方式创建对象)

核心思想:分步构建一个复杂的对象,可以用不同组合或顺序建造出不同意义的对象。

实现原理:通常使用链式调用来进行建造过程,最后调用build方法生成最终对象。

与工厂模式的区别:

  • 工厂模式关注的是创建的结果
  • 建造者模式不仅得到了结果,同时也参与了创建的具体过程

演示范例 —— 建造者模式

代码解析:此处将自动创建withxxxbuild的代码提取为父类BaseBuilder,在创建其他建造者类时继承该父类,这使得在创建多个建造者类时变得十分容易。

//父类
class BaseBuilder {
  init() {
    Object.keys(this).forEach(key => {
      const withName = `with${key.substring(0, 1).toUpperCase()}${key.substring(1)}`;
      this[withName] = value => {
        this[key] = value;
        return this;
      }
    })
  }
 
  build() {
    const keysNoWithers = Object.keys(this).filter(key => typeof this[key] !== 'function');
 
    return keysNoWithers.reduce((returnValue, key) => {
      return {
        ...returnValue,
        [key]: this[key]
      }
    }, {})
  }
}
 
//子类1: 书籍建造者类
class BookBuilder extends BaseBuilder {
  constructor() {
    super();
 
    this.name = '';
    this.author = '';
    this.price = 0;
    this.category = '';
    
    super.init();
  }
}
 
//子类2: 印刷厂建造者类
class printHouseBuilder extends BaseBuilder {
  constructor() {
    super();
 
    this.name = '';
    this.location = '';
    this.quality = '';
 
    super.init();
  }
}
 
//调用书籍建造者类
const book = new BookBuilder()
  .withName("高效能人士的七个习惯")
  .withAuthor('史蒂芬·柯维')
  .withPrice(51)
  .withCategory('励志')
  .build();
 
 
//调用印刷厂建造类
const printHouse = new printHouseBuilder()
  .withName('新华印刷厂')
  .withLocation('北京海淀区')
  .withQuality('A')
  .build();

BaseBuilder类自动创建withxxxbuild的代码的最终效果如下:

//书籍建造者类
class BookBuilder {
  constructor() {
    this.name = '';
    this.author = '';
    this.price = 0;
    this.category = '';
  }
  
  withName(name) {
    this.name = name;
    return this;
  }
 
  withAuthor(author) {
    this.author = author;
    return this;
  }
 
  withPrice(price) {
    this.price = price;
    return this;
  }
 
  withCategory(category) {
    this.category = category;
    return  this;
  }
 
  build() {
    return {
      name: this.name,
      author: this.author,
      prices: this.price,
      category: this.category
    }
  }
}
 
//调用建造者类
const book = new BookBuilder()
  .withName("高效能人士的七个习惯")
  .withAuthor('史蒂芬·柯维')
  .withPrice(51)
  .withCategory('励志')
  .build();

更多设计模式详见——js设计模式【详解】总目录

https://blog.csdn.net/weixin_41192489/article/details/116154815

目录
相关文章
|
1天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
21 8
|
1天前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
17 7
|
1天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
20 7
|
1天前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
15 6
|
1天前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
14 6
|
1天前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
17 6
|
1天前
|
设计模式 存储 JavaScript
js设计模式【详解】—— 享元模式
js设计模式【详解】—— 享元模式
15 6
|
2月前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
12月前
|
设计模式 算法 JavaScript
|
设计模式 算法 JavaScript
你不知道的javascript设计模式(六)---- 策略模式
你不知道的javascript设计模式(六)---- 策略模式
114 0