共计 1958 个字符，预计需要花费 5 分钟才能阅读完成。
技能封装的标准格式与最佳实践
背景痛点：新手常见问题
- 命名随意化
- 使用
doSomething等模糊动词 -
缺乏业务语义（如
processData替代calculateTax）
-
功能耦合度高
- 一个函数同时处理数据解析、业务计算和结果格式化
-
修改单点逻辑需要全量回归测试
-
复用性差
- 复制粘贴相似代码段
- 缺乏参数化设计（如硬编码配置值）
技术对比：封装范式选择
| 范式 | 适用场景 | 典型特征 |
|---|---|---|
| 函数式 | 无状态转换、数据流水线 | 纯函数、柯里化、组合 |
| 面向对象 | 复杂状态管理、领域模型 | 类继承、多态、封装 |
| 模块模式 | 工具类集合、第三方库封装 | IIFE、命名空间、静态方法 |
核心实现：三种典型封装
1. 基础功能封装（函数式）
/**
* 计算商品折扣价（纯函数）* @param basePrice 基础价格
* @param discountRate 折扣率(0-1)
* @returns 保留两位小数的折扣价
*/
const calculateDiscountedPrice = (basePrice: number, discountRate: number): number => {if (discountRate < 0 || discountRate > 1) {throw new Error('折扣率必须在 0 到 1 之间');
}
return parseFloat((basePrice * (1 - discountRate)).toFixed(2));
};2. 带状态封装（面向对象）
class ShoppingCart {private items: Array<{ id: string; price: number}> = [];
/**
* 添加商品项
* @param item 必须包含 id 和 price 属性
*/
addItem(item: { id: string; price: number}): void {this.items.push(Object.freeze(item)); // 防御性复制
}
/**
* 计算总价（含状态依赖）* @param discountHandler 可注入的折扣策略
*/
getTotalPrice(discountHandler?: (price: number) => number): number {const subtotal = this.items.reduce((sum, item) => sum + item.price, 0);
return discountHandler ? discountHandler(subtotal) : subtotal;
}
}3. 异步处理封装（Promise 链）
/**
* 顺序执行异步任务队列
* @param tasks 返回 Promise 的任务数组
* @param concurrency 并行数(default 1)
* @returns 按序完成的结果数组
*/
async function executeSequentially<T>(tasks: (() => Promise<T>)[],
concurrency = 1
): Promise<T[]> {const results: T[] = [];
for (let i = 0; i < tasks.length; i += concurrency) {const batch = tasks.slice(i, i + concurrency);
results.push(...await Promise.all(batch.map(task => task())));
}
return results;
}性能考量
- 内存占用
- 闭包引用会导致外部变量无法 GC（需手动解除引用）
-
类实例比纯函数多消耗约 15% 内存（V8 引擎实测）
-
执行效率
- 方法调用比函数调用慢约 2%（JIT 优化后差异可忽略）
- 过度封装会使调用栈深度增加，影响尾调用优化
避坑指南
- 避免过度封装
-
当函数代码少于 3 行且无复用需求时，直接内联
-
防御性编程
-
参数校验使用 joi 等库而非手动 if-else
import Joi from 'joi'; const schema = Joi.object({username: Joi.string().alphanum().min(3).max(30).required()}); -
控制副作用
-
纯函数应显式标注
/* pure */注释 -
类型完备性
-
使用 TS 的
never类型处理不可能路径function assertNever(x: never): never {throw new Error(`Unexpected object: ${x}`); } -
文档同步
- 使用 TSDoc 规范，工具自动生成文档
实践建议
- 质量指标
- 圈复杂度 ≤5（eslint 规则：complexity）
- 重复代码率 ≤5%（使用 jscpd 检测）
-
单元测试覆盖率 ≥80%（分支 + 语句）
-
重构信号
- 当函数参数超过 3 个时考虑对象参数化
- 当方法调用链超过 3 级时引入外观模式
思考题
- 如何设计一个既支持链式调用又能保持类型安全的 Builder 模式？
- 在微前端架构中，跨应用的技能封装需要注意哪些特殊约束？
正文完
