JavaScript 代碼可讀性提升三大原則：命名、邏輯、常量

問題代碼特徵 (截圖分析)

• 變量名無語義：a, b, c, flag, temp
• 巢狀 if-else 超過 4 層，邏輯分支難追蹤
• 錯誤提示字符串硬編碼分散在各分支中

原則一：變量命名語義化

原則二：扁平化條件邏輯

反例：箭頭型代碼

if (user) {
    if (user.isActive) {
        if (user.hasPermission) {
            // 核心邏輯
        } else { showError('無權限'); }
    } else { showError('用戶未激活'); }
} else { showError('用戶不存在'); }

正例：衛語句提前返回

if (!user) return showError('用戶不存在');
if (!user.isActive) return showError('用戶未激活');
if (!user.hasPermission) return showError('無權限');
// 核心邏輯
doBusiness(user);

策略模式替換巨大 switch/if-else

const handlers = {
    'CREATE': handleCreate,
    'UPDATE': handleUpdate,
    'DELETE': handleDelete,
};
const handler = handlers[actionType] || handleDefault;
handler(payload);

原則三：錯誤/提示訊息常量化

反例

if (!landCode) return '宗地代碼不足19位不能編制單元號!';
if (duplicate) return '已生成的不動產單元號不能重復編制!';

正例：集中管理

const ERROR_MESSAGES = {
    UNCONFIRMED_DATA: '未確認數據不能編制單元號!',
    INVALID_LAND_CODE: '宗地代碼不足19位不能編制單元號!',
    DUPLICATE_UNIT: '已生成的不動產單元號不能重復編制!',
};

function validate(data) {
    if (!data.confirmed) return ERROR_MESSAGES.UNCONFIRMED_DATA;
    if (data.landCode.length < 19) return ERROR_MESSAGES.INVALID_LAND_CODE;
    if (isDuplicate(data.unitNo)) return ERROR_MESSAGES.DUPLICATE_UNIT;
    return null;
}

綜合重構示例

// 重構前: 50 行混雜邏輯
// 重構後:
class UnitNumberGenerator {
    static validateInput(input) { /* 返回錯誤碼或 null */ }
    static generate(landCode, owner) { /* 核心算法 */ }
    static save(record) { /* 持久化 */ }
}

// 調用處極其清晰
const error = UnitNumberGenerator.validateInput(input);
if (error) return showError(ERROR_MESSAGES[error]);
const record = UnitNumberGenerator.generate(input.landCode, input.owner);
UnitNumberGenerator.save(record);

工具輔助

• ESLint + Airbnb/Standard 規則強制命名/複雜度檢查
• SonarQube 掃描重複字符串、圈複雜度
• Prettier 統一格式化

總結

可讀性 = **命名自文檔** + **邏輯扁平化** + **配置集中化**。重構不僅為他人，更為 3 個月後的自己。