建造者模式(Builder)在复杂对象创建中的应用

建造者模式(Builder)在复杂对象创建中的应用

建造者模式是一种创建型设计模式，用于分步骤构建复杂对象。它特别适用于那些具有多个组成部分或配置选项的对象，允许使用相同的构建过程创建不同的对象表示。在JavaScript中，这种模式能有效解决构造函数参数过多或对象构造逻辑复杂的问题。

建造者模式的基本结构

建造者模式通常包含以下几个关键角色：

1. 产品(Product)：最终要构建的复杂对象
2. 建造者(Builder)：定义创建产品各个部件的抽象接口
3. 具体建造者(ConcreteBuilder)：实现Builder接口，构造和装配产品的各个部件
4. 指挥者(Director)：使用Builder接口构建对象

// 产品类
class Pizza {
  constructor() {
    this.size = '';
    this.crust = '';
    this.toppings = [];
  }
  
  describe() {
    console.log(`这是一份${this.size}寸的${this.crust}比萨，配料有：${this.toppings.join(', ')}`);
  }
}

// 建造者接口
class PizzaBuilder {
  constructor() {
    this.pizza = new Pizza();
  }
  
  setSize(size) {
    this.pizza.size = size;
    return this;
  }
  
  setCrust(crust) {
    this.pizza.crust = crust;
    return this;
  }
  
  addTopping(topping) {
    this.pizza.toppings.push(topping);
    return this;
  }
  
  build() {
    return this.pizza;
  }
}

// 使用
const myPizza = new PizzaBuilder()
  .setSize(12)
  .setCrust('薄脆')
  .addTopping('蘑菇')
  .addTopping('洋葱')
  .addTopping('芝士')
  .build();

myPizza.describe();

为什么需要建造者模式

当对象具有以下特点时，建造者模式特别有用：

1. 构造过程复杂：对象需要多个步骤或多种配置才能完成构造
2. 多种表示：同一个构建过程可以创建不同的对象表示
3. 参数过多：构造函数需要大量参数，且许多参数是可选的

对比传统构造方式：

// 传统方式 - 构造函数参数过多
class Pizza {
  constructor(size, crust, toppings, sauce, cheese, extraOptions) {
    // ...
  }
}

// 使用建造者模式
const pizza = new PizzaBuilder()
  .setSize(12)
  .setCrust('薄脆')
  // ...其他可选配置
  .build();

建造者模式的进阶应用

1. 链式调用

建造者模式常与链式调用结合，使代码更加流畅易读：

class CarBuilder {
  constructor() {
    this.car = new Car();
  }
  
  setMake(make) {
    this.car.make = make;
    return this;
  }
  
  setModel(model) {
    this.car.model = model;
    return this;
  }
  
  setYear(year) {
    this.car.year = year;
    return this;
  }
  
  addFeature(feature) {
    if (!this.car.features) {
      this.car.features = [];
    }
    this.car.features.push(feature);
    return this;
  }
  
  build() {
    return this.car;
  }
}

class Car {
  describe() {
    console.log(`${this.year} ${this.make} ${this.model}`);
    if (this.features) {
      console.log('Features:', this.features.join(', '));
    }
  }
}

// 使用
const myCar = new CarBuilder()
  .setMake('Tesla')
  .setModel('Model S')
  .setYear(2023)
  .addFeature('自动驾驶')
  .addFeature('全景天窗')
  .build();

myCar.describe();

2. 验证逻辑

可以在build()方法中添加验证逻辑，确保构建的对象是有效的：

class UserBuilder {
  constructor() {
    this.user = {
      name: '',
      email: '',
      age: 0
    };
  }
  
  setName(name) {
    this.user.name = name;
    return this;
  }
  
  setEmail(email) {
    this.user.email = email;
    return this;
  }
  
  setAge(age) {
    this.user.age = age;
    return this;
  }
  
  build() {
    if (!this.user.name) {
      throw new Error('用户名不能为空');
    }
    if (!this.user.email.includes('@')) {
      throw new Error('邮箱格式不正确');
    }
    if (this.user.age < 0) {
      throw new Error('年龄不能为负数');
    }
    return this.user;
  }
}

try {
  const user = new UserBuilder()
    .setName('张三')
    .setEmail('zhangsan@example.com')
    .setAge(25)
    .build();
  console.log(user);
} catch (error) {
  console.error(error.message);
}

3. 与工厂模式结合

建造者模式可以与工厂模式结合，创建更复杂的对象结构：

class Computer {
  constructor() {
    this.cpu = '';
    this.ram = '';
    this.storage = '';
    this.gpu = '';
  }
  
  toString() {
    return `配置：CPU: ${this.cpu}, RAM: ${this.ram}, 存储: ${this.storage}, GPU: ${this.gpu}`;
  }
}

class ComputerBuilder {
  constructor() {
    this.computer = new Computer();
  }
  
  setCPU(cpu) {
    this.computer.cpu = cpu;
    return this;
  }
  
  setRAM(ram) {
    this.computer.ram = ram;
    return this;
  }
  
  setStorage(storage) {
    this.computer.storage = storage;
    return this;
  }
  
  setGPU(gpu) {
    this.computer.gpu = gpu;
    return this;
  }
  
  build() {
    return this.computer;
  }
}

class ComputerFactory {
  static createGamingPC() {
    return new ComputerBuilder()
      .setCPU('Intel i9')
      .setRAM('32GB DDR5')
      .setStorage('1TB NVMe SSD')
      .setGPU('NVIDIA RTX 4090')
      .build();
  }
  
  static createOfficePC() {
    return new ComputerBuilder()
      .setCPU('Intel i5')
      .setRAM('16GB DDR4')
      .setStorage('512GB SSD')
      .build();
  }
}

const gamingPC = ComputerFactory.createGamingPC();
console.log(gamingPC.toString());

const officePC = ComputerFactory.createOfficePC();
console.log(officePC.toString());

建造者模式在前端框架中的应用

1. React组件配置

在React中，可以使用建造者模式来配置复杂的组件：

class ModalBuilder {
  constructor() {
    this.modalProps = {
      title: '默认标题',
      content: '默认内容',
      buttons: [],
      size: 'medium',
      onClose: () => {}
    };
  }
  
  setTitle(title) {
    this.modalProps.title = title;
    return this;
  }
  
  setContent(content) {
    this.modalProps.content = content;
    return this;
  }
  
  addButton(text, onClick) {
    this.modalProps.buttons.push({ text, onClick });
    return this;
  }
  
  setSize(size) {
    this.modalProps.size = size;
    return this;
  }
  
  setOnClose(onClose) {
    this.modalProps.onClose = onClose;
    return this;
  }
  
  build() {
    return <Modal {...this.modalProps} />;
  }
}

// 使用
const modal = new ModalBuilder()
  .setTitle('警告')
  .setContent('确定要删除此项吗？')
  .addButton('取消', () => console.log('取消'))
  .addButton('确定', () => console.log('确定'))
  .setSize('small')
  .build();

// 在React组件中渲染
function App() {
  return (
    <div>
      {modal}
    </div>
  );
}

2. Vue选项配置

在Vue中，建造者模式可以用于配置组件选项：

class VueComponentBuilder {
  constructor() {
    this.options = {
      data: () => ({}),
      methods: {},
      computed: {},
      watch: {},
      components: {}
    };
  }
  
  setData(data) {
    this.options.data = () => data;
    return this;
  }
  
  addMethod(name, fn) {
    this.options.methods[name] = fn;
    return this;
  }
  
  addComputed(name, getter) {
    this.options.computed[name] = getter;
    return this;
  }
  
  addWatch(property, handler) {
    this.options.watch[property] = handler;
    return this;
  }
  
  addComponent(name, component) {
    this.options.components[name] = component;
    return this;
  }
  
  build() {
    return Vue.extend(this.options);
  }
}

// 使用
const MyComponent = new VueComponentBuilder()
  .setData({
    count: 0
  })
  .addMethod('increment', function() {
    this.count++;
  })
  .addComputed('doubleCount', function() {
    return this.count * 2;
  })
  .addWatch('count', function(newVal, oldVal) {
    console.log(`count从${oldVal}变为${newVal}`);
  })
  .build();

// 注册组件
Vue.component('my-component', MyComponent);

建造者模式的变体

1. 简化的建造者模式

对于简单的场景，可以省略Director角色，直接使用建造者：

class QueryBuilder {
  constructor() {
    this.query = {
      select: [],
      where: [],
      orderBy: '',
      limit: 0
    };
  }
  
  select(fields) {
    this.query.select = fields;
    return this;
  }
  
  where(condition) {
    this.query.where.push(condition);
    return this;
  }
  
  orderBy(field, direction = 'ASC') {
    this.query.orderBy = `${field} ${direction}`;
    return this;
  }
  
  limit(count) {
    this.query.limit = count;
    return this;
  }
  
  build() {
    let sql = 'SELECT ';
    sql += this.query.select.join(', ') || '*';
    sql += ' FROM table';
    
    if (this.query.where.length > 0) {
      sql += ' WHERE ' + this.query.where.join(' AND ');
    }
    
    if (this.query.orderBy) {
      sql += ' ORDER BY ' + this.query.orderBy;
    }
    
    if (this.query.limit > 0) {
      sql += ' LIMIT ' + this.query.limit;
    }
    
    return sql;
  }
}

// 使用
const query = new QueryBuilder()
  .select(['id', 'name', 'email'])
  .where('age > 18')
  .where('status = "active"')
  .orderBy('name')
  .limit(10)
  .build();

console.log(query);

2. 异步建造者

建造者模式也可以处理异步操作：

class ImageProcessorBuilder {
  constructor(image) {
    this.image = image;
    this.operations = [];
  }
  
  resize(width, height) {
    this.operations.push(async (img) => {
      console.log(`调整大小到 ${width}x${height}`);
      // 这里应该是实际的异步操作
      return img; // 返回处理后的图像
    });
    return this;
  }
  
  crop(x, y, width, height) {
    this.operations.push(async (img) => {
      console.log(`裁剪到 (${x},${y}) ${width}x${height}`);
      // 这里应该是实际的异步操作
      return img;
    });
    return this;
  }
  
  filter(filterName) {
    this.operations.push(async (img) => {
      console.log(`应用滤镜: ${filterName}`);
      // 这里应该是实际的异步操作
      return img;
    });
    return this;
  }
  
  async build() {
    let processedImage = this.image;
    for (const operation of this.operations) {
      processedImage = await operation(processedImage);
    }
    return processedImage;
  }
}

// 使用
(async () => {
  const originalImage = {}; // 假设这是原始图像对象
  
  const processor = new ImageProcessorBuilder(originalImage)
    .resize(800, 600)
    .crop(100, 100, 600, 400)
    .filter('sepia');
  
  const result = await processor.build();
  console.log('处理完成:', result);
})();

建造者模式的优缺点

优点

1. 分步构建：允许分步骤构建对象，控制构建过程
2. 复用构建代码：相同的构建过程可以创建不同的产品
3. 单一职责原则：将复杂对象的构造代码与其业务逻辑分离
4. 更好的可读性：链式调用使代码更加清晰易读
5. 灵活性：可以轻松添加新的构建步骤或改变现有步骤

缺点

1. 增加复杂性：需要创建多个额外的类，增加了代码复杂度
2. 性能开销：相比直接构造对象，建造者模式有一定的性能开销
3. 过度设计：对于简单对象，使用建造者模式可能显得过度设计

与其他创建型模式的比较

与工厂模式的区别

1. 关注点不同：工厂模式关注的是创建什么对象，而建造者模式关注的是如何创建复杂对象
2. 构建过程：工厂模式通常一步创建对象，建造者模式分多步构建
3. 产品复杂度：工厂模式适合创建简单对象，建造者模式适合创建复杂对象

与原型模式的区别

1. 创建方式：原型模式通过克隆现有对象来创建新对象，建造者模式通过分步构建
2. 初始状态：原型模式的对象初始状态由原型决定，建造者模式的对象初始状态由构建过程决定
3. 适用场景：原型模式适合对象创建成本高的情况，建造者模式适合对象构造复杂的情况

实际项目中的应用场景

1. 表单构建

class FormBuilder {
  constructor() {
    this.form = {
      fields: [],
      buttons: [],
      validations: []
    };
  }
  
  addTextField(name, label, placeholder = '') {
    this.form.fields.push({
      type: 'text',
      name,
      label,
      placeholder
    });
    return this;
  }
  
  addSelectField(name, label, options) {
    this.form.fields.push({
      type: 'select',
      name,
      label,
      options
    });
    return this;
  }
  
  addButton(text, type = 'button', onClick) {
    this.form.buttons.push({
      text,
      type,
      onClick
    });
    return this;
  }
  
  addValidation(fieldName, validator) {
    this.form.validations.push({
      fieldName,
      validator
    });
    return this;
  }
  
  build() {
    return this.form;
  }
}

// 使用
const userForm = new FormBuilder()
  .addTextField('username', '用户名', '请输入用户名')
  .addTextField('email', '邮箱', '请输入邮箱')
  .addSelectField('role', '角色', [
    { value: 'admin', text: '管理员' },
    { value: 'user', text: '普通用户' }
  ])
  .addButton('提交', 'submit', () => console.log('提交表单'))
  .addValidation('email', (value) => value.includes('@'))
  .build();

console.log(userForm);

2. API请求构建

class ApiRequestBuilder {
  constructor() {
    this.request = {
      method: 'GET',
      url: '',
      headers: {},
      params: {},
      data: null,
      timeout: 5000
    };
  }
  
  setMethod(method) {
    this.request.method = method;
    return this;
  }
  
  setUrl(url) {
    this.request.url = url;
    return this;
  }
  
  addHeader(key, value) {
    this.request.headers[key] = value;
    return this;
  }
  
  addParam(key, value) {
    this.request.params[key] = value;
    return this;
  }
  
  setData(data) {
    this.request.data = data;
    return this;
  }
  
  setTimeout(timeout) {
    this.request.timeout = timeout;
    return this;
  }
  
  build() {
    return this.request;
  }
  
  async execute() {
    // 这里使用fetch API执行请求
    const { method, url, headers, params, data, timeout } = this.request;
    
    const queryString = Object.keys(params)
      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
      .join('&');
    
    const fullUrl = queryString ? `${url}?${queryString}` : url;
    
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    try {
      const response = await fetch(fullUrl, {
        method,
        headers,
        body: data ? JSON.stringify(data) : undefined,
        signal: controller.signal
      });
      
      clearTimeout(timeoutId);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      clearTimeout(timeoutId);
      throw error;
    }
  }
}

// 使用
(async () => {
  try {
    const response = await new ApiRequestBuilder()
      .setMethod('POST')
      .setUrl('https://api.example.com/users')
      .addHeader('Content-Type', 'application/json')
      .addHeader('Authorization', 'Bearer token')
      .setData({
        name: '张三',
        email: 'zhangsan@example.com'
      })
      .setTimeout(3000)
      .execute();
    
    console.log('API响应:', response);
  } catch (error) {
    console.error('API请求失败:', error);
  }
})();

3. UI组件库配置

class ThemeBuilder {
  constructor() {
    this.theme = {
      colors: {},
      typography: