JavaScript 设计模式与应用

// 违反开闭原则的写法：每新增一种支付方式都要改这个函数
function pay(type, amount) {
  if (type === 'wechat') {
    // 微信支付逻辑
  } else if (type === 'alipay') {
    // 支付宝逻辑
  } else if (type === 'card') {
    // 银行卡逻辑
  }
  // 新增 PayPal 就要继续加 else if... 违反开闭原则
}

// 遵循开闭原则的写法：新增支付方式只需注册新策略，不改原有代码
const payStrategies = new Map();
function registerPay(type, handler) {
  payStrategies.set(type, handler);
}
function pay(type, amount) {
  const handler = payStrategies.get(type);
  if (!handler) throw new Error(`Unsupported pay type: ${type}`);
  return handler(amount);
}
registerPay('wechat', (amount) => console.log(`微信支付 ${amount}`));
registerPay('alipay', (amount) => console.log(`支付宝支付 ${amount}`));
// 新增 PayPal，原有代码一行都不用动
registerPay('paypal', (amount) => console.log(`PayPal 支付 ${amount}`));

// 单例模式实现
class Singleton {
  static instance = null;
  
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    this.data = {};
  }
  
  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

// 使用示例
const instance1 = new Singleton();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

// 模块模式实现单例
const ConfigManager = (function() {
  let instance;
  
  function createInstance() {
    const config = {};
    return {
      get: (key) => config[key],
      set: (key, value) => { config[key] = value; },
      getAll: () => ({ ...config }),
    };
  }
  
  return {
    getInstance: () => {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

// ES6 模块天然是单例
// config.js
export const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
};

// 变体一：闭包 + IIFE 实现懒加载单例（经典写法）
const Logger = (function () {
  let instance = null;

  function createLogger() {
    const logs = [];
    return {
      log(message) {
        const entry = `[${new Date().toISOString()}] ${message}`;
        logs.push(entry);
        console.log(entry);
      },
      getLogCount() {
        return logs.length;
      },
    };
  }

  return {
    getInstance() {
      if (!instance) {
        instance = createLogger();
      }
      return instance;
    },
  };
})();

Logger.getInstance().log('应用启动');
Logger.getInstance().log('用户登录');
console.log(Logger.getInstance().getLogCount()); // 2，两次拿到的是同一实例

// 变体二：使用 Symbol 与 Object.freeze 保护单例，防止被篡改
class AppConfig {
  constructor() {
    if (AppConfig._instance) {
      return AppConfig._instance;
    }
    this.settings = {
      theme: 'dark',
      language: 'zh-CN',
      apiBase: 'https://api.example.com',
    };
    AppConfig._instance = this;
    Object.freeze(this); // 冻结，禁止外部修改属性
  }

  get(key) {
    return this.settings[key];
  }
}

// 变体三：现代前端最常用——ES Module 天然单例
// store.js 中导出的对象在整个应用生命周期内只有一份
// export const store = createStore();
// 任何模块 import { store } 拿到的都是同一个引用，无需任何额外代码

// 变体四：惰性单例的通用封装（提取"单例"这一横切逻辑）
function createSingleton(factory) {
  let instance = null;
  return function (...args) {
    if (!instance) {
      instance = factory(...args);
    }
    return instance;
  };
}

const getDatabase = createSingleton((connectionString) => {
  console.log('建立数据库连接:', connectionString);
  return { query: (sql) => console.log('执行:', sql) };
});

const db1 = getDatabase('mongodb://localhost');
const db2 = getDatabase('mongodb://localhost'); // 不会再次建立连接
console.log(db1 === db2); // true

// 简单工厂
class ButtonFactory {
  static create(type) {
    switch (type) {
      case 'primary':
        return new PrimaryButton();
      case 'secondary':
        return new SecondaryButton();
      case 'danger':
        return new DangerButton();
      default:
        throw new Error(`Unknown button type: ${type}`);
    }
  }
}

// 工厂方法
class Dialog {
  createButton() {
    throw new Error('Subclass must implement createButton method');
  }
  
  render() {
    const button = this.createButton();
    button.render();
  }
}

class WindowsDialog extends Dialog {
  createButton() {
    return new WindowsButton();
  }
}

class WebDialog extends Dialog {
  createButton() {
    return new HTMLButton();
  }
}

// 抽象工厂
class GUIFactory {
  createButton() {}
  createCheckbox() {}
}

class WindowsFactory extends GUIFactory {
  createButton() {
    return new WindowsButton();
  }
  createCheckbox() {
    return new WindowsCheckbox();
  }
}

class MacOSFactory extends GUIFactory {
  createButton() {
    return new MacOSButton();
  }
  createCheckbox() {
    return new MacOSCheckbox();
  }
}

// 变体一：用注册表替代 switch，实现开闭原则
class ShapeFactory {
  constructor() {
    this.creators = new Map();
  }

  register(type, creator) {
    this.creators.set(type, creator);
    return this;
  }

  create(type, ...args) {
    const creator = this.creators.get(type);
    if (!creator) {
      throw new Error(`Unknown shape type: ${type}`);
    }
    return creator(...args);
  }
}

const factory = new ShapeFactory()
  .register('circle', (r) => ({ type: 'circle', area: () => Math.PI * r * r }))
  .register('square', (s) => ({ type: 'square', area: () => s * s }))
  .register('rect', (w, h) => ({ type: 'rect', area: () => w * h }));

const circle = factory.create('circle', 5);
console.log(circle.area()); // 78.53...
// 新增三角形：factory.register('triangle', ...)，无需修改工厂内部

// 变体二：函数式简单工厂——返回不同的对象字面量
function createUser(role) {
  const base = {
    login() {
      console.log(`${this.name} 登录`);
    },
  };

  const roleConfigs = {
    admin: { name: '管理员', permissions: ['read', 'write', 'delete'] },
    editor: { name: '编辑', permissions: ['read', 'write'] },
    viewer: { name: '访客', permissions: ['read'] },
  };

  const config = roleConfigs[role];
  if (!config) throw new Error(`Unknown role: ${role}`);

  return { ...base, ...config, role };
}

const admin = createUser('admin');
console.log(admin.permissions); // ['read', 'write', 'delete']

// 变体三：抽象工厂——创建一整套主题化的 UI 组件
class DarkThemeFactory {
  createButton() {
    return { render: () => console.log('渲染深色按钮') };
  }
  createInput() {
    return { render: () => console.log('渲染深色输入框') };
  }
}

class LightThemeFactory {
  createButton() {
    return { render: () => console.log('渲染浅色按钮') };
  }
  createInput() {
    return { render: () => console.log('渲染浅色输入框') };
  }
}

function renderForm(factory) {
  factory.createButton().render();
  factory.createInput().render();
}

const theme = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches
  ? new DarkThemeFactory()
  : new LightThemeFactory();
renderForm(theme); // 一整套组件风格保持一致

// 建造者模式：链式构建复杂的查询对象
class QueryBuilder {
  constructor(table) {
    this.query = { table, wheres: [], orders: [], limitVal: null };
  }

  where(field, op, value) {
    this.query.wheres.push({ field, op, value });
    return this;
  }

  orderBy(field, dir = 'ASC') {
    this.query.orders.push({ field, dir });
    return this;
  }

  limit(n) {
    this.query.limitVal = n;
    return this;
  }

  build() {
    let sql = `SELECT * FROM ${this.query.table}`;
    if (this.query.wheres.length) {
      const conditions = this.query.wheres
        .map((w) => `${w.field} ${w.op} '${w.value}'`)
        .join(' AND ');
      sql += ` WHERE ${conditions}`;
    }
    if (this.query.orders.length) {
      const orders = this.query.orders
        .map((o) => `${o.field} ${o.dir}`)
        .join(', ');
      sql += ` ORDER BY ${orders}`;
    }
    if (this.query.limitVal != null) {
      sql += ` LIMIT ${this.query.limitVal}`;
    }
    return sql;
  }
}

const sql = new QueryBuilder('users')
  .where('age', '>', 18)
  .where('status', '=', 'active')
  .orderBy('created_at', 'DESC')
  .limit(10)
  .build();
console.log(sql);

// ES5 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

Person.species = 'Homo sapiens'; // 静态属性

// ES6 类语法
class Person {
  static species = 'Homo sapiens';
  
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
  
  static getSpecies() {
    return Person.species;
  }
}

const person = new Person('Alice', 25);
person.greet(); // "Hello, I'm Alice"

// 手写一个 myNew，彻底理解 new 的原理
function myNew(Constructor, ...args) {
  // 步骤 1、2：创建对象并链接原型
  const obj = Object.create(Constructor.prototype);
  // 步骤 3：以新对象为 this 执行构造函数
  const result = Constructor.apply(obj, args);
  // 步骤 4：如果构造函数返回对象则用它，否则返回 obj
  return result !== null && typeof result === 'object' ? result : obj;
}

function Car(brand, price) {
  this.brand = brand;
  this.price = price;
}
Car.prototype.info = function () {
  return `${this.brand}: ${this.price}`;
};

const car = myNew(Car, 'Tesla', 300000);
console.log(car.info()); // Tesla: 300000
console.log(car instanceof Car); // true

// 变体一：私有字段（ES2022 # 语法）
class BankAccount {
  #balance = 0; // 真正的私有字段，外部无法访问

  constructor(owner, initial = 0) {
    this.owner = owner;
    this.#balance = initial;
  }

  deposit(amount) {
    if (amount <= 0) throw new Error('金额必须为正');
    this.#balance += amount;
    return this.#balance;
  }

  get balance() {
    return this.#balance;
  }
}

const account = new BankAccount('Alice', 100);
account.deposit(50);
console.log(account.balance); // 150
// console.log(account.#balance); // 语法错误，无法从外部访问

// 变体二：继承与 super
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 必须先调用 super 才能使用 this
    this.breed = breed;
  }
  speak() {
    return `${this.name} (${this.breed}) barks`;
  }
}

const dog = new Dog('Rex', 'Husky');
console.log(dog.speak()); // Rex (Husky) barks

// 变体三：用 new.target 防止忘记写 new
function User(name) {
  if (!new.target) {
    throw new Error('User 必须使用 new 调用');
  }
  this.name = name;
}
// User('Alice'); // 抛出错误
const u = new User('Alice'); // 正确

// 原型模式实现
const prototype = {
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  },
  clone() {
    return Object.create(this);
  },
};

const person1 = Object.create(prototype);
person1.name = 'Alice';

const person2 = person1.clone();
person2.name = 'Bob';

// 使用 Object.assign 实现深拷贝
const deepClone = (obj) => {
  if (obj === null || typeof obj !== 'object') return obj;
  
  if (Array.isArray(obj)) {
    return obj.map(deepClone);
  }
  
  const cloned = Object.create(Object.getPrototypeOf(obj));
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
};

// 浅拷贝的几种方式
const original = { a: 1, nested: { b: 2 } };
const shallow1 = { ...original };
const shallow2 = Object.assign({}, original);
shallow1.nested.b = 99;
console.log(original.nested.b); // 99，嵌套对象被共享修改了

// 深拷贝：现代浏览器/Node 内置 structuredClone
const deep = structuredClone(original);
deep.nested.b = 42;
console.log(original.nested.b); // 99，不受影响

// 手写一个能处理循环引用的深拷贝
function deepClone(obj, seen = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags);
  if (seen.has(obj)) return seen.get(obj); // 处理循环引用

  const clone = Array.isArray(obj)
    ? []
    : Object.create(Object.getPrototypeOf(obj));
  seen.set(obj, clone);

  for (const key of Reflect.ownKeys(obj)) {
    clone[key] = deepClone(obj[key], seen);
  }
  return clone;
}

const a = { name: 'root' };
a.self = a; // 循环引用
const cloned = deepClone(a);
console.log(cloned.self === cloned); // true，循环引用被正确保留

// 变体：基于原型对象批量派生配置
const baseConfig = {
  retries: 3,
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
  withDefaults(overrides) {
    return Object.assign(Object.create(this), overrides);
  },
};

const uploadConfig = baseConfig.withDefaults({ timeout: 30000 });
const pingConfig = baseConfig.withDefaults({ retries: 0, timeout: 1000 });
console.log(uploadConfig.retries); // 3，继承自原型
console.log(uploadConfig.timeout); // 30000，被覆盖

// 适配器模式示例
// 旧 API
const oldAPI = {
  getUserInfo: (id) => ({ id, name: 'Alice', age: 25 }),
};

// 新 API
const newAPI = {
  fetchUser: async (id) => ({ userId: id, userName: 'Alice', userAge: 25 }),
};

// 适配器
class UserAPIAdapter {
  constructor(api) {
    this.api = api;
  }
  
  async getUser(id) {
    const user = await this.api.fetchUser(id);
    // 转换数据格式
    return {
      id: user.userId,
      name: user.userName,
      age: user.userAge,
    };
  }
}

// 使用适配器
const adapter = new UserAPIAdapter(newAPI);
const user = await adapter.getUser(1);
// { id: 1, name: 'Alice', age: 25 }

// 接口适配器
class LocalStorageAdapter {
  get(key) {
    const value = localStorage.getItem(key);
    try {
      return JSON.parse(value);
    } catch {
      return value;
    }
  }
  
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  }
  
  remove(key) {
    localStorage.removeItem(key);
  }
}

// 变体一：适配不同的第三方地图 SDK 到统一接口
// 业务代码只依赖 MapService 接口：show(lat, lng)、addMarker(lat, lng)
class GoogleMapAdapter {
  constructor(googleMap) {
    this.map = googleMap; // 假设是 Google Maps 实例
  }
  show(lat, lng) {
    this.map.setCenter({ lat, lng }); // Google 用 setCenter
  }
  addMarker(lat, lng) {
    this.map.placeMarker({ latitude: lat, longitude: lng });
  }
}

class BaiduMapAdapter {
  constructor(baiduMap) {
    this.map = baiduMap;
  }
  show(lat, lng) {
    this.map.centerAndZoom(lng, lat, 15); // 百度参数顺序不同：经度在前
  }
  addMarker(lat, lng) {
    this.map.addOverlay({ point: [lng, lat] });
  }
}

function renderLocation(mapService, lat, lng) {
  mapService.show(lat, lng);
  mapService.addMarker(lat, lng);
}
// 无论底层是 Google 还是百度，业务代码完全一致

// 变体二：把 callback 风格的旧 API 适配成 Promise 风格
function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (err, result) => {
        if (err) reject(err);
        else resolve(result);
      });
    });
  };
}

// 旧的 callback API
function readConfig(path, callback) {
  setTimeout(() => callback(null, { path, loaded: true }), 100);
}

const readConfigAsync = promisify(readConfig);
readConfigAsync('/etc/app.json').then((cfg) => console.log(cfg));

// 变体三：数据格式适配——把后端下划线命名转成前端驼峰命名
function toCamelCase(str) {
  return str.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
}

function adaptResponse(data) {
  if (Array.isArray(data)) return data.map(adaptResponse);
  if (data !== null && typeof data === 'object') {
    return Object.fromEntries(
      Object.entries(data).map(([k, v]) => [toCamelCase(k), adaptResponse(v)])
    );
  }
  return data;
}

const backendData = { user_name: 'Alice', created_at: '2024', order_list: [{ item_id: 1 }] };
console.log(adaptResponse(backendData));
// { userName: 'Alice', createdAt: '2024', orderList: [{ itemId: 1 }] }

// 函数装饰器
function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with args:`, args);
    const result = original.apply(this, args);
    console.log(`Result:`, result);
    return result;
  };
  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

// 高阶函数装饰器
function withLogging(fn) {
  return function(...args) {
    console.log('Arguments:', args);
    const result = fn.apply(this, args);
    console.log('Result:', result);
    return result;
  };
}

function withTiming(fn) {
  return function(...args) {
    const start = performance.now();
    const result = fn.apply(this, args);
    const end = performance.now();
    console.log(`Execution time: ${end - start}ms`);
    return result;
  };
}

// 组合装饰器
const decoratedFn = withLogging(withTiming(expensiveOperation));

// 对象装饰器
class Coffee {
  cost() {
    return 5;
  }
}

class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  
  cost() {
    return this.coffee.cost() + 2;
  }
}

class SugarDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  
  cost() {
    return this.coffee.cost() + 1;
  }
}

let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // 8

// 变体一：函数装饰器组合——用 reduce 把多个装饰器串起来
const compose = (...decorators) => (fn) =>
  decorators.reduceRight((acc, decorator) => decorator(acc), fn);

const withRetry = (fn) => async (...args) => {
  let lastErr;
  for (let i = 0; i < 3; i++) {
    try {
      return await fn(...args);
    } catch (e) {
      lastErr = e;
      console.log(`重试第 ${i + 1} 次`);
    }
  }
  throw lastErr;
};

const withCache = (fn) => {
  const cache = new Map();
  return async (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = await fn(...args);
    cache.set(key, result);
    return result;
  };
};

const enhanced = compose(withCache, withRetry)(async (id) => {
  console.log('真正请求', id);
  return { id, name: 'data' };
});
// enhanced 现在同时具备缓存 + 重试能力

// 变体二：ES 装饰器提案语法（TC39 Stage 3）——类方法装饰器
function measure(target, context) {
  return function (...args) {
    const start = performance.now();
    const result = target.apply(this, args);
    console.log(`${context.name} 耗时 ${performance.now() - start}ms`);
    return result;
  };
}

class DataProcessor {
  @measure
  process(data) {
    return data.map((x) => x * 2);
  }
}

// 变体三：属性访问装饰——用 getter/setter 装饰添加校验和日志
function readonly(target, context) {
  return {
    get() {
      return context.access.get.call(this);
    },
    set() {
      throw new Error(`${context.name} 是只读属性`);
    },
  };
}

// 使用 ES6 Proxy
const user = { name: 'Alice', age: 25 };

const userProxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return target[prop];
  },
  
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[prop] = value;
    return true;
  },
  
  has(target, prop) {
    console.log(`Checking if ${prop} exists`);
    return prop in target;
  },
});

// 缓存代理
function createCacheProxy(fn) {
  const cache = new Map();
  
  return new Proxy(fn, {
    apply(target, thisArg, args) {
      const key = JSON.stringify(args);
      
      if (cache.has(key)) {
        console.log('Returning cached result');
        return cache.get(key);
      }
      
      const result = target.apply(thisArg, args);
      cache.set(key, result);
      return result;
    },
  });
}

const expensiveCalculation = (n) => {
  console.log('Calculating...');
  return n * n;
};

const cachedCalculation = createCacheProxy(expensiveCalculation);
cachedCalculation(5); // Calculating... 25
cachedCalculation(5); // Returning cached result 25

// 外观模式示例
class PaymentFacade {
  constructor() {
    this.validator = new PaymentValidator();
    this.processor = new PaymentProcessor();
    this.notifier = new NotificationService();
    this.logger = new Logger();
  }
  
  async processPayment(paymentInfo) {
    try {
      // 验证支付信息
      this.validator.validate(paymentInfo);
      
      // 处理支付
      const result = await this.processor.process(paymentInfo);
      
      // 发送通知
      await this.notifier.sendConfirmation(paymentInfo.email, result);
      
      // 记录日志
      this.logger.log('Payment processed', result);
      
      return result;
    } catch (error) {
      this.logger.error('Payment failed', error);
      throw error;
    }
  }
}

// 使用外观
const payment = new PaymentFacade();
await payment.processPayment({
  amount: 100,
  cardNumber: '4111111111111111',
  email: 'user@example.com',
});

// 观察者模式实现
class EventEmitter {
  constructor() {
    this.events = {};
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
    return () => this.off(event, callback);
  }
  
  off(event, callback) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(cb => cb !== callback);
  }
  
  emit(event, ...args) {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => callback(...args));
  }
  
  once(event, callback) {
    const wrapper = (...args) => {
      callback(...args);
      this.off(event, wrapper);
    };
    this.on(event, wrapper);
  }
}

// 使用示例
const emitter = new EventEmitter();
const unsubscribe = emitter.on('user:login', (user) => {
  console.log(`User ${user.name} logged in`);
});

emitter.emit('user:login', { name: 'Alice' });
unsubscribe();

// 简化的发布订阅模式
class PubSub {
  constructor() {
    this.subscribers = {};
  }
  
  subscribe(event, callback) {
    if (!this.subscribers[event]) {
      this.subscribers[event] = [];
    }
    this.subscribers[event].push(callback);
    return () => {
      this.subscribers[event] = this.subscribers[event].filter(cb => cb !== callback);
    };
  }
  
  publish(event, data) {
    if (!this.subscribers[event]) return;
    this.subscribers[event].forEach(callback => callback(data));
  }
}

// 状态管理中的观察者模式
class Store {
  constructor(initialState) {
    this.state = initialState;
    this.listeners = [];
  }
  
  getState() {
    return this.state;
  }
  
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.listeners.forEach(listener => listener(this.state));
  }
  
  subscribe(listener) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }
}

// 策略模式实现
const validationStrategies = {
  required: (value) => {
    if (!value || value.trim() === '') {
      return 'This field is required';
    }
    return null;
  },
  
  email: (value) => {
    if (!/^[^s@]+@[^s@]+.[^s@]+$/.test(value)) {
      return 'Please enter a valid email';
    }
    return null;
  },
  
  minLength: (value, min) => {
    if (value.length < min) {
      return `Minimum length is ${min} characters`;
    }
    return null;
  },
  
  maxLength: (value, max) => {
    if (value.length > max) {
      return `Maximum length is ${max} characters`;
    }
    return null;
  },
};

class Validator {
  constructor() {
    this.rules = [];
  }
  
  addRule(field, strategy, ...args) {
    this.rules.push({ field, strategy, args });
    return this;
  }
  
  validate(data) {
    const errors = {};
    
    for (const rule of this.rules) {
      const { field, strategy, args } = rule;
      const value = data[field];
      const error = validationStrategies[strategy](value, ...args);
      
      if (error && !errors[field]) {
        errors[field] = error;
      }
    }
    
    return {
      isValid: Object.keys(errors).length === 0,
      errors,
    };
  }
}

// 使用示例
const validator = new Validator()
  .addRule('email', 'required')
  .addRule('email', 'email')
  .addRule('password', 'required')
  .addRule('password', 'minLength', 8);

const result = validator.validate({
  email: 'invalid-email',
  password: '123',
});

// 支付策略
const paymentStrategies = {
  creditCard: (amount, cardInfo) => {
    console.log(`Processing credit card payment of $${amount}`);
    // 信用卡支付逻辑
  },
  
  paypal: (amount, paypalInfo) => {
    console.log(`Processing PayPal payment of $${amount}`);
    // PayPal 支付逻辑
  },
  
  crypto: (amount, walletInfo) => {
    console.log(`Processing crypto payment of $${amount}`);
    // 加密货币支付逻辑
  },
};

function processPayment(method, amount, info) {
  const strategy = paymentStrategies[method];
  if (!strategy) {
    throw new Error(`Unknown payment method: ${method}`);
  }
  return strategy(amount, info);
}

// 命令模式实现
class Command {
  execute() {
    throw new Error('Execute method must be implemented');
  }
  
  undo() {
    throw new Error('Undo method must be implemented');
  }
}

class AddItemCommand extends Command {
  constructor(list, item) {
    super();
    this.list = list;
    this.item = item;
    this.index = null;
  }
  
  execute() {
    this.index = this.list.length;
    this.list.push(this.item);
  }
  
  undo() {
    if (this.index !== null) {
      this.list.splice(this.index, 1);
    }
  }
}

class RemoveItemCommand extends Command {
  constructor(list, index) {
    super();
    this.list = list;
    this.index = index;
    this.item = null;
  }
  
  execute() {
    this.item = this.list[this.index];
    this.list.splice(this.index, 1);
  }
  
  undo() {
    if (this.item !== null) {
      this.list.splice(this.index, 0, this.item);
    }
  }
}

// 命令管理器（支持撤销/重做）
class CommandManager {
  constructor() {
    this.history = [];
    this.redoStack = [];
  }
  
  execute(command) {
    command.execute();
    this.history.push(command);
    this.redoStack = [];
  }
  
  undo() {
    const command = this.history.pop();
    if (command) {
      command.undo();
      this.redoStack.push(command);
    }
  }
  
  redo() {
    const command = this.redoStack.pop();
    if (command) {
      command.execute();
      this.history.push(command);
    }
  }
}

// 使用示例
const list = [];
const manager = new CommandManager();

manager.execute(new AddItemCommand(list, 'Item 1'));
manager.execute(new AddItemCommand(list, 'Item 2'));
console.log(list); // ['Item 1', 'Item 2']

manager.undo();
console.log(list); // ['Item 1']

manager.redo();
console.log(list); // ['Item 1', 'Item 2']

// 自定义迭代器
class RangeIterator {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end = end;
    this.step = step;
    this.current = start;
  }
  
  [Symbol.iterator]() {
    return this;
  }
  
  next() {
    if (this.current < this.end) {
      const value = this.current;
      this.current += this.step;
      return { value, done: false };
    }
    return { value: undefined, done: true };
  }
}

const range = new RangeIterator(0, 10, 2);
for (const num of range) {
  console.log(num); // 0, 2, 4, 6, 8
}

// 树形结构迭代器
class TreeIterator {
  constructor(root) {
    this.stack = [root];
  }
  
  [Symbol.iterator]() {
    return this;
  }
  
  next() {
    if (this.stack.length === 0) {
      return { done: true };
    }
    
    const node = this.stack.pop();
    
    if (node.children) {
      for (let i = node.children.length - 1; i >= 0; i--) {
        this.stack.push(node.children[i]);
      }
    }
    
    return { value: node, done: false };
  }
}

// 生成器函数实现迭代器
function* fibonacci(limit) {
  let [prev, curr] = [0, 1];
  while (curr <= limit) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

for (const num of fibonacci(100)) {
  console.log(num); // 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89
}

// 状态模式实现
class TrafficLight {
  constructor() {
    this.state = new RedState(this);
  }
  
  changeState(state) {
    this.state = state;
  }
  
  next() {
    this.state.next();
  }
  
  report() {
    this.state.report();
  }
}

class RedState {
  constructor(light) {
    this.light = light;
  }
  
  next() {
    console.log('Red -> Green');
    this.light.changeState(new GreenState(this.light));
  }
  
  report() {
    console.log('Traffic light is RED - STOP');
  }
}

class GreenState {
  constructor(light) {
    this.light = light;
  }
  
  next() {
    console.log('Green -> Yellow');
    this.light.changeState(new YellowState(this.light));
  }
  
  report() {
    console.log('Traffic light is GREEN - GO');
  }
}

class YellowState {
  constructor(light) {
    this.light = light;
  }
  
  next() {
    console.log('Yellow -> Red');
    this.light.changeState(new RedState(this.light));
  }
  
  report() {
    console.log('Traffic light is YELLOW - CAUTION');
  }
}

// 使用示例
const trafficLight = new TrafficLight();
trafficLight.report(); // Traffic light is RED - STOP
trafficLight.next();   // Red -> Green
trafficLight.report(); // Traffic light is GREEN - GO

// 订单状态机
const OrderState = {
  PENDING: 'pending',
  CONFIRMED: 'confirmed',
  SHIPPED: 'shipped',
  DELIVERED: 'delivered',
  CANCELLED: 'cancelled',
};

const transitions = {
  [OrderState.PENDING]: [OrderState.CONFIRMED, OrderState.CANCELLED],
  [OrderState.CONFIRMED]: [OrderState.SHIPPED, OrderState.CANCELLED],
  [OrderState.SHIPPED]: [OrderState.DELIVERED],
  [OrderState.DELIVERED]: [],
  [OrderState.CANCELLED]: [],
};

function canTransition(from, to) {
  return transitions[from]?.includes(to) ?? false;
}

// 路由管理器（观察者模式）
class Router {
  constructor() {
    this.routes = {};
    this.currentRoute = null;
    this.listeners = [];
  }
  
  register(path, handler) {
    this.routes[path] = handler;
  }
  
  navigate(path) {
    if (this.routes[path]) {
      this.currentRoute = path;
      this.routes[path]();
      this.listeners.forEach(listener => listener(path));
    }
  }
  
  subscribe(listener) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }
}

// 全局状态管理（单例 + 观察者）
class AppState {
  static instance = null;
  
  constructor() {
    if (AppState.instance) return AppState.instance;
    AppState.instance = this;
    this.state = {};
    this.listeners = [];
  }
  
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.listeners.forEach(l => l(this.state));
  }
  
  subscribe(listener) {
    this.listeners.push(listener);
    return () => this.listeners.filter(l => l !== listener);
  }
}

// 表单验证器（策略 + 责任链）
class FormValidator {
  constructor() {
    this.strategies = {};
    this.chain = [];
  }
  
  addStrategy(name, fn) {
    this.strategies[name] = fn;
    return this;
  }
  
  addRule(field, strategyName, ...args) {
    this.chain.push({ field, strategy: strategyName, args });
    return this;
  }
  
  validate(data) {
    const errors = {};
    
    for (const rule of this.chain) {
      const strategy = this.strategies[rule.strategy];
      if (strategy) {
        const error = strategy(data[rule.field], ...rule.args);
        if (error && !errors[rule.field]) {
          errors[rule.field] = error;
        }
      }
    }
    
    return { isValid: Object.keys(errors).length === 0, errors };
  }
}

const validator = new FormValidator()
  .addStrategy('required', v => v ? null : 'Required')
  .addStrategy('email', v => /^[^s@]+@[^s@]+.[^s@]+$/.test(v) ? null : 'Invalid email')
  .addRule('email', 'required')
  .addRule('email', 'email');

// API 客户端（代理 + 装饰器）
class APIClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
    this.cache = new Map();
    this.interceptors = { request: [], response: [] };
  }
  
  addRequestInterceptor(fn) {
    this.interceptors.request.push(fn);
  }
  
  addResponseInterceptor(fn) {
    this.interceptors.response.push(fn);
  }
  
  async request(endpoint, options = {}) {
    let url = this.baseURL + endpoint;
    let config = options;
    
    // 执行请求拦截器
    for (const interceptor of this.interceptors.request) {
      [url, config] = await interceptor(url, config);
    }
    
    const cacheKey = JSON.stringify({ url, config });
    if (config.cache && this.cache.has(cacheKey)) {
      return this.cache.get(cacheKey);
    }
    
    let response = await fetch(url, config);
    
    // 执行响应拦截器
    for (const interceptor of this.interceptors.response) {
      response = await interceptor(response);
    }
    
    const data = await response.json();
    
    if (config.cache) {
      this.cache.set(cacheKey, data);
    }
    
    return data;
  }
}

const api = new APIClient('https://api.example.com');
api.addRequestInterceptor((url, config) => {
  config.headers = { ...config.headers, Authorization: 'Bearer token' };
  return [url, config];
});

// 动画管理器（策略 + 命令）
const easingStrategies = {
  linear: t => t,
  easeIn: t => t * t,
  easeOut: t => t * (2 - t),
  easeInOut: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
};

class Animation {
  constructor(element, property, start, end, duration, easing = 'linear') {
    this.element = element;
    this.property = property;
    this.start = start;
    this.end = end;
    this.duration = duration;
    this.easing = easingStrategies[easing];
    this.startTime = null;
  }
  
  execute() {
    this.startTime = performance.now();
    this.tick();
  }
  
  tick() {
    const elapsed = performance.now() - this.startTime;
    const progress = Math.min(elapsed / this.duration, 1);
    const easedProgress = this.easing(progress);
    const value = this.start + (this.end - this.start) * easedProgress;
    
    this.element.style[this.property] = value + 'px';
    
    if (progress < 1) {
      requestAnimationFrame(() => this.tick());
    }
  }
}

// 抽象产品：按钮
class Button {
  render() {
    throw new Error('必须实现 render 方法');
  }
}

// 抽象产品：输入框
class Input {
  render() {
    throw new Error('必须实现 render 方法');
  }
}

// 具体产品：Web 平台
class WebButton extends Button {
  render() {
    return '<button class="web-btn">Web 按钮</button>';
  }
}

class WebInput extends Input {
  render() {
    return '<input class="web-input" />';
  }
}

// 具体产品：移动端平台
class MobileButton extends Button {
  render() {
    return '[原生按钮组件 MobileButton]';
  }
}

class MobileInput extends Input {
  render() {
    return '[原生输入框组件 MobileInput]';
  }
}

// 抽象工厂
class UIFactory {
  createButton() {
    throw new Error('必须实现 createButton');
  }
  createInput() {
    throw new Error('必须实现 createInput');
  }
}

// 具体工厂：Web
class WebUIFactory extends UIFactory {
  createButton() {
    return new WebButton();
  }
  createInput() {
    return new WebInput();
  }
}

// 具体工厂：Mobile
class MobileUIFactory extends UIFactory {
  createButton() {
    return new MobileButton();
  }
  createInput() {
    return new MobileInput();
  }
}

// 业务代码只依赖抽象工厂
function renderForm(factory) {
  const button = factory.createButton();
  const input = factory.createInput();
  return input.render() + '\n' + button.render();
}

// 运行时决定用哪个工厂
const platform = 'web';
const factory = platform === 'web' ? new WebUIFactory() : new MobileUIFactory();
console.log(renderForm(factory));

// 用抽象工厂封装不同数据库的连接与查询构造器
class MySQLConnection {
  connect() { return 'MySQL 已连接'; }
}
class MySQLQueryBuilder {
  select(table) { return `SELECT * FROM ${table} LIMIT 100`; }
}

class PostgresConnection {
  connect() { return 'Postgres 已连接'; }
}
class PostgresQueryBuilder {
  select(table) { return `SELECT * FROM "${table}" FETCH FIRST 100 ROWS ONLY`; }
}

class DatabaseFactory {
  createConnection() {}
  createQueryBuilder() {}
}

class MySQLFactory extends DatabaseFactory {
  createConnection() { return new MySQLConnection(); }
  createQueryBuilder() { return new MySQLQueryBuilder(); }
}

class PostgresFactory extends DatabaseFactory {
  createConnection() { return new PostgresConnection(); }
  createQueryBuilder() { return new PostgresQueryBuilder(); }
}

function bootstrap(factory) {
  const conn = factory.createConnection();
  const qb = factory.createQueryBuilder();
  console.log(conn.connect());
  console.log(qb.select('users'));
}

bootstrap(new PostgresFactory());

// 反模式：参数太多，调用时根本看不懂每个值是什么意思
new HttpRequest('https://api.com', 'POST', headers, body, 5000, 3, true, false, null);

class HttpRequestBuilder {
  constructor(url) {
    this.config = {
      url,
      method: 'GET',
      headers: {},
      body: null,
      timeout: 3000,
      retries: 0,
    };
  }

  method(m) {
    this.config.method = m;
    return this;
  }

  header(key, value) {
    this.config.headers[key] = value;
    return this;
  }

  body(data) {
    this.config.body = JSON.stringify(data);
    this.header('Content-Type', 'application/json');
    return this;
  }

  timeout(ms) {
    this.config.timeout = ms;
    return this;
  }

  retries(n) {
    this.config.retries = n;
    return this;
  }

  build() {
    // 构建前可做校验
    if (!this.config.url) {
      throw new Error('URL 不能为空');
    }
    return { ...this.config };
  }
}

// 使用：每一步意图都一目了然
const request = new HttpRequestBuilder('https://api.example.com/users')
  .method('POST')
  .header('Authorization', 'Bearer token123')
  .body({ name: 'Alice', age: 30 })
  .timeout(5000)
  .retries(3)
  .build();

console.log(request);

class QueryBuilder {
  constructor() {
    this.parts = { table: '', columns: ['*'], wheres: [], orders: [], limitN: null };
  }

  from(table) {
    this.parts.table = table;
    return this;
  }

  select(...columns) {
    this.parts.columns = columns.length ? columns : ['*'];
    return this;
  }

  where(condition) {
    this.parts.wheres.push(condition);
    return this;
  }

  orderBy(column, direction = 'ASC') {
    this.parts.orders.push(`${column} ${direction}`);
    return this;
  }

  limit(n) {
    this.parts.limitN = n;
    return this;
  }

  build() {
    let sql = `SELECT ${this.parts.columns.join(', ')} FROM ${this.parts.table}`;
    if (this.parts.wheres.length) {
      sql += ' WHERE ' + this.parts.wheres.join(' AND ');
    }
    if (this.parts.orders.length) {
      sql += ' ORDER BY ' + this.parts.orders.join(', ');
    }
    if (this.parts.limitN != null) {
      sql += ` LIMIT ${this.parts.limitN}`;
    }
    return sql;
  }
}

const sql = new QueryBuilder()
  .select('id', 'name', 'email')
  .from('users')
  .where('age > 18')
  .where("status = 'active'")
  .orderBy('created_at', 'DESC')
  .limit(20)
  .build();

console.log(sql);
// SELECT id, name, email FROM users WHERE age > 18 AND status = 'active' ORDER BY created_at DESC LIMIT 20

const carPrototype = {
  init(brand, color) {
    this.brand = brand;
    this.color = color;
    return this;
  },
  drive() {
    return `${this.color} 的 ${this.brand} 正在行驶`;
  },
  clone() {
    // 以自身为原型创建新对象
    return Object.create(this);
  },
};

const redCar = Object.create(carPrototype).init('Tesla', '红色');
console.log(redCar.drive());

// 克隆并修改
const blueCar = redCar.clone().init('Tesla', '蓝色');
console.log(blueCar.drive());

class Shape {
  constructor(type, config) {
    this.type = type;
    this.config = config; // 可能是嵌套对象
  }

  // 浅拷贝克隆
  shallowClone() {
    const cloned = new Shape(this.type, this.config);
    return cloned;
  }

  // 深拷贝克隆
  deepClone() {
    return new Shape(
      this.type,
      structuredClone(this.config) // 现代浏览器原生深拷贝 API
    );
  }
}

const original = new Shape('circle', { radius: 10, style: { color: 'red' } });
const shallow = original.shallowClone();
const deep = original.deepClone();

shallow.config.style.color = 'blue';
console.log(original.config.style.color); // blue（被污染）
deep.config.style.color = 'green';
console.log(original.config.style.color); // 仍然是 blue（深拷贝隔离）

// 三个平台返回的用户数据格式完全不同
const wechatData = { openid: 'wx123', nickname: '小明', headimgurl: 'a.jpg' };
const googleData = { sub: 'g456', name: 'Ming', picture: 'b.jpg' };
const githubData = { id: 789, login: 'ming', avatar_url: 'c.jpg' };

// 业务系统期望的统一格式
// { id, name, avatar }

// 适配器们
const adapters = {
  wechat: (d) => ({ id: d.openid, name: d.nickname, avatar: d.headimgurl }),
  google: (d) => ({ id: d.sub, name: d.name, avatar: d.picture }),
  github: (d) => ({ id: String(d.id), name: d.login, avatar: d.avatar_url }),
};

function normalizeUser(platform, rawData) {
  const adapt = adapters[platform];
  if (!adapt) throw new Error(`不支持的平台: ${platform}`);
  return adapt(rawData);
}

console.log(normalizeUser('wechat', wechatData));
console.log(normalizeUser('google', googleData));
console.log(normalizeUser('github', githubData));
// 三者输出结构完全一致，业务代码无需关心来源

// 旧的日志库，接口老旧
class LegacyLogger {
  writeLog(level, msg) {
    console.log(`[${level}] ${msg}`);
  }
}

// 新系统期望的接口：logger.info() / logger.error()
class LoggerAdapter {
  constructor() {
    this.legacy = new LegacyLogger();
  }
  info(msg) {
    this.legacy.writeLog('INFO', msg);
  }
  warn(msg) {
    this.legacy.writeLog('WARN', msg);
  }
  error(msg) {
    this.legacy.writeLog('ERROR', msg);
  }
}

const logger = new LoggerAdapter();
logger.info('系统启动');
logger.error('发生错误');

// 实现维度：发送渠道
class SmsSender {
  send(content) {
    return `[短信] ${content}`;
  }
}
class EmailSender {
  send(content) {
    return `[邮件] ${content}`;
  }
}
class InAppSender {
  send(content) {
    return `[站内信] ${content}`;
  }
}

// 抽象维度：消息类型（持有一个实现的引用，这就是"桥"）
class Message {
  constructor(sender) {
    this.sender = sender; // 桥接点
  }
  send(text) {
    throw new Error('子类实现');
  }
}

class NormalMessage extends Message {
  send(text) {
    return this.sender.send(text);
  }
}

class UrgentMessage extends Message {
  send(text) {
    return this.sender.send('【加急】' + text);
  }
}

class CriticalMessage extends Message {
  send(text) {
    // 紧急消息可以走多渠道，这里简化
    return this.sender.send('【紧急！！】' + text);
  }
}

// 任意组合两个维度
console.log(new UrgentMessage(new SmsSender()).send('服务器告警'));
console.log(new CriticalMessage(new EmailSender()).send('数据库宕机'));
console.log(new NormalMessage(new InAppSender()).send('欢迎登录'));

// 统一接口：都有 getSize 和 print
class FileLeaf {
  constructor(name, size) {
    this.name = name;
    this.size = size;
  }
  getSize() {
    return this.size;
  }
  print(indent = '') {
    console.log(`${indent}📄 ${this.name} (${this.size}KB)`);
  }
}

class Folder {
  constructor(name) {
    this.name = name;
    this.children = [];
  }
  add(child) {
    this.children.push(child);
    return this;
  }
  getSize() {
    // 递归求和：不区分子节点是文件还是文件夹
    return this.children.reduce((sum, child) => sum + child.getSize(), 0);
  }
  print(indent = '') {
    console.log(`${indent}📁 ${this.name}/ (${this.getSize()}KB)`);
    this.children.forEach((child) => child.print(indent + '  '));
  }
}

const root = new Folder('root');
const src = new Folder('src');
src.add(new FileLeaf('index.js', 10)).add(new FileLeaf('utils.js', 5));
root.add(src).add(new FileLeaf('README.md', 3));

root.print();
console.log('总大小:', root.getSize(), 'KB');

const menu = new Folder('主菜单');
const settings = new Folder('设置');
settings.add(new FileLeaf('个人资料', 0)).add(new FileLeaf('隐私', 0));
menu.add(new FileLeaf('首页', 0)).add(settings);

// 用统一方式收集所有叶子节点名称
function collectLeaves(node, acc = []) {
  if (node instanceof FileLeaf) {
    acc.push(node.name);
  } else {
    node.children.forEach((c) => collectLeaves(c, acc));
  }
  return acc;
}
console.log(collectLeaves(menu)); // ['首页', '个人资料', '隐私']

// 复杂的子系统
class VideoDecoder {
  decode(file) {
    console.log('解码视频:', file);
    return 'decoded-data';
  }
}
class AudioProcessor {
  process(data) {
    console.log('处理音频');
    return data + '-audio';
  }
}
class Compressor {
  compress(data, quality) {
    console.log(`压缩，质量 ${quality}`);
    return data + '-compressed';
  }
}
class FileWriter {
  write(data, format) {
    console.log(`写入 ${format} 文件`);
    return `output.${format}`;
  }
}

// 外观：一个方法搞定整个流程
class VideoConverterFacade {
  constructor() {
    this.decoder = new VideoDecoder();
    this.audio = new AudioProcessor();
    this.compressor = new Compressor();
    this.writer = new FileWriter();
  }

  convert(file, { format = 'mp4', quality = 80 } = {}) {
    let data = this.decoder.decode(file);
    data = this.audio.process(data);
    data = this.compressor.compress(data, quality);
    return this.writer.write(data, format);
  }
}

// 调用方只需一行
const converter = new VideoConverterFacade();
const result = converter.convert('input.avi', { format: 'mp4', quality: 90 });
console.log('完成:', result);

// 享元工厂：缓存共享的内部状态（图标类型）
class MarkerIconFactory {
  constructor() {
    this.icons = new Map();
  }
  getIcon(type) {
    if (!this.icons.has(type)) {
      // 假设图标对象很大（包含图片数据等）
      console.log(`创建新图标: ${type}`);
      this.icons.set(type, { type, image: `[${type}图片数据 20KB]` });
    }
    return this.icons.get(type);
  }
  get count() {
    return this.icons.size;
  }
}

const factory = new MarkerIconFactory();

// 外部状态（坐标）由每个标记独立持有，内部状态（图标）共享
class Marker {
  constructor(lng, lat, type) {
    this.lng = lng; // 外部状态
    this.lat = lat; // 外部状态
    this.icon = factory.getIcon(type); // 内部状态，共享
  }
}

// 创建 10000 个标记，但只有 3 种图标
const markers = [];
const types = ['restaurant', 'hotel', 'gas'];
for (let i = 0; i < 10000; i++) {
  markers.push(new Marker(Math.random(), Math.random(), types[i % 3]));
}

console.log('标记数量:', markers.length);
console.log('实际图标对象数:', factory.count); // 只有 3 个

class Approver {
  constructor(name, limit) {
    this.name = name;
    this.limit = limit;
    this.next = null;
  }

  setNext(approver) {
    this.next = approver;
    return approver; // 便于链式设置
  }

  handle(amount) {
    if (amount <= this.limit) {
      console.log(`${this.name} 批准了 ${amount} 元的报销`);
    } else if (this.next) {
      console.log(`${this.name} 权限不足，上报`);
      this.next.handle(amount);
    } else {
      console.log(`没有人能批准 ${amount} 元`);
    }
  }
}

const leader = new Approver('组长', 1000);
const manager = new Approver('经理', 5000);
const director = new Approver('总监', 20000);

leader.setNext(manager).setNext(director);

leader.handle(800);   // 组长批
leader.handle(3000);  // 经理批
leader.handle(15000); // 总监批
leader.handle(50000); // 没人能批

// Koa 风格的中间件组合（compose）
function compose(middlewares) {
  return function (context) {
    let index = -1;
    function dispatch(i) {
      if (i <= index) return Promise.reject(new Error('next 被多次调用'));
      index = i;
      const fn = middlewares[i];
      if (!fn) return Promise.resolve();
      return Promise.resolve(fn(context, () => dispatch(i + 1)));
    }
    return dispatch(0);
  };
}

const logger = async (ctx, next) => {
  console.log('-> 进入 logger');
  await next();
  console.log('<- 离开 logger');
};

const auth = async (ctx, next) => {
  console.log('-> 进入 auth');
  ctx.user = 'Alice';
  await next();
  console.log('<- 离开 auth');
};

const handler = async (ctx, next) => {
  console.log('   处理业务, 用户:', ctx.user);
  await next();
};

const app = compose([logger, auth, handler]);
app({}).then(() => console.log('全部完成'));
// 输出体现"洋葱模型"：进入顺序 logger->auth->handler，返回逆序

// 接收者
class Editor {
  constructor() {
    this.content = '';
  }
}

// 命令基类
class Command {
  execute() {}
  undo() {}
}

// 具体命令：插入文本
class InsertCommand extends Command {
  constructor(editor, text) {
    super();
    this.editor = editor;
    this.text = text;
  }
  execute() {
    this.editor.content += this.text;
  }
  undo() {
    this.editor.content = this.editor.content.slice(0, -this.text.length);
  }
}

// 命令管理器：支持撤销/重做
class CommandManager {
  constructor() {
    this.history = [];
    this.redoStack = [];
  }
  run(command) {
    command.execute();
    this.history.push(command);
    this.redoStack = []; // 新操作清空重做栈
  }
  undo() {
    const command = this.history.pop();
    if (command) {
      command.undo();
      this.redoStack.push(command);
    }
  }
  redo() {
    const command = this.redoStack.pop();
    if (command) {
      command.execute();
      this.history.push(command);
    }
  }
}

const editor = new Editor();
const manager = new CommandManager();

manager.run(new InsertCommand(editor, 'Hello '));
manager.run(new InsertCommand(editor, 'World'));
console.log(editor.content); // Hello World

manager.undo();
console.log(editor.content); // Hello

manager.redo();
console.log(editor.content); // Hello World

class MacroCommand {
  constructor() {
    this.commands = [];
  }
  add(command) {
    this.commands.push(command);
    return this;
  }
  execute() {
    this.commands.forEach((c) => c.execute());
  }
  undo() {
    // 逆序撤销
    [...this.commands].reverse().forEach((c) => c.undo());
  }
}

const editor2 = new Editor();
const macro = new MacroCommand()
  .add(new InsertCommand(editor2, 'A'))
  .add(new InsertCommand(editor2, 'B'))
  .add(new InsertCommand(editor2, 'C'));

macro.execute();
console.log(editor2.content); // ABC
macro.undo();
console.log(editor2.content); // 空

class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end = end;
    this.step = step;
  }

  // 实现迭代器协议
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    const step = this.step;
    return {
      next() {
        if (current < end) {
          const value = current;
          current += step;
          return { value, done: false };
        }
        return { value: undefined, done: true };
      },
    };
  }
}

const range = new Range(0, 10, 2);
for (const num of range) {
  console.log(num); // 0 2 4 6 8
}
console.log([...range]); // [0, 2, 4, 6, 8]

// 生成器是实现迭代器最简洁的方式
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

// 惰性求值：只取前 10 个，不会无限循环
function take(iterator, n) {
  const result = [];
  for (const value of iterator) {
    if (result.length >= n) break;
    result.push(value);
  }
  return result;
}

console.log(take(fibonacci(), 10)); // [0,1,1,2,3,5,8,13,21,34]

// 中介者
class ChatRoom {
  constructor() {
    this.users = new Map();
  }
  register(user) {
    this.users.set(user.name, user);
    user.chatroom = this;
    return this;
  }
  send(from, to, message) {
    if (to) {
      // 私聊
      const target = this.users.get(to);
      if (target) target.receive(from, message);
    } else {
      // 广播
      this.users.forEach((user) => {
        if (user.name !== from) user.receive(from, message);
      });
    }
  }
}

class User {
  constructor(name) {
    this.name = name;
    this.chatroom = null;
  }
  send(message, to = null) {
    this.chatroom.send(this.name, to, message);
  }
  receive(from, message) {
    console.log(`[${this.name} 收到] ${from}: ${message}`);
  }
}

const room = new ChatRoom();
const alice = new User('Alice');
const bob = new User('Bob');
const carol = new User('Carol');
room.register(alice).register(bob).register(carol);

alice.send('大家好'); // 广播给 Bob 和 Carol
bob.send('你好 Alice', 'Alice'); // 私聊

// 备忘录：只存状态，不含逻辑
class EditorMemento {
  constructor(content, cursorPos) {
    this._content = content;
    this._cursorPos = cursorPos;
    Object.freeze(this); // 备忘录应不可变
  }
  getContent() { return this._content; }
  getCursor() { return this._cursorPos; }
}

// 原发器：创建和恢复备忘录
class TextEditor {
  constructor() {
    this.content = '';
    this.cursorPos = 0;
  }
  type(text) {
    this.content += text;
    this.cursorPos = this.content.length;
  }
  save() {
    return new EditorMemento(this.content, this.cursorPos);
  }
  restore(memento) {
    this.content = memento.getContent();
    this.cursorPos = memento.getCursor();
  }
}

// 管理者：保存备忘录历史
class History {
  constructor() {
    this.snapshots = [];
  }
  push(memento) {
    this.snapshots.push(memento);
  }
  pop() {
    return this.snapshots.pop();
  }
}

const editor = new TextEditor();
const history = new History();

editor.type('第一句。');
history.push(editor.save());

editor.type('第二句。');
history.push(editor.save());

editor.type('第三句。');
console.log(editor.content); // 第一句。第二句。第三句。

history.pop(); // 丢弃当前快照
editor.restore(history.pop()); // 恢复到第一句
console.log(editor.content); // 第一句。

// 每个状态是一个类，封装该状态下的行为和转换规则
class OrderState {
  constructor(order) {
    this.order = order;
  }
  pay() { console.log('当前状态无法支付'); }
  ship() { console.log('当前状态无法发货'); }
  cancel() { console.log('当前状态无法取消'); }
}

class PendingState extends OrderState {
  pay() {
    console.log('支付成功');
    this.order.setState(this.order.paidState);
  }
  cancel() {
    console.log('订单已取消');
    this.order.setState(this.order.cancelledState);
  }
}

class PaidState extends OrderState {
  ship() {
    console.log('商品已发货');
    this.order.setState(this.order.shippedState);
  }
  cancel() {
    console.log('已支付，走退款取消流程');
    this.order.setState(this.order.cancelledState);
  }
}

class ShippedState extends OrderState {
  // 已发货不能取消也不能重复发货，全部继承默认拒绝行为
}

class CancelledState extends OrderState {
  // 终态，什么都不能做
}

class Order {
  constructor() {
    this.pendingState = new PendingState(this);
    this.paidState = new PaidState(this);
    this.shippedState = new ShippedState(this);
    this.cancelledState = new CancelledState(this);
    this.state = this.pendingState; // 初始状态
  }
  setState(state) {
    this.state = state;
  }
  pay() { this.state.pay(); }
  ship() { this.state.ship(); }
  cancel() { this.state.cancel(); }
}

const order = new Order();
order.ship();   // 当前状态无法发货（待支付不能发货）
order.pay();    // 支付成功 -> 已支付
order.ship();   // 商品已发货 -> 已发货
order.cancel(); // 当前状态无法取消（已发货不能取消）

class DataExporter {
  // 模板方法：定义算法骨架，final 不应被重写
  export(data) {
    const validated = this.validate(data);
    const formatted = this.format(validated);
    const result = this.write(formatted);
    this.afterExport(); // 钩子方法，可选重写
    return result;
  }

  validate(data) {
    if (!Array.isArray(data)) throw new Error('数据必须是数组');
    return data;
  }

  // 抽象步骤：子类必须实现
  format(data) {
    throw new Error('子类必须实现 format');
  }
  write(formatted) {
    throw new Error('子类必须实现 write');
  }

  // 钩子方法：默认空实现，子类可选覆盖
  afterExport() {}
}

class CsvExporter extends DataExporter {
  format(data) {
    return data.map((row) => Object.values(row).join(',')).join('\n');
  }
  write(formatted) {
    return 'CSV:\n' + formatted;
  }
  afterExport() {
    console.log('CSV 导出完成');
  }
}

class JsonExporter extends DataExporter {
  format(data) {
    return JSON.stringify(data, null, 2);
  }
  write(formatted) {
    return 'JSON:\n' + formatted;
  }
}

const data = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];
console.log(new CsvExporter().export(data));
console.log(new JsonExporter().export(data));

// 元素：AST 节点，都提供 accept 方法
class NumberNode {
  constructor(value) { this.value = value; }
  accept(visitor) { return visitor.visitNumber(this); }
}
class AddNode {
  constructor(left, right) { this.left = left; this.right = right; }
  accept(visitor) { return visitor.visitAdd(this); }
}
class MultiplyNode {
  constructor(left, right) { this.left = left; this.right = right; }
  accept(visitor) { return visitor.visitMultiply(this); }
}

// 访问者一：求值
class EvaluateVisitor {
  visitNumber(node) { return node.value; }
  visitAdd(node) { return node.left.accept(this) + node.right.accept(this); }
  visitMultiply(node) { return node.left.accept(this) * node.right.accept(this); }
}

// 访问者二：打印为中缀表达式（新增操作无需改节点类）
class PrintVisitor {
  visitNumber(node) { return String(node.value); }
  visitAdd(node) { return `(${node.left.accept(this)} + ${node.right.accept(this)})`; }
  visitMultiply(node) { return `(${node.left.accept(this)} * ${node.right.accept(this)})`; }
}

// 构造表达式 (3 + 4) * 5
const ast = new MultiplyNode(new AddNode(new NumberNode(3), new NumberNode(4)), new NumberNode(5));

console.log(ast.accept(new EvaluateVisitor())); // 35
console.log(ast.accept(new PrintVisitor()));    // ((3 + 4) * 5)

// 上下文：变量的值
// 终结符表达式
class Variable {
  constructor(name) { this.name = name; }
  interpret(context) { return Boolean(context[this.name]); }
}
class Constant {
  constructor(value) { this.value = value; }
  interpret() { return this.value; }
}

// 非终结符表达式
class And {
  constructor(left, right) { this.left = left; this.right = right; }
  interpret(context) { return this.left.interpret(context) && this.right.interpret(context); }
}
class Or {
  constructor(left, right) { this.left = left; this.right = right; }
  interpret(context) { return this.left.interpret(context) || this.right.interpret(context); }
}
class Not {
  constructor(expr) { this.expr = expr; }
  interpret(context) { return !this.expr.interpret(context); }
}

// 解释 (isVip AND isActive) OR isAdmin
const expression = new Or(
  new And(new Variable('isVip'), new Variable('isActive')),
  new Variable('isAdmin')
);

console.log(expression.interpret({ isVip: true, isActive: true, isAdmin: false }));  // true
console.log(expression.interpret({ isVip: true, isActive: false, isAdmin: false })); // false
console.log(expression.interpret({ isVip: false, isActive: false, isAdmin: true })); // true

// 立即执行函数（IIFE）创建私有作用域
const counterModule = (function () {
  // 私有变量，外部无法直接访问
  let count = 0;
  let step = 1;

  // 私有函数
  function log(action) {
    console.log(`[counter] ${action}, 当前值: ${count}`);
  }

  // 只暴露公共接口
  return {
    increment() {
      count += step;
      log('increment');
      return count;
    },
    decrement() {
      count -= step;
      log('decrement');
      return count;
    },
    reset() {
      count = 0;
      log('reset');
    },
    getValue() {
      return count;
    },
  };
})();

counterModule.increment(); // 1
counterModule.increment(); // 2
console.log(counterModule.count); // undefined（私有，访问不到）
console.log(counterModule.getValue()); // 2

const userService = (function () {
  let users = [];

  function add(user) {
    users.push(user);
    logChange(); // 直接调用私有函数
  }

  function remove(id) {
    users = users.filter((u) => u.id !== id);
    logChange();
  }

  function getAll() {
    return [...users];
  }

  function logChange() {
    console.log(`用户数量: ${users.length}`);
  }

  // 在末尾清晰地"揭示"公共接口
  return {
    add,
    remove,
    getAll,
    // logChange 不暴露，保持私有
  };
})();

userService.add({ id: 1, name: 'Alice' });
userService.add({ id: 2, name: 'Bob' });
console.log(userService.getAll());

// 定义可复用的能力片段
const serializable = {
  serialize() {
    return JSON.stringify(this);
  },
};

const comparable = {
  compareTo(other) {
    return this.value - other.value;
  },
};

const observable = {
  observers: [],
  subscribe(fn) {
    this.observers.push(fn);
  },
  notify(data) {
    this.observers.forEach((fn) => fn(data));
  },
};

// 把多个能力混入一个对象
function mixin(target, ...sources) {
  return Object.assign(target, ...sources);
}

const product = mixin(
  { value: 100, name: '商品' },
  serializable,
  comparable
);

console.log(product.serialize()); // 拥有序列化能力
console.log(product.compareTo({ value: 80 })); // 20，拥有比较能力

// 用返回类的函数实现类混入
const Timestamped = (Base) =>
  class extends Base {
    constructor(...args) {
      super(...args);
      this.createdAt = Date.now();
    }
    getAge() {
      return Date.now() - this.createdAt;
    }
  };

const Activatable = (Base) =>
  class extends Base {
    activate() { this.active = true; }
    deactivate() { this.active = false; }
  };

class Widget {
  constructor(name) {
    this.name = name;
  }
}

// 叠加多个混入
class EnhancedWidget extends Activatable(Timestamped(Widget)) {}

const w = new EnhancedWidget('按钮');
w.activate();
console.log(w.active); // true
console.log(w.name); // 按钮
console.log(typeof w.getAge()); // number

class EventBus {
  constructor() {
    this.events = new Map();
  }

  on(event, handler) {
    if (!this.events.has(event)) {
      this.events.set(event, new Set());
    }
    this.events.get(event).add(handler);
    // 返回取消订阅函数
    return () => this.off(event, handler);
  }

  once(event, handler) {
    const wrapper = (...args) => {
      handler(...args);
      this.off(event, wrapper);
    };
    return this.on(event, wrapper);
  }

  off(event, handler) {
    const handlers = this.events.get(event);
    if (handlers) {
      handlers.delete(handler);
      if (handlers.size === 0) this.events.delete(event);
    }
  }

  emit(event, ...args) {
    const handlers = this.events.get(event);
    if (handlers) {
      // 复制一份避免遍历时修改
      [...handlers].forEach((handler) => {
        try {
          handler(...args);
        } catch (e) {
          console.error(`事件 ${event} 处理出错:`, e);
        }
      });
    }
  }
}

const bus = new EventBus();

const unsub = bus.on('login', (user) => console.log('监听器A:', user.name));
bus.on('login', (user) => console.log('监听器B:', user.name));
bus.once('login', (user) => console.log('只触发一次:', user.name));

bus.emit('login', { name: 'Alice' }); // A、B、once 都触发
bus.emit('login', { name: 'Bob' });   // A、B 触发，once 不再触发

unsub(); // 取消监听器 A
bus.emit('login', { name: 'Carol' }); // 只有 B 触发

// 不好：内部硬编码依赖，无法替换、难以测试
class BadUserService {
  constructor() {
    this.db = new MySQLDatabase(); // 硬编码，死板
  }
}

// 好：依赖从外部注入
class UserService {
  constructor(database, logger) {
    this.db = database;
    this.logger = logger;
  }
  getUser(id) {
    this.logger.log(`查询用户 ${id}`);
    return this.db.query(id);
  }
}

// 生产环境注入真实依赖
const realDb = { query: (id) => ({ id, name: 'Alice' }) };
const realLogger = { log: (msg) => console.log(msg) };
const service = new UserService(realDb, realLogger);
console.log(service.getUser(1));

// 测试环境注入 mock，轻松隔离
const mockDb = { query: (id) => ({ id, name: 'TestUser' }) };
const mockLogger = { log: () => {} }; // 静默
const testService = new UserService(mockDb, mockLogger);
console.log(testService.getUser(99));

class Container {
  constructor() {
    this.registry = new Map();
    this.singletons = new Map();
  }

  register(name, factory, { singleton = false } = {}) {
    this.registry.set(name, { factory, singleton });
  }

  resolve(name) {
    const entry = this.registry.get(name);
    if (!entry) throw new Error(`未注册的依赖: ${name}`);

    if (entry.singleton) {
      if (!this.singletons.has(name)) {
        this.singletons.set(name, entry.factory(this));
      }
      return this.singletons.get(name);
    }
    return entry.factory(this);
  }
}

const container = new Container();
container.register('logger', () => ({ log: (m) => console.log('[LOG]', m) }), { singleton: true });
container.register('db', () => ({ query: (id) => ({ id }) }), { singleton: true });
container.register('userService', (c) => new UserService(c.resolve('db'), c.resolve('logger')));

const svc = container.resolve('userService');
console.log(svc.getUser(42));

// 通用柯里化工具
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return (...next) => curried.apply(this, args.concat(next));
  };
}

const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

// 实用场景：固定部分参数生成专用函数
const log = curry((level, module, message) =>
  console.log(`[${level}][${module}] ${message}`)
);
const errorLog = log('ERROR');
const authError = errorLog('Auth');
authError('登录失败'); // [ERROR][Auth] 登录失败

// compose: 从右到左
const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
// pipe: 从左到右
const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

const trim = (s) => s.trim();
const toLower = (s) => s.toLowerCase();
const removeSpaces = (s) => s.replace(/\s+/g, '-');

// 生成 URL slug
const slugify = pipe(trim, toLower, removeSpaces);
console.log(slugify('  Hello World Foo  ')); // hello-world-foo

// compose 顺序相反
const slugify2 = compose(removeSpaces, toLower, trim);
console.log(slugify2('  Hello World  ')); // hello-world

// 防抖：事件停止 delay 毫秒后才执行（只关心最后一次）
function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流：每 interval 毫秒最多执行一次（均匀执行）
function throttle(fn, interval) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 策略选择表
const rateLimitStrategies = {
  search: (fn) => debounce(fn, 300),      // 搜索框：停止输入才搜
  scroll: (fn) => throttle(fn, 100),      // 滚动：均匀触发
  resize: (fn) => debounce(fn, 200),      // 窗口缩放：结束才处理
  buttonClick: (fn) => throttle(fn, 1000),// 防重复提交
};

const onSearch = rateLimitStrategies.search((q) => console.log('搜索:', q));
onSearch('a'); onSearch('ab'); onSearch('abc'); // 只有最后一次 300ms 后执行

function memoize(fn, resolver) {
  const cache = new Map();
  return function (...args) {
    const key = resolver ? resolver(...args) : JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// 未优化的斐波那契：指数级时间复杂度 O(2^n)
function slowFib(n) {
  return n < 2 ? n : slowFib(n - 1) + slowFib(n - 2);
}

// 记忆化后：O(n)
const fastFib = memoize(function fib(n) {
  return n < 2 ? n : fastFib(n - 1) + fastFib(n - 2);
});

console.log(fastFib(40)); // 瞬间返回

// HOC：给组件添加加载状态能力（装饰器）
function withLoading(WrappedComponent) {
  return function WithLoading(props) {
    if (props.isLoading) {
      return '加载中...'; // 伪代码，实际返回 JSX
    }
    return WrappedComponent(props);
  };
}

// HOC：添加日志能力，可叠加多个装饰器
function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('渲染组件, props:', props);
    return WrappedComponent(props);
  };
}

const UserList = (props) => `用户列表: ${props.users.join(', ')}`;

// 层层装饰，和结构型装饰器模式一模一样
const Enhanced = withLogger(withLoading(UserList));

// 组件只管获取数据（逻辑），怎么渲染由 render 策略决定
function DataFetcher({ data, render }) {
  // 组件封装数据获取逻辑
  return render(data); // 渲染策略外部注入
}

// 同一份数据，注入不同渲染策略
DataFetcher({ data: [1, 2, 3], render: (d) => `列表: ${d.join(',')}` });
DataFetcher({ data: [1, 2, 3], render: (d) => `总和: ${d.reduce((a, b) => a + b)}` });

// 自定义 Hook：封装可复用逻辑（伪代码演示思路）
function useToggle(initial = false) {
  // 实际会用 useState
  let state = initial;
  const toggle = () => { state = !state; };
  return [state, toggle];
}

function useCounter(initial = 0) {
  let count = initial;
  return {
    count,
    increment: () => count++,
    decrement: () => count--,
  };
}

// 一个组件里组合多个 Hook，各自独立、互不干扰
function useMyComponent() {
  const [isOpen, toggleOpen] = useToggle();
  const counter = useCounter(10);
  return { isOpen, toggleOpen, counter };
}

// action = 命令对象
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + (action.payload || 1) };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

let state = { count: 0 };
// dispatch 命令
state = reducer(state, { type: 'INCREMENT', payload: 5 });
console.log(state); // { count: 5 }
state = reducer(state, { type: 'RESET' });
console.log(state); // { count: 0 }

// 极简版 Vue3 响应式原理
const effectStack = [];

function reactive(obj) {
  const deps = new Map(); // key -> Set<effect>

  return new Proxy(obj, {
    get(target, key) {
      // 依赖收集（订阅）
      const activeEffect = effectStack[effectStack.length - 1];
      if (activeEffect) {
        if (!deps.has(key)) deps.set(key, new Set());
        deps.get(key).add(activeEffect);
      }
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      // 派发更新（发布通知）
      const effects = deps.get(key);
      if (effects) {
        effects.forEach((effect) => effect());
      }
      return true;
    },
  });
}

function watchEffect(fn) {
  effectStack.push(fn);
  fn(); // 首次执行触发依赖收集
  effectStack.pop();
}

const state = reactive({ count: 0 });
watchEffect(() => {
  console.log('count 变了:', state.count);
});
state.count = 1; // 自动触发：count 变了: 1
state.count = 2; // 自动触发：count 变了: 2

// Redux applyMiddleware 简化实现（责任链 + 洋葱模型）
function applyMiddleware(...middlewares) {
  return (createStore) => (reducer) => {
    const store = createStore(reducer);
    let dispatch = store.dispatch;

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action),
    };

    // 每个中间件包装 dispatch，形成责任链
    const chain = middlewares.map((mw) => mw(middlewareAPI));
    dispatch = chain.reduceRight((next, mw) => mw(next), store.dispatch);

    return { ...store, dispatch };
  };
}

// 日志中间件
const logger = (store) => (next) => (action) => {
  console.log('派发前:', action.type);
  const result = next(action); // 传给下一个中间件（责任链）
  console.log('派发后 state:', store.getState());
  return result;
};

// 异步中间件（thunk）
const thunk = (store) => (next) => (action) => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState);
  }
  return next(action);
};

// Express 风格中间件责任链
class MiniExpress {
  constructor() {
    this.middlewares = [];
  }
  use(fn) {
    this.middlewares.push(fn);
    return this;
  }
  handle(req, res) {
    let index = 0;
    const next = () => {
      const mw = this.middlewares[index++];
      if (mw) mw(req, res, next); // 显式调用 next 传递
    };
    next();
  }
}

const app = new MiniExpress();
app.use((req, res, next) => { console.log('日志中间件'); next(); });
app.use((req, res, next) => { req.user = 'Alice'; next(); });
app.use((req, res) => { console.log('业务处理, 用户:', req.user); });

app.handle({}, {});

// 反模式：一个简单加法被过度抽象
class AbstractCalculationStrategyFactory {
  createStrategy(type) { /* ... */ }
}
class AdditionStrategyImpl { execute(a, b) { return a + b; } }
// ...几百行框架代码，只为算 1 + 1

// 重构：需求就这么简单，一个函数搞定
const add = (a, b) => a + b;

// 反模式：一个类什么都干
class AppManager {
  login() {}
  logout() {}
  fetchUsers() {}
  renderUI() {}
  sendEmail() {}
  processPayment() {}
  generateReport() {}
  connectDatabase() {}
  // ...还有 50 个方法
}

// 重构：按职责拆分（单一职责原则）
class AuthService { login() {} logout() {} }
class UserService { fetchUsers() {} }
class PaymentService { processPayment() {} }
class EmailService { sendEmail() {} }

// 反模式：全局单例被到处直接修改
const GlobalState = { user: null, cart: [], theme: 'light', /* 什么都往里塞 */ };
// 任何模块都能改，出了 bug 无从追踪

// 重构：用依赖注入 + 明确的状态管理
// 状态变更走统一入口（如 Redux dispatch），可追踪、可测试

// 真实对象：加载真实图片（昂贵操作）
class RealImage {
  constructor(url) {
    this.url = url;
    this.loadFromDisk(); // 构造即加载，昂贵
  }
  loadFromDisk() {
    console.log(`从网络加载大图: ${this.url}`);
  }
  display() {
    console.log(`显示图片: ${this.url}`);
  }
}

// 虚拟代理：延迟到真正需要时才加载
class ImageProxy {
  constructor(url) {
    this.url = url;
    this.realImage = null; // 先不加载
  }
  display() {
    if (!this.realImage) {
      this.realImage = new RealImage(this.url); // 首次 display 才加载
    }
    this.realImage.display();
  }
}

const img = new ImageProxy('huge-photo.jpg'); // 此时未加载，很快
console.log('代理已创建，尚未加载');
img.display(); // 此时才真正加载并显示
img.display(); // 第二次直接用缓存，不重复加载

function createValidatedUser(target) {
  const validators = {
    age(value) {
      if (typeof value !== 'number' || value < 0 || value > 150) {
        throw new Error(`age 非法: ${value}`);
      }
    },
    email(value) {
      if (!/^[^@]+@[^@]+$/.test(value)) {
        throw new Error(`email 非法: ${value}`);
      }
    },
  };

  return new Proxy(target, {
    set(obj, prop, value) {
      if (validators[prop]) {
        validators[prop](value); // 拦截写入做校验
      }
      obj[prop] = value;
      return true;
    },
  });
}

const user = createValidatedUser({});
user.age = 30; // 通过
user.email = 'a@b.com'; // 通过
try {
  user.age = -5; // 抛错
} catch (e) {
  console.log('拦截到非法赋值:', e.message);
}

// 用 Proxy 给任意函数加缓存能力
function cacheProxy(fn) {
  const cache = new Map();
  return new Proxy(fn, {
    apply(target, thisArg, args) {
      const key = JSON.stringify(args);
      if (cache.has(key)) {
        console.log('命中缓存');
        return cache.get(key);
      }
      const result = Reflect.apply(target, thisArg, args);
      cache.set(key, result);
      return result;
    },
  });
}

const expensiveCalc = cacheProxy((a, b) => {
  console.log('执行昂贵计算');
  return a * b + Math.random();
});

const r1 = expensiveCalc(2, 3); // 执行昂贵计算
const r2 = expensiveCalc(2, 3); // 命中缓存
console.log(r1 === r2); // true

// 单例：全局绘图上下文
class DrawingContext {
  static instance = null;
  static getInstance() {
    if (!this.instance) this.instance = new DrawingContext();
    return this.instance;
  }
  constructor() {
    this.shapes = [];
  }
}

// 工厂：创建不同图形
class ShapeFactory {
  static create(type, config) {
    const creators = {
      circle: (c) => ({ type: 'circle', ...c }),
      rect: (c) => ({ type: 'rect', ...c }),
    };
    return creators[type](config);
  }
}

// 命令 + 备忘录：可撤销的绘图操作
class AddShapeCommand {
  constructor(context, shape) {
    this.context = context;
    this.shape = shape;
  }
  execute() {
    this.context.shapes.push(this.shape);
  }
  undo() {
    this.context.shapes.pop();
  }
}

// 观察者：绘图变化通知 UI 刷新
class DrawingApp {
  constructor() {
    this.context = DrawingContext.getInstance();
    this.history = [];
    this.listeners = [];
  }
  onChange(fn) {
    this.listeners.push(fn);
  }
  notify() {
    this.listeners.forEach((fn) => fn(this.context.shapes));
  }
  draw(type, config) {
    const shape = ShapeFactory.create(type, config); // 工厂
    const command = new AddShapeCommand(this.context, shape); // 命令
    command.execute();
    this.history.push(command);
    this.notify(); // 观察者
  }
  undo() {
    const command = this.history.pop();
    if (command) {
      command.undo();
      this.notify();
    }
  }
}

const app = new DrawingApp();
app.onChange((shapes) => console.log('画布更新，图形数:', shapes.length));
app.draw('circle', { x: 10, y: 10, r: 5 }); // 画布更新，图形数: 1
app.draw('rect', { x: 0, y: 0, w: 20, h: 10 }); // 画布更新，图形数: 2
app.undo(); // 画布更新，图形数: 1

// 过度设计的例子
class SingletonFactoryBuilder {
  // 不必要的复杂性
}

// 简洁的实现
const singleton = {
  instance: null,
  getInstance() {
    if (!this.instance) {
      this.instance = { data: {} };
    }
    return this.instance;
  },
};

// 模块化组织设计模式
// patterns/observer.js
export class EventEmitter { /* ... */ }

// patterns/strategy.js
export const strategies = { /* ... */ }

// patterns/factory.js
export class Factory { /* ... */ }

// 使用
import { EventEmitter } from './patterns/observer';
import { strategies } from './patterns/strategy';

// 避免内存泄漏
class Component {
  constructor() {
    this.unsubscribe = store.subscribe(this.handleChange);
  }
  
  handleChange = (state) => {
    // 处理状态变化
  }
  
  destroy() {
    // 清理订阅
    this.unsubscribe();
  }
}

// 使用 WeakMap 避免内存泄漏
const privateData = new WeakMap();

class MyClass {
  constructor() {
    privateData.set(this, { secret: 'value' });
  }
  
  getSecret() {
    return privateData.get(this).secret;
  }
}

// 测试观察者模式
describe('EventEmitter', () => {
  it('should call listeners when event is emitted', () => {
    const emitter = new EventEmitter();
    const listener = jest.fn();
    
    emitter.on('test', listener);
    emitter.emit('test', 'data');
    
    expect(listener).toHaveBeenCalledWith('data');
  });
  
  it('should unsubscribe correctly', () => {
    const emitter = new EventEmitter();
    const listener = jest.fn();
    
    const unsubscribe = emitter.on('test', listener);
    unsubscribe();
    emitter.emit('test', 'data');
    
    expect(listener).not.toHaveBeenCalled();
  });
});