闽公网安备 35020302035485号
// 💩 烂命名版本
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干嘛?