一、模式核心理解
模板方法模式是一种行为设计模式，通过定义算法骨架并允许子类重写特定步骤来实现代码复用。
如同建筑图纸规定房屋结构，具体装修由业主决定，该模式适用于固定流程中需要灵活扩展的场景。
// 基础请求处理类（模板）
class BaseRequestHandler {// 模板方法（禁止override）async execute() {this.validateParams();const processed = await this.processRequest();this.afterProcess();return this.createResponse(processed);}validateParams() {throw new Error("必须实现参数校验方法");}// 钩子方法（可选实现）afterProcess() {}
}// 具体API请求实现
class UserAPIHandler extends BaseRequestHandler {validateParams() {if (!this.params.userId) throw "用户ID必填";}async processRequest() {return await fetch(`/users/${this.params.userId}`);}createResponse(data) {return { status: 200, data };}
}// 使用示例
const handler = new UserAPIHandler({ userId: 123 });
handler.execute();二、典型应用场景
1. 框架生命周期控制
// React类组件示例
class BaseComponent extends React.Component {// 模板方法componentDidMount() {this.initState();this.fetchData();this.bindEvents();}initState() {} // 子类实现fetchData() {} // 子类实现bindEvents() {} // 默认空实现（钩子方法）
}class UserList extends BaseComponent {initState() {this.setState({ users: [] });}fetchData() {axios.get('/api/users').then(res => this.setState({ users: res.data }));}
}2. 表单校验系统
class FormValidator {validate(formData) {this.checkRequiredFields(formData);const customResult = this.customValidation(formData);return this.formatResult(customResult);}checkRequiredFields(formData) {// 通用必填校验逻辑}customValidation() {throw new Error("必须实现具体校验规则");}formatResult(result) {return { isValid: result, timestamp: Date.now() };}
}class LoginFormValidator extends FormValidator {customValidation(formData) {return formData.password.length >= 8;}
}三、使用建议
- 流程标准化：支付流程（风控检查->创建订单->调用支付->结果处理）
class PaymentProcessor {async pay(amount) {this.riskCheck();const order = this.createOrder(amount);const result = await this.callPaymentGateway(order);return this.handleResult(result);}// ...抽象方法声明
}- 合理使用钩子：在报表生成器中设置可选步骤
class ReportGenerator {generate() {this.fetchData();this.beforeRender(); // 钩子方法this.renderHeader();this.renderBody();}beforeRender() {} // 默认空实现
}- 组合优于继承：对于复杂场景建议使用策略模式+模板方法
class DataExporter {constructor(formatter) {this.formatter = formatter;}export() {const raw = this.getData();return this.formatter(raw);}
}四、注意事项
- 避免流程碎片化（错误示例）
// 反模式：过度拆分步骤
class BadTemplate {execute() {this.step1();this.step2();this.step3();this.step4();// 20+步骤...}
}- 子类责任边界
class OrderProcessor extends BaseProcessor {validate() {// 不要修改执行顺序super.validate(); // 必须调用父类方法this.checkInventory(); // 扩展校验}
}- 模板方法冻结
class SecureBase {execute() {Object.freeze(this.execute); // 防止子类重写模板方法// ...执行流程}
}五、总结
模板方法模式在前端开发中适合处理流程固定但实现可变的场景，如请求处理、表单校验、生命周期管理等。使用时要注意：
- 保持模板方法稳定，通过钩子方法扩展
- 子类实现不超过3层继承
- 复杂场景结合策略模式使用
- 使用TypeScript时声明抽象方法
// TypeScript实现示例
abstract class UIComponent {abstract render(): void;mount() {this.willMount();this.render();this.didMount();}protected willMount() {}protected didMount() {}
}正确使用模板方法模式可以提升代码复用率30%以上，但需根据实际场景灵活选择实现方式。
在微前端架构中，该模式常用于基座应用与子应用的生命周期管理，建议结合具体业务需求进行合理设计。
