工具函数 · 16/107
1. 抽象工厂模式 2. Adapter Pattern 3. Adapter Pattern 4. 实现一个支持柯里化的 add 函数 5. 计算两个数组的交集 6. 数组中的数据根据key去重 7. 实现一个add方法完成两个大数相加 8. 大数相加 9. bind、call、apply 的区别与实现 10. Bridge Pattern 11. Builder Pattern 12. 实现一个管理本地缓存过期的函数 13. 缓存代理 14. 转化为驼峰命名 15. 实现 (5).add(3).minus(2) 功能 16. 咖啡机进阶优化 17. 咖啡机状态管理 18. 常用设计模式总结 19. 咖啡机状态切换机制 20. 查找数组公共前缀(美团) 21. 实现一个compose函数 22. 并发请求调度器 23. 组合模式 24. 实现 console.log 代理方法 25. Decorator Pattern 26. 实现防抖和节流 27. 实现一个JS函数柯里化 28. 实现防抖函数(debounce) 29. Decorator Pattern 30. 手写深度比较isEqual 31. 消除 if-else 条件判断 32. 修改嵌套层级很深对象的 key 33. 设计模式应用 34. 验证是否是邮箱 35. 实现发布订阅模式 36. 外观模式 37. Facade Pattern 38. Factory Pattern 39. 工厂模式 40. 工厂模式实现 41. Flyweight Pattern 42. 前端常用设计模式与场景 43. 提取对象中所有value大于2的键值对 44. 用正则实现根据name获取cookie中的值 45. 获取今天的日期 46. ES6 之前的迭代器模式 47. 实现 getValue/setValue 函数来获取path对应的值 48. 验证是否是身份证 49. 迭代器模式 50. jQuery slideUp 动画队列堆积问题 51. 实现一个JSON.parse 52. 实现 LazyMan 任务队列 53. 实现一个JSON.stringify 54. 实现lodash的chunk方法--数组按指定长度拆分 55. 字符串最长的不重复子串 56. LRU 缓存算法 57. 查找字符串中出现最多的字符和个数 58. new 操作符的实现原理 59. 中介者模式 60. 中介者模式 61. 对象数组如何去重 62. 千分位格式化 63. 实现观察者模式 64. 观察者模式实例 65. 观察者模式 66. 实现观察者模式 67. 实现 padStart() 和 padEnd() 的 Polyfill 68. 判断是否是电话号码 69. Proxy Pattern 70. 代理模式:婚介所 71. Proxy Pattern 72. 代理模式 73. 实现上拉加载和下拉刷新 74. 生成随机数组并排序 75. 大文件断点续传实现 76. 使用 setInterval 模拟实现 setTimeout 77. 重构询价逻辑 78. 实现一个简单的路由 79. setTimeout 模拟实现 setInterval 80. RGB 转 Hex 颜色转换 81. setTimeout与setInterval实现 82. Simple Factory Pattern 83. 实现单例模式 84. 实现一个 sleep 函数 85. 状态模式 86. State Pattern 87. 策略模式 88. Strategy Pattern 89. Storage 单例封装 90. 策略模式 91. 计算字符串字节长度 92. 字符串压缩算法实现 93. 字符串查找 94. 字符串去除前后空格 95. 实现模板引擎 96. 实现千位分隔符 97. 实现模板字符串解析功能 98. 实现一个函数判断数据类型 99. Promise 实现红绿灯交替 100. 实现节流函数(throttle) 101. 从指定数据源生成长度为 n 的不重复随机数组 102. 解析 URL Params 为对象 103. URL 验证 104. 判断括号字符串是否有效 105. 虚拟代理 106. 访问者模式 107. 版本号排序的方法

咖啡机进阶优化

使用设计模式优化咖啡机代码,实现装饰器和建造者模式

问题

基于基础咖啡机实现,使用设计模式进行优化改造,提升代码的扩展性和可维护性。

解答

基础版本(存在的问题)

// 基础版本 - 扩展性差,添加新配料需要修改类
class Coffee {
  constructor(type) {
    this.type = type;
    this.price = 10;
    this.ingredients = [];
  }

  addMilk() {
    this.ingredients.push('milk');
    this.price += 3;
    return this;
  }

  addSugar() {
    this.ingredients.push('sugar');
    this.price += 1;
    return this;
  }

  // 每添加一种配料就要新增方法...
}

优化一:装饰器模式

// 咖啡基类
class Beverage {
  getDescription() {
    return 'Unknown Beverage';
  }

  cost() {
    return 0;
  }
}

// 具体咖啡
class Espresso extends Beverage {
  getDescription() {
    return 'Espresso';
  }

  cost() {
    return 15;
  }
}

class Latte extends Beverage {
  getDescription() {
    return 'Latte';
  }

  cost() {
    return 20;
  }
}

// 装饰器基类
class CondimentDecorator extends Beverage {
  constructor(beverage) {
    super();
    this.beverage = beverage;
  }
}

// 具体装饰器 - 牛奶
class Milk extends CondimentDecorator {
  getDescription() {
    return `${this.beverage.getDescription()}, Milk`;
  }

  cost() {
    return this.beverage.cost() + 3;
  }
}

// 具体装饰器 - 摩卡
class Mocha extends CondimentDecorator {
  getDescription() {
    return `${this.beverage.getDescription()}, Mocha`;
  }

  cost() {
    return this.beverage.cost() + 5;
  }
}

// 具体装饰器 - 奶泡
class Whip extends CondimentDecorator {
  getDescription() {
    return `${this.beverage.getDescription()}, Whip`;
  }

  cost() {
    return this.beverage.cost() + 2;
  }
}

// 使用示例
let coffee = new Espresso();
coffee = new Milk(coffee);
coffee = new Mocha(coffee);
coffee = new Whip(coffee);

console.log(coffee.getDescription()); // Espresso, Milk, Mocha, Whip
console.log(coffee.cost()); // 25

优化二:建造者模式

// 咖啡产品
class Coffee {
  constructor() {
    this.type = '';
    this.size = 'medium';
    this.milk = false;
    this.sugar = 0;
    this.extras = [];
  }

  describe() {
    const parts = [this.size, this.type];
    if (this.milk) parts.push('with milk');
    if (this.sugar > 0) parts.push(`${this.sugar} sugar`);
    if (this.extras.length) parts.push(this.extras.join(', '));
    return parts.join(' ');
  }
}

// 建造者
class CoffeeBuilder {
  constructor() {
    this.coffee = new Coffee();
  }

  setType(type) {
    this.coffee.type = type;
    return this;
  }

  setSize(size) {
    this.coffee.size = size;
    return this;
  }

  addMilk() {
    this.coffee.milk = true;
    return this;
  }

  addSugar(amount = 1) {
    this.coffee.sugar = amount;
    return this;
  }

  addExtra(extra) {
    this.coffee.extras.push(extra);
    return this;
  }

  build() {
    return this.coffee;
  }
}

// 指挥者 - 预设配方
class Barista {
  static makeAmericano(builder) {
    return builder
      .setType('Americano')
      .setSize('large')
      .build();
  }

  static makeCapuccino(builder) {
    return builder
      .setType('Capuccino')
      .addMilk()
      .addExtra('foam')
      .build();
  }

  static makeMocha(builder) {
    return builder
      .setType('Mocha')
      .addMilk()
      .addExtra('chocolate')
      .addExtra('whip cream')
      .build();
  }
}

// 使用示例
// 自定义咖啡
const customCoffee = new CoffeeBuilder()
  .setType('Latte')
  .setSize('small')
  .addMilk()
  .addSugar(2)
  .addExtra('vanilla')
  .build();

console.log(customCoffee.describe());
// small Latte with milk 2 sugar vanilla

// 使用预设配方
const mocha = Barista.makeMocha(new CoffeeBuilder());
console.log(mocha.describe());
// medium Mocha with milk chocolate, whip cream

优化三:结合 TypeScript 和事件系统

// 类型定义
type CoffeeSize = 'small' | 'medium' | 'large';
type CoffeeEvent = 'brewing' | 'ready' | 'error';

interface CoffeeOptions {
  type: string;
  size: CoffeeSize;
  milk: boolean;
  sugar: number;
}

// 事件发射器
class EventEmitter {
  private events: Map<string, Function[]> = new Map();

  on(event: string, callback: Function) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    this.events.get(event)!.push(callback);
    return this;
  }

  emit(event: string, ...args: any[]) {
    const callbacks = this.events.get(event);
    if (callbacks) {
      callbacks.forEach(cb => cb(...args));
    }
  }
}

// 咖啡机
class CoffeeMachine extends EventEmitter {
  private queue: CoffeeOptions[] = [];
  private isBrewing = false;

  // 添加订单
  order(options: CoffeeOptions) {
    this.queue.push(options);
    this.processQueue();
    return this;
  }

  // 处理队列
  private async processQueue() {
    if (this.isBrewing || this.queue.length === 0) return;

    this.isBrewing = true;
    const order = this.queue.shift()!;

    this.emit('brewing', order);

    // 模拟制作过程
    await this.brew(order);

    this.emit('ready', order);
    this.isBrewing = false;

    // 继续处理下一个
    this.processQueue();
  }

  private brew(options: CoffeeOptions): Promise<void> {
    const time = options.size === 'large' ? 3000 : 2000;
    return new Promise(resolve => setTimeout(resolve, time));
  }
}

// 使用示例
const machine = new CoffeeMachine();

machine
  .on('brewing', (order: CoffeeOptions) => {
    console.log(`正在制作: ${order.size} ${order.type}`);
  })
  .on('ready', (order: CoffeeOptions) => {
    console.log(`完成: ${order.type}`);
  });

machine
  .order({ type: 'Latte', size: 'medium', milk: true, sugar: 1 })
  .order({ type: 'Espresso', size: 'small', milk: false, sugar: 0 });

关键点

  • 装饰器模式:动态添加功能,避免类爆炸,配料可自由组合
  • 建造者模式:分步构建复杂对象,链式调用提升可读性
  • 指挥者角色:封装常用配方,简化客户端代码
  • 事件驱动:解耦制作过程和状态通知,支持异步操作
  • TypeScript:类型约束减少运行时错误,提升代码可维护性