JavaScript设计模式

// 三大分类概览
/* 创建型 (Creational) */
• 工厂模式 (Factory)
• 单例模式 (Singleton)
• 建造者模式 (Builder)
• 原型模式 (Prototype)

/* 结构型 (Structural) */
• 适配器模式 (Adapter)
• 装饰器模式 (Decorator)
• 代理模式 (Proxy)
• 外观模式 (Facade)

/* 行为型 (Behavioral) */
• 观察者模式 (Observer)
• 策略模式 (Strategy)
• 迭代器模式 (Iterator)
• 命令模式 (Command)

// 简单工厂：根据类型返回不同对象
function createUser(type, name) {
  const user = { name };
  if (type === 'admin') {
    user.role = 'admin';
    user.permissions = ['read', 'write', 'delete'];
  } else if (type === 'guest') {
    user.role = 'guest';
    user.permissions = ['read'];
  }
  return user;
}

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

// 使用立即执行函数和闭包保存实例
const Singleton = (function() {
  let instance;
  function init() {
    return {
      data: '单例数据',
      method() { console.log(this.data); }
    };
  }
  return {
    getInstance() {
      if (!instance) instance = init();
      return instance;
    }
  };
})();
const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true

// 建造者模式示例：构造HTTP请求对象
class RequestBuilder {
  constructor() {
    this.url = '';
    this.method = 'GET';
    this.headers = {};
    this.body = null;
  }
  setUrl(url) { this.url = url; return this; }
  setMethod(method) { this.method = method; return this; }
  setHeader(key, val) { this.headers[key] = val; return this; }
  setBody(body) { this.body = body; return this; }
  build() {
    return { url: this.url, method: this.method, headers: this.headers, body: this.body };
  }
}
const request = new RequestBuilder()
  .setUrl('/api/users')
  .setMethod('POST')
  .setHeader('Content-Type', 'application/json')
  .setBody({ name: '张三' })
  .build();

// 使用Object.create实现原型克隆
const proto = {
  greet() { return `你好，我是${this.name}`; }
};
const obj1 = Object.create(proto);
obj1.name = '李四';
console.log(obj1.greet()); // 你好，我是李四

// 也可以使用 structuredClone 深克隆 (现代JS)
const original = { data: [1,2,3] };
const clone = structuredClone(original);

// 旧接口与期待的新接口不匹配
class OldApi { request() { return '旧数据格式'; } }
class NewApi { fetchData() { return '新数据格式'; } }

class Adapter {
  constructor(api) { this.api = api; }
  request() {
    const data = this.api.fetchData();
    return `适配器转换: ${data}`;
  }
}
const adapter = new Adapter(new NewApi());
console.log(adapter.request()); // 适配器转换: 新数据格式

// 使用高阶函数装饰
function logDecorator(fn) {
  return function(...args) {
    console.log(`调用函数 ${fn.name}，参数:`, args);
    return fn.apply(this, args);
  };
}
function add(a, b) { return a + b; }
const decoratedAdd = logDecorator(add);
decoratedAdd(3, 4); // 日志输出

// 使用Proxy实现属性访问验证
const target = { name: 'target', secret: 'confidential' };
const handler = {
  get(obj, prop) {
    if (prop === 'secret') throw new Error('禁止访问');
    return obj[prop];
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // target
// proxy.secret; // Error: 禁止访问

// 简单发布订阅实现
class EventBus {
  constructor() { this.events = {}; }
  on(event, fn) { (this.events[event] ||= []).push(fn); }
  emit(event, data) { this.events[event]?.forEach(fn => fn(data)); }
}
const bus = new EventBus();
bus.on('message', msg => console.log('收到:', msg));
bus.emit('message', 'Hello World'); // 收到: Hello World

// 表单校验策略
const strategies = {
  isNonEmpty: val => !val ? '不能为空' : '',
  minLength: (val, len) => val.length < len ? `至少${len}字符` : ''
};
class Validator {
  config = [];
  add(value, rule, ...args) {
    this.config.push({ value, rule, args });
  }
  validate() {
    return this.config.map(item => strategies[item.rule](item.value, ...item.args)).filter(msg => msg);
  }
}
// 使用: 将算法与调用分离

// 自定义可迭代对象
const range = {
  from: 1, to: 5,
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        return current <= last ? { value: current++, done: false } : { done: true };
      }
    };
  }
};
for (let num of range) console.log(num); // 1,2,3,4,5

// 命令模式实现撤销
class Calculator {
  value = 0;
  history = [];
  execute(cmd) { this.value = cmd.execute(this.value); this.history.push(cmd); }
  undo() {
    const cmd = this.history.pop();
    if (cmd) this.value = cmd.undo(this.value);
  }
}
class AddCommand { constructor(amount) { this.amount = amount; }
  execute(val) { return val + this.amount; }
  undo(val) { return val - this.amount; }
}

// 1. 单例管理弹窗容器
const popupManager = (function() {
  let instance;
  class Popup { /* ... */ }
  return { getInstance() { return instance || (instance = new Popup()); } };
})();
// 2. 工厂创建不同类型弹窗
// 3. 观察者监听关闭事件
// 4. 策略决定动画效果