# 第四章 审美

## 为什么审美这么重要

代码审美直接影响代码的可读性和可维护性。美观的代码不仅让人愉悦，还能显著提高团队协作效率。

// 不好的代码风格
function calculate(a:number,b:number,op:string){
if(op==='+')return a+b
else if(op==='-')return a-b
else if(op==='*')return a*b
else if(op==='/')return a/b}

// 好的代码风格
function calculate(
  a: number,
  b: number,
  op: '+' | '-' | '*' | '/'
): number {
  switch(op) {
    case '+': return a + b;
    case '-': return a - b;
    case '*': return a * b;
    case '/': return a / b;
  }
}

重新安排换行来保持一致和紧凑

合理的换行可以使代码结构更清晰。

// 不一致的换行
const user = {name:'张三',age:25,
gender:'male'};

// 一致的换行
const user = {
  name: '张三',
  age: 25,
  gender: 'male'
};

用方法来整理不规则的东西

将不规则逻辑封装成方法可以提高可读性。

// 直接使用不规则逻辑
if (user.age > 18 && user.gender === 'male' && user.education 
=== 'college') {
  // ...
}

// 封装成方法
function isEligibleForDiscount(user: User): boolean {
  return user.age > 18 && 
         user.gender === 'male' && 
         user.education === 'college';
}

if (isEligibleForDiscount(user)) {
  // ...
}

在需要时使用列对齐

列对齐可以使相似代码更易比较。

// 未对齐的常量
const MAX_WIDTH = 1024;
const MIN_WIDTH = 100;
const DEFAULT_WIDTH = 800;

// 对齐的常量
const MAX_WIDTH     = 1024;
const MIN_WIDTH     = 100;
const DEFAULT_WIDTH = 800;

选一个有意义的顺序，并一致地使用

保持一致的顺序有助于快速理解代码。

// 不一致的顺序
interface User {
  age: number;
  name: string;
  id: string;
}

// 一致的顺序
interface User {
  id: string;
  name: string;
  age: number;
}

把声明按块组织起来

相关声明应该组织在一起。

// 分散的声明
let total = 0;
const TAX_RATE = 0.1;
let subtotal = 100;
const DISCOUNT = 0.9;

// 按块组织的声明
// 常量
const TAX_RATE = 0.1;
const DISCOUNT = 0.9;
// 变量
let subtotal = 100;
let total = 0;

把代码分成"段落"

用空行分隔逻辑段落。

function processOrder(order: Order) {
  // 验证订单
  if (!isValid(order)) {
    throw new Error('Invalid order');
  }

  // 计算价格
  const subtotal = calculateSubtotal(order.items);
  const tax = subtotal * TAX_RATE;
  const total = subtotal + tax;

  // 保存订单
  saveOrderToDatabase(order, total);
}

个人风格与一致性

在团队中保持一致的代码风格比个人偏好更重要。

总结

大家都愿意都更有美感的代码。通过把代码用一致的、有意义的方式“格式化”，可以把代码变得更容易读，并且可以读得更快。

下面是讨论过得一些具体技巧：

• 如果多个代码块做相似得事情，尝试让它们有相同得剪影。
• 把代码按列对齐可以让代码更容易浏览。
• 如果在一段代码中提到ABC，那么不要在另一端中说BCA。选择一个有意义得顺序，并且始终用这样得顺序。
• 用空行来吧大块代码分成逻辑上得“段落”。