要想前端代码写的好，以下四点少不了

字数 801，阅读大约需 5 分钟

这段时间在做项目组Code Review的时候，我发现在询问代码提交者这些问题时：这一段是啥逻辑，这个函数是干啥的？往往对方都是懵圈的。
那么今天说一个实在的话题——怎么把代码写得好懂一点。
别担心。写出清楚、好维护的代码，是有办法的。我总结四个方法，新手和老手都能用。

起个好名字，代码就容易懂

起名字不容易。给变量、函数起名，常常让人头疼。
不要再用 a、tmp、data 这种名字。它们没有意义，时间一长自己也忘了是什么。

   function handleClick() { 
  // 一堆搞不清干嘛的操作
}
//变量名带数字更加的让人受不了
const div1 = document.getElementById('div1');

这叫写时一时爽，维护火XX
需要这么做：
1.名字要说清用途，比如userAge而不是num
2.函数名要清楚，比如：
validateUserLogin()比doStuff()好
3.在Vue和React项目中，组件名用大驼峰，比如：
<UserAvatar />，而不是<divBox />
4.CSS类名用BEM规范，比如：
.card__header--active，别再用.div1.box.text-red这种玄学命名
好名字就像指示牌，让人一看就明白，不用老去看注释。

别写太长的代码，要拆开

一个Vue React组件写2000行？CSS文件上千行找不到一个注释？这都是“前端开发面条代码”的经典症状。
应该这么做：

• • 一个组件只负责一个功能，比如把 <UserCard/>拆成<Avatar /> <UserName /> <FollowButton />
• • 一个函数只做一件事。比如处理注册，拆成：validate()、createUser()、sendEmail()

记住：代码要分开放，不要都混在一起.

会用设计模式，代码更好改

如果工作中觉得加新功能很难，代码不好改，可能需要学点设计模式。
设计模式是别人总结的好办法。比如：

• • 多个组件要用同一份数据：用观察者模式（比如Vuex和Pinia）
• • 要创建复杂对象：工厂模式（比如根据类型生成不同UI组件）
• • 全局只需要一个实例：单例模式（比如浏览器环境检测器）

当然不要什么都用设计模式。简单代码就不要硬套。

注释要写就写点有用的

有人说“好代码不用注释”，这话不全对。
逻辑复杂的地方、算法难的地方、参数多的函数，还是要写注释。但不要写这种：

   var x;
x = 5 //把 x 设为 5
//?????????????????? 这谁都看得懂,不用写 

需要这样：

• • 注释解释“为什么这么做”，而不是“做什么”
• • 函数注释写明参数、返回值、会报什么错。
• • 项目文档要有，不然新人看不懂。
• • 标记待优化和待开发内容（// TODO: 下次重构记得改这里）

在注重团队合作的今天，其实写代码就像写文章，要让别人看懂。
起好名字、拆开功能、合理用模式、写好注释——坚持这四点，你的代码会越来越清晰。
好代码的背后，是专业和细心。