JavaScript基础教程（五十二）代码规范：告别屎山代码！JavaScript代码规范的终极救赎-优快云博客

1. 命名规范：名副其实的艺术

糟糕的命名是代码的“第一宗罪”。好的命名应当清晰表达意图，避免歧义。

// 糟糕的命名
let d;
let arr;
function fn() {}

// 良好的命名
let elapsedTimeInDays;
let userList;
function calculateTotalPrice() {}

骆驼命名法(camelCase)用于变量和函数，帕斯卡命名法(PascalCase)用于类和构造函数，全大写加下划线用于常量。这样的约定 instantly 提升代码可读性。

2. 一致性的力量：格式与缩进

一致的格式是代码整洁的基础。选择2空格还是4空格并不重要，重要的是团队保持一致。

// 不一致的缩进
function badIndent() {
let a = 1;
  let b = 2;
    return a + b;
}

// 一致的缩进（2空格）
function goodIndent() {
  let a = 1;
  let b = 2;
  return a + b;
}

现代编辑器通常提供自动格式化功能，强烈推荐使用Prettier等工具统一代码风格。

3. 函数设计：单一职责原则

函数应该短小精悍，只做一件事，并且做好这件事。

// 功能过多的函数
function processUserData(user) {
  // 验证用户
  if (!user || !user.name) {
    throw new Error('Invalid user');
  }
  
  // 保存到数据库
  database.save(user);
  
  // 发送欢迎邮件
  emailService.sendWelcomeEmail(user.email);
}

// 拆分后的函数
function validateUser(user) {
  if (!user || !user.name) {
    throw new Error('Invalid user');
  }
}

function processUserData(user) {
  validateUser(user);
  saveUserToDatabase(user);
  sendWelcomeEmail(user.email);
}

4. 异步处理：Promise与async/await最佳实践

回调地狱已成为历史，现代JavaScript提供了更优雅的异步处理方式。

// 回调地狱
getUser(id, function(user) {
  getPosts(user, function(posts) {
    getComments(posts, function(comments) {
      // 更多的嵌套...
    });
  });
});

// Promise链
getUser(id)
  .then(user => getPosts(user))
  .then(posts => getComments(posts))
  .then(comments => {
    // 处理评论
  })
  .catch(error => {
    // 统一错误处理
  });

// async/await（最佳选择）
async function getData() {
  try {
    const user = await getUser(id);
    const posts = await getPosts(user);
    const comments = await getComments(posts);
    return comments;
  } catch (error) {
    // 错误处理
  }
}

5. 代码注释：解释为什么，而不是什么

好的注释解释代码的目的和原因，而不是重复代码本身。

// 糟糕的注释
let x = 5; // 设置x为5

// 好的注释
// 设置超时时间为5秒，这是根据API限制决定的
const TIMEOUT = 5000;

6. 现代工具：ESLint和Prettier

使用工具自动化执行代码规范：

// .eslintrc.js 示例配置
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  rules: {
    'no-console': 'warn',
    'max-len': ['error', { 'code': 100 }]
  },
};