为什么你需要重视 JavaScript 代码规范
写代码就像写文章，你不仅要表达清楚意思，还要让别人读得舒服。在团队协作中，一份整洁、一致的代码，往往比功能实现本身更重要。尤其是在 JavaScript 这种动态类型语言中，自由度高，但也容易“野蛮生长”——变量命名随意、缩进混乱、函数写得像一团麻。
JavaScript 代码规范，就是为了解决这些问题而存在的。它不是一套束缚创造力的条条框框，而是一套让代码更易读、易维护、易协作的“通用语法”。就像写作文要有标点符号和段落结构一样，代码也需要统一的风格和规则。
想象一下：你接手一个项目，发现有人用 var 声明变量，有人用 let，还有人用 const 混着用；函数名有的是驼峰，有的是下划线；缩进有的是 2 个空格，有的是 4 个，甚至还有 Tab 键混用。这种混乱会让阅读和调试成本成倍增加。
所以，掌握并实践 JavaScript 代码规范，是每个开发者从“能跑”走向“好维护”的必经之路。
命名规范：让变量名成为代码的说明书
变量名是代码中最常见的“文字”，它不光要能用，更要“好懂”。一个合适的命名，能让你在几秒内理解变量的用途，而一个糟糕的命名，可能让你花几分钟去猜。
命名原则：见名知意
不要用 a、b、temp 这种无意义的名称。比如：
// ❌ 不推荐
const a = 10;
const b = 20;
const temp = a + b;
// ✅ 推荐
const price = 10;
const discount = 20;
const total = price + discount;
这里的 price 和 discount 一看就知道是价格和折扣，而 a 和 b 就像藏在暗处的谜题。
使用驼峰命名法（camelCase）
在 JavaScript 中，变量名、函数名、对象属性名推荐使用驼峰命名。比如：
// ✅ 推荐
const userName = 'Alice';
const getUserInfo = () => { /* ... */ };
const userPreferences = { theme: 'dark' };
// ❌ 不推荐
const user_name = 'Alice';
const get_user_info = () => { /* ... */ };
const user_preferences = { theme: 'dark' };
驼峰命名是 JavaScript 社区的“默认语言”，它更符合语法习惯，也更容易被编辑器识别和自动补全。
常量用大写加下划线
当变量值在程序运行期间不会改变时，应该用 const 并且命名全部大写，单词间用下划线分隔：
// ✅ 推荐
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = 'https://api.example.com';
// ❌ 不推荐
const maxRetryCount = 3;
const apiBaseUrl = 'https://api.example.com';
大写的命名方式是一种“视觉提示”：告诉所有人，“这个值不会变”。
缩进与空格：让代码“呼吸”起来
代码的结构就像一栋建筑的楼层布局。如果每层楼都挤得满满当当，没人能走进去。缩进和空格，就是让代码“留白”的方式。
统一使用 2 个空格缩进
虽然 Tab 和 4 空格也常见，但在现代 JavaScript 项目中，2 个空格是主流。它既节省空间，又保证了清晰的层级。
// ✅ 推荐
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
// ❌ 不推荐（混用 Tab 和空格，或 4 空格）
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
操作符前后加空格
JavaScript 中，操作符前后加空格是标准做法，能显著提升可读性：
// ✅ 推荐
const result = (a + b) * c / 2;
// ❌ 不推荐
const result=(a+b)*c/2;
虽然 result = (a+b)*c/2; 在语法上没错，但没有空格会让代码看起来“粘在一起”，像一团麻。
函数设计：小而专，功能单一
函数是代码的“积木”。一个好函数，应该只做一件事，并且这件事要做得干净利落。
避免过长的函数
如果一个函数超过 20 行，就要警惕了。它很可能在做多件事。比如：
// ❌ 不推荐：一个函数做了太多事
function processUserData(user) {
// 1. 验证用户数据
if (!user.name || !user.email) {
console.log('用户信息不完整');
return;
}
// 2. 格式化名字
user.name = user.name.trim().toUpperCase();
// 3. 发送邮件通知
sendEmail(user.email, '欢迎加入');
// 4. 保存到数据库
saveToDatabase(user);
// 5. 返回成功信息
return { success: true, message: '用户创建成功' };
}
这个函数有 5 个职责，违反了“单一职责原则”。
拆分为小函数
我们把它拆成几个小函数：
// ✅ 推荐：每个函数只做一件事
function validateUser(user) {
if (!user.name || !user.email) {
console.log('用户信息不完整');
return false;
}
return true;
}
function formatUserName(user) {
user.name = user.name.trim().toUpperCase();
}
function sendWelcomeEmail(email) {
sendEmail(email, '欢迎加入');
}
function saveUserToDatabase(user) {
saveToDatabase(user);
}
function createUser(user) {
if (!validateUser(user)) return;
formatUserName(user);
sendWelcomeEmail(user.email);
saveUserToDatabase(user);
return { success: true, message: '用户创建成功' };
}
现在，每个函数都清晰、独立，也更容易测试和复用。
注释：写给未来自己的信
注释不是“写给别人的”，而是“写给未来的自己”。当你三个月后回来看这段代码，只有注释能帮你快速理解“当初为什么这么写”。
何时写注释？
- 当逻辑复杂，一眼看不懂时
- 当使用了“黑科技”或特殊技巧时
- 当有性能优化或兼容性处理时
注释要简洁，不重复代码
不要写“变量名 + 注释”的废话：
// ❌ 不推荐
const count = 0; // 初始化计数器为 0
// ✅ 推荐
const count = 0; // 用于记录用户点击次数，防止重复提交
更好的注释解释了“为什么”，而不是“是什么”。
代码结构：模块化与文件组织
随着项目变大，一个文件里塞几千行代码是灾难。模块化是解决这个问题的核心。
使用 ES Modules（ESM）
现代 JavaScript 推荐使用 import 和 export 来组织代码：
// mathUtils.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
// main.js
import { add, multiply } from './mathUtils.js';
console.log(add(2, 3)); // 5
console.log(multiply(4, 5)); // 20
这种方式让代码可复用、可测试、可维护。
文件命名规范
- 模块文件名用小写，单词间用短横线连接：
user-service.js - 组件文件名用大驼峰：
UserProfile.jsx - 配置文件用
config.js或.env形式
工具链支持：让规范“自动执行”
手动检查代码规范太累，也容易出错。用工具自动帮你做这件事，才是高效之道。
使用 ESLint
ESLint 是 JavaScript 代码规范的“守门员”。它能自动检测缩进、命名、未声明变量等问题。
安装与配置：
npm install eslint --save-dev
npx eslint --init
按提示选择规范（如 Airbnb、Standard），它会生成 .eslintrc.json 文件。
使用 Prettier 格式化代码
Prettier 专注“格式化”，它能统一缩进、引号、换行等样式。
安装：
npm install prettier --save-dev
在 package.json 中添加脚本：
{
"scripts": {
"format": "prettier --write ."
}
}
运行 npm run format，代码自动变得整齐。
总结：规范不是束缚，而是自由的起点
JavaScript 代码规范，不是为了限制你，而是为了让你更自由地创造。当你不再为“这段代码别人看不懂”而焦虑，当你能快速理解同事写的代码，当你能自信地维护一个大型项目——那一刻，你就真正掌握了编程的“语言”。
记住：规范不是写给别人的，而是写给未来的自己。它让你的代码，像一本清晰的书，随时可以打开阅读。
从今天起，写下第一行“规范”的代码吧。