🤔 为什么命名如此之难？
认知负担的根源
// ❌ 认知负担重 - 大脑需要解码
function process(data) {
let temp = transform(data);
return temp.filter(x => x.status);
}
// ✅ 认知负担轻 - 一目了然
function calculateActiveUsers(userProfiles) {
const usersWithStats = calculateUserStats(userProfiles);
return usersWithStats.filter(user => user.isActive);
}
命名的本质是思维的外化：每个名字都是你对问题域理解的具象表达。
💀 糟糕命名的"七宗罪"
1. 模糊抽象罪
// ❌ 过于抽象，不知所云
function handle() { ... }
function doStuff() { ... }
function manage() { ... }
// ✅ 具体明确，意图清晰
function handleUserRegistration() { ... }
function processPayment() { ... }
function manageInventoryLevels() { ... }
2. 信息缺失罪
// ❌ 关键信息缺失
let data; // 什么数据？
let temp; // 临时什么？
let result; // 什么结果？
// ✅ 信息完整自解释
let userProfileData;
let temporaryUploadFile;
let validationResult;
3. 技术暴露罪
// ❌ 暴露实现细节
let stringArray; // 应该用业务语义
let boolFlag; // 过于技术化
let intCounter; // 类型信息冗余
// ✅ 关注业务意图
let productNames; // 业务语义明确
let isAvailable; // 布尔命名规范
let retryCount; // 业务上下文清晰
4. 上下文重复罪
// ❌ 冗余的上下文
class UserClass { // Class 是冗余的
userName: string; // User 重复
userEmail: string; // User 重复
getUserInfo(): UserInfo // User 重复
}
// ✅ 简洁的上下文
class User {
name: string; // 在 User 类中很清晰
email: string;
getProfile(): Profile // 方法名更自然
}
5. 长度极端罪
// ❌ 太短：信息不足
let u; // 用户？单位？
let cfg; // 配置？但哪个配置？
// ❌ 太长：过度设计
let currentLoggedInUserAuthenticationToken; // 过于冗长
// ✅ 恰到好处
let user;
let appConfig;
let authToken; // 在认证上下文中足够清晰
6. 不一致罪
// ❌ 风格混乱
let customerName;
let user_address; // 混用驼峰和下划线
let UserAge; // 混用大小写
// ✅ 风格统一
let customerName;
let userAddress;
let userAge;
7. 谎言罪
// ❌ 名不副实
function validateEmail() {
// 实际上还验证了密码！ 😱
validatePassword();
validateEmailFormat();
}
// ✅ 名副其实
function validateCredentials() {
validatePassword();
validateEmailFormat();
}
🎯 命名层次化策略
变量命名：数据的精准描述
基础数据类型：
// ❌ 模糊的基础变量
let flag = true;
let num = 42;
let str = "hello";
// ✅ 明确的基础变量
let isUserLoggedIn = true;
let maxRetryAttempts = 42;
let welcomeMessage = "Hello, World!";
集合类型：
// ❌ 模糊的集合
let list = [];
let map = {};
let items = getData();
// ✅ 清晰的集合
let activeUsers = [];
let userPermissions = {};
let shoppingCartItems = getCartProducts();
状态变量：
// ❌ 模糊的状态
let status = "loading";
let mode = 1;
// ✅ 明确的状态
let uploadStatus = "processing";
let editorMode = "preview";
函数命名：行为的准确表达
纯函数（计算类）：
// ❌ 模糊的计算函数
function calculate(data) { ... }
function process(input) { ... }
// ✅ 明确的计算函数
function calculateTaxAmount(orderTotal) { ... }
function formatCurrencyValue(amount) { ... }
function generateOrderSummary(cartItems) { ... }
动作函数（命令类）：
// ❌ 模糊的动作函数
function handle() { ... }
function doSomething() { ... }
// ✅ 明确的动作函数
function submitUserRegistration(formData) { ... }
function exportReportToPDF(reportData) { ... }
function invalidateUserSession(userId) { ... }
查询函数（布尔类）：
// ❌ 模糊的查询函数
function check(value) { ... }
function validate(data) { ... }
// ✅ 明确的查询函数
function isEmailValid(email) { ... }
function hasAdminPermission(user) { ... }
function shouldDisplayWarning(temperature) { ... }
类命名：概念的完整封装
实体类：
// ❌ 模糊的类名
class Processor { ... }
class Manager { ... }
class Helper { ... }
// ✅ 明确的类名
class PaymentProcessor { ... }
class UserSessionManager { ... }
class DataValidationHelper { ... }
服务类：
// ❌ 模糊的服务名
class Service { ... }
class API { ... }
// ✅ 明确的服务名
class AuthenticationService { ... }
class EmailNotificationService { ... }
class WeatherDataAPI { ... }
🎪 命名模式库
布尔变量模式
// 存在性检查
let hasPermission = true;
let containsDuplicates = false;
let includesTax = true;
// 状态检查
let isLoaded = false;
let isProcessing = true;
let wasUpdated = true;
// 能力检查
let canEdit = true;
let shouldRetry = false;
let mustConfirm = true;
// 过去式状态
let hasBeenValidated = true;
let hadError = false;
函数命名模式
// 获取数据
getUserById(id) // 明确获取什么，通过什么
findActiveUsers() // 查找符合条件的
fetchLatestNews() // 从远程获取
// 转换数据
convertToUSD(amount) // 转换为目标格式
normalizePhoneNumber(phone) // 标准化处理
mapProductToViewModel(product) // 映射到视图模型
// 验证检查
isValidEmail(email) // 返回布尔值
ensureUserExists(userId) // 确保条件满足，否则报错
validatePasswordStrength(password) // 验证并返回结果
// 事件处理
handleButtonClick(event) // 处理具体事件
onUserLogin(user) // 当某事发生时
beforeFormSubmit(data) // 在某个动作前
集合命名模式
// 数组/列表
activeUsers: User[] // 形容词+复数名词
pendingOrders: Order[] // 状态+复数名词
userPermissionList: Permission[] // 明确是列表
// 映射/字典
userById: Record<number, User> // 键值对关系
productPrices: Map<string, number> // 明确的映射关系
configurationSettings: AppConfig // 配置集合
🔄 重构命名实战
场景1：用户注册流程
// ❌ 重构前 - 像在读天书
function proc(data) {
let temp = data.info;
let result = validate(temp);
if (result) {
save(temp);
return { success: true };
}
return { error: "Invalid" };
}
// ✅ 重构后 - 像在读文档
function registerNewUser(registrationData) {
const userProfile = registrationData.userProfile;
const validationResult = validateUserProfile(userProfile);
if (validationResult.isValid) {
saveUserProfile(userProfile);
return { success: true };
}
return { error: validationResult.errorMessage };
}
场景2：电商购物车
// ❌ 重构前 - 思维混乱
class Cart {
items = [];
add(prod) {
this.items.push(prod);
}
calc() {
let total = 0;
for (let item of this.items) {
total += item.price * item.qty;
}
return total;
}
}
// ✅ 重构后 - 业务清晰
class ShoppingCart {
cartItems = [];
addProductToCart(product) {
this.cartItems.push(product);
}
calculateGrandTotal() {
let grandTotal = 0;
for (let cartItem of this.cartItems) {
grandTotal += cartItem.unitPrice * cartItem.quantity;
}
return grandTotal;
}
}
🧠 命名思维框架
// ❌ config → ✅ databaseConnectionConfig
4W1H 思考法
在命名前问自己：
-
What (是什么)：这个变量/函数代表什么？
// ❌ data → ✅ userRegistrationFormData -
Why (为什么)：为什么需要它？它的目的是什么？
// ❌ temp → ✅ unsavedChanges -
When (何时)：在什么情况下使用？什么生命周期？
// ❌ flag → ✅ isInitialRenderComplete -
Where (何处)：在哪个上下文/范围内使用？
// ❌ config → ✅ databaseConnectionConfig
同行评审检查清单
// 把这段代码给同事看，能否在30秒内理解？
// ❌ 难以理解
function process(a, b) {
let x = transform(a);
let y = modify(b);
return combine(x, y);
}
// ✅ 容易理解
function mergeUserProfiles(primaryProfile, secondaryProfile) {
const normalizedPrimary = normalizeProfileData(primaryProfile);
const enhancedSecondary = enhanceProfileWithMetadata(secondaryProfile);
return mergeProfiles(normalizedPrimary, enhancedSecondary);
}
📚 领域特定命名指南
前端开发命名
// UI 状态
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedTab, setSelectedTab] = useState('profile');
// 事件处理
const handleSearchInputChange = (event) => { ... };
const onProductImageLoad = (imageData) => { ... };
// DOM 引用
const searchInputRef = useRef(null);
const modalContainerRef = useRef(null);
后端开发命名
// API 端点
@GetMapping("/users/{userId}/orders")
public List<Order> getUserOrderHistory(@PathVariable String userId) { ... }
// 服务方法
public Receipt processPayment(PaymentRequest paymentRequest) { ... }
public ValidationResult validateBusinessRules(Order order) { ... }
// 数据访问
public Optional<User> findUserByEmail(String email) { ... }
public List<Product> findProductsByCategory(Category category) { ... }
数据库命名
-- 表名：业务实体复数形式
users, orders, product_categories
-- 列名：具体描述性
created_at, updated_at,
is_active, email_address
-- 关联表：两个表名的组合
user_roles, order_items
🎉 命名的艺术境界
好名字的感官体验
// 🌟 优秀的命名让人"愉悦"
const shimmeringLoadingIndicator = createShimmerEffect();
const gentlyFadeOutElement = (element) => { ... };
const gracefullyHandleError = (error) => { ... };
// 这些名字不仅准确，还传递了"感觉"
命名即设计
// 好的命名反映好的设计
class OrderProcessor { // 这个类职责是否过重？
class PaymentValidator { // 单一职责清晰
class ShippingCostCalculator { // 明确的计算职责
// 如果命名困难，可能是设计问题！
🚀 实战练习：命名重构挑战
挑战1：重构模糊代码
// 重构前 - 你能理解这段代码在做什么吗？
function p(d) {
let r = [];
for (let i = 0; i < d.length; i++) {
if (d[i].s === 'a') {
r.push(d[i]);
}
}
return r;
}
// 花2分钟思考更好的命名，然后看下方答案...
// ✅ 重构后 - 现在清楚了吗？
function filterActiveUsers(users) {
const activeUsers = [];
for (let user of users) {
if (user.status === 'active') {
activeUsers.push(user);
}
}
return activeUsers;
}
挑战2：识别命名坏味道
// 找出下面代码中的命名问题并修复
class DataHandler {
processInfo(input) {
let output = [];
for (let i of input) {
if (i.flag) {
output.push(i.value);
}
}
return output;
}
}
// 你的重构方案：
// 1. 类名太泛化：DataHandler → __________
// 2. 方法名模糊：processInfo → __________
// 3. 参数名不清楚：input → __________
// 4. 变量名模糊：i, output, flag, value → __________
💡 命名工具和习惯
日常练习方法
-
代码审查时重点关注命名
-
定期重读自己一个月前写的代码
-
使用IDE的重构工具练习重命名
-
建立团队命名词汇表
有用工具推荐
// ESLint 规则 - 强制命名规范
"rules": {
"camelcase": ["error", { "properties": "always" }],
"id-length": ["error", { "min": 2, "exceptions": ["i", "j"] }],
"no-magic-numbers": "warn"
}
// 预提交检查 - 防止坏名字进入代码库
"pre-commit": ["lint:naming", "test"]
🌟 总结：命名的三重境界
第一重：语法正确
// 符合语言规范，但意义模糊
let variable1;
function function1() { ... }
第二重：语义清晰
// 名字准确反映含义
let userCount;
function calculateTotal() { ... }
第三重：业务共鸣
// 名字与业务领域完美契合
let concurrentUserLimit;
function determineEligibilityForPromotion() { ... }
记住： 每一次命名都是向未来（包括未来的自己）发送的信息。好的命名让代码成为活文档，坏的命名让代码成为技术债。
扫一扫
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
