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><inputclassName={`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 稀土掘金