// 💩 烂命名版本 const data = useFetch(); const handler = () => {...}; const flag = useCheck(); function Component({ value, onChange }) { // ... }我当时的反应:
4.value和onChange是通用prop还是特定业务逻辑?
// ✅ 好命名版本 const userProfile = useUserProfile(userId); const submitOrderHandler = () => {...}; const isUserEligibleForDiscount = useDiscountEligibilityCheck(userId); // 堆代码 duidaima.com function PriceDisplayCard({ currentPrice, onPriceUpdate }) { // ... }同样的逻辑,但每个名字都在回答:
// 🚨 警告信号 function handleUserDataAndUpdateUIAndSendAnalytics() { // 一个函数干了三件事 } // ✅ 拆分后 function updateUserProfile(userData) {...} function refreshProfileUI() {...} function trackProfileUpdate(eventData) {...}规律:当你需要用And连接多个动词时,说明这个函数违反了单一职责原则。
// 🚨 警告信号 const userDataTemp = {...}; const userDataFinal = {...}; const userDataProcessed = {...}; // ✅ 明确阶段职责 const rawUserInput = {...}; // 原始输入 const validatedUserData = {...}; // 校验后 const normalizedUserProfile = {...}; // 规范化后规律:temp、final、new这类形容词,通常意味着你没想清楚数据的生命周期。
// 🚨 警告信号 const manager = useManager(); const helper = useHelper(); const service = useService(); // ✅ 明确业务语义 const cartManager = useShoppingCart(); const priceCalculator = usePriceCalculation(); const paymentGateway = usePaymentService();规律:Manager、Helper、Service是编程中的"口头禅",暴露你对业务理解的浅薄。
// A组风格:需要注释解释 const x = 0.15; // 折扣率 const y = calculateFn(x); // 计算最终价格 // B组风格:名字即文档 const discountRate = 0.15; const finalPrice = applyDiscount(discountRate);注释会过期,但名字跟着代码走。当你把x改成discountRate时,你不只是改了个名字——你是在给系统注入语义。
// ❌ 技术导向 const dto = fetchData(); const vo = transform(dto); // ✅ 业务导向 const orderSummary = fetchOrderSummary(); const orderDisplay = formatForDisplay(orderSummary);为什么:产品经理看得懂的名字,才是好名字。
// ❌ 不对称 const startServer = () => {...}; const stopServing = () => {...}; // ✅ 对称 const startServer = () => {...}; const stopServer = () => {...};为什么:对称性让人一眼看出配对关系,降低认知负担。
// ✅ 好的梯度 for (let i = 0; i < 10; i++) { ... } // 局部短变量 const userId = getUserId(); // 模块级中等长度 const authenticatedUserSessionToken = ...; // 全局长变量为什么:作用域越大,名字越需要自解释。
❌ data → 用具体数据类型(users、config) ❌ info → 用明确信息类型(profile、metadata) ❌ handle → 用具体动作(submit、validate) ❌ manager → 用具体职责(coordinator、factory)原则5:让名字"可念"
// ❌ 无法念出来 const usrLstMgr = ...; // 堆代码 duidaima.com // ✅ 可以念出来 const userListManager = ...;为什么:代码是要在Code Review时讨论的,念不出来的名字没法交流。
// ❌ 过度缩写 const u = getU(); const p = calcP(u); // ✅ 该长就长 const user = getUser(); const price = calculatePrice(user);IDE有自动补全,多打几个字母不会死。
// ❌ 匈牙利命名法遗毒 const userArray = []; const priceNumber = 0; const isActiveBoolean = false; // ✅ 让TypeScript干这活 const users: User[] = []; const price: number = 0; const isActive: boolean = false;类型系统已经告诉你类型了,名字里再写一遍是浪费。
// ❌ 啰嗦 class User { userName: string; userAge: number; userEmail: string; } // ✅ 简洁 class User { name: string; age: number; email: string; }已经在User类里了,还写userXxx干嘛?