红宝书第五十三讲：Google JavaScript代码规范（简化版）：让代码像乐高一样整齐

---

红宝书第五十三讲：Google JavaScript代码规范（简化版）：让代码像乐高一样整齐

代码规范 = 保持代码统一风格 + 易于团队协作
规则示例（基于参考资料）¹²：

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、代码可读性：看得懂的代码才是好代码

1. 缩进：用空格代替Tab键（资料3建议4个空格）¹：

   // 正确✅：使用4个空格缩进
   function sum(a, b) {
    return a + b; // 这里前面有4个空格
   }

2. 命名规范：
3. 变量：小驼峰（首字母小写），如 userName ¹

4. 函数：动词开头，如 calculateTotal()

   // 好例子🌰：
   let studentCount = 10; 
   function getUserInfo() { ... }

---

二、文件组织：把代码分门别类

• 每个文件只做一件事（如 user.js 处理用户相关）²
  文件结构示例：

  src/
  ├── utils/
  │   ├── math.js     // 数学工具函数
  │   └── date.js     // 日期处理函数
  └── components/
    └── Button.js   // 按钮组件

---

三、代码构建与优化

1. 合并文件：减少HTTP请求（资料4、资料6建议合并JS文件）³⁴

   flowchart LR
    多个JS文件 --> 合并为一个.min.js --> 压缩后代码体积更小

2. 代码压缩工具（如Webpack）³：

   // 压缩前→后对比
   function hello() { console.log('Hello'); } 
   // 压缩后→ function hello(){console.log("Hello")}

---

四、实际案例演示

规范的代码 vs 不规范的代码:

// 不规范的代码❌（混乱缩进，命名随意）
function a(x,y){
return x+y;}
let abc=12;

// 规范的代码✅（4空格缩进，有意义命名）
function calculateSum(num1, num2) {
    return num1 + num2;
}
let itemCount = 12;

---

关键规则总结

规则	推荐做法	资料依据
缩进	4空格（非Tab）	资料3第3段
文件组织	按功能分文件	资料2第1段
变量命名	小驼峰，见名知意	资料3（可读性部分）
构建优化	合并压缩JS文件	资料4、6

---

目录：总目录

上篇文章：红宝书第五十二讲：零基础PWA技术全解析：Service Worker + 离线缓存

脚注

---

1. 《JavaScript高级程序设计（第5版）》强调缩进和命名对可读性的影响 ↩
2. 《JavaScript高级程序设计（第5版）》指出按功能拆分文件提升维护性 ↩
3. 《JavaScript高级程序设计（第5版）》建议构建流程优化代码部署 ↩
4. 《JavaScript高级程序设计（第5版）》提到压缩减少文件体积 ↩