JavaScript工厂模式

HTTP客户端-工厂模式

class HttpClient {
  constructor(config) {
    this.baseURL = config.baseURL;
    this.timeout = config.timeout;
    this.headers = config.headers;
  }
  
  async get(url) {
    // 模拟： HTTP GET 请求
    console.log(`GET ${this.baseURL}${url}`);
    return { data: 'mock data' };
  }
}

class HttpClientFactory {
  static createClient(type) {
    const configs = {
      api: {
        baseURL: 'https://api.example.com',
        timeout: 5000,
        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
      },
      upload: {
        baseURL: 'https://upload.example.com',
        timeout: 30000,
        headers: { 'Content-Type': 'multipart/form-data' }
      },
      analytics: {
        baseURL: 'https://analytics.example.com',
        timeout: 2000,
        headers: { 'X-API-Key': process.env.ANALYTICS_API_KEY }
      }
    };
    const config = configs[type];
    if (!config) {
      throw new Error(`不支持的客户端类型: ${type}`);
    }
    return new HttpClient(config);
  }
}

// 使用：客户端代码完全解耦
const apiClient = HttpClientFactory.createClient('api');
const uploadClient = HttpClientFactory.createClient('upload');

apiClient.get('/users');
uploadClient.get('/files');

表单验证器-工厂模式

class EmailValidator {
  validate(value) {
    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    return { valid, message: valid ? '' : '请输入有效的邮箱地址' };
  }
}

class PhoneValidator {
  validate(value) {
    const valid = /^1[3-9]\d{9}$/.test(value);
    return { valid, message: valid ? '' : '请输入有效的手机号码' };
  }
}

class ValidatorFactory {
  static createValidator(type) {
    const validators = {
      email: () => new EmailValidator(),
      phone: () => new PhoneValidator(),
    };
    const factory = validators[type];
    if (!factory) {
      throw new Error(`不支持的验证器类型: ${type}`);
    }
    return factory();
  }
}

// 使用：统一的验证接口
const emailValidator = ValidatorFactory.createValidator('email');
const phoneValidator = ValidatorFactory.createValidator('phone');

console.log(emailValidator.validate('test@example.com'));
console.log(phoneValidator.validate('13800138000'));

React组件-工厂模式

// 基础组件
const Button = ({ variant, children, ...props }) => {
  const classes = {
    primary: 'bg-blue-500 text-white',
    secondary: 'bg-gray-500 text-white'
  };
  return (
    <button className={`px-4 py-2 rounded ${classes[variant]}`} {...props}>
      {children}
    </button>
  );
};

const Input = ({ error, ...props }) => (
  <div>
    <input
      className={`border rounded px-3 py-2 ${error ? 'border-red-500' : 'border-gray-300'}`}
      {...props}
    />
    {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
  </div>
);

// 组件工厂
class ComponentFactory {
  static components = {
    button: Button,
    input: Input,
  };
  static createComponent(type, props) {
    const Component = this.components[type];
    if (!Component) {
      throw new Error(`不支持的组件类型: ${type}`);
    }
    return React.createElement(Component, props);
  }
}

// 使用
const MyForm = () => {
  return (
    <div>
      {ComponentFactory.createComponent('input', { 
        placeholder: '请输入用户名' 
      })}
      {ComponentFactory.createComponent('button', { 
        variant: 'primary',
        children: '提交'
      })}
    </div>
  );
};

https://juejin.cn/post/7541039466799071272 稀土掘金