当前位置：首页 > news >正文

干货！代码规范

news 2025/11/26 14:39:47

1. 代码结构与组织

这一类规范关注代码的整体结构，包括模块化、层次划分和代码的物理组织。

层次划分：在 MVC 或类似架构中，controller 层应避免包含业务逻辑，而是将逻辑放在 service 层。service 层应包含主逻辑，将独立的处理逻辑拆分到单独的 service 或 util 中。

2. 编码实践

这一类规范涉及编码时的具体实践，如何编写代码以提高效率和质量。

可参考书目：https://book-refactoring2.ifmicro.com/ 《重构改善既有代码的设计第二版》中文版）

函数封装：当逻辑重复或足够复杂时，应封装成函数。这有助于代码复用和降低复杂性。
解构使用：善用解构赋值来减少变量定义，使代码更简洁。
工厂模式：在适当的情况下使用工厂模式来创建对象，有助于代码的可维护性和扩展性。
- 不要在业务中使用 switch-case；使用map和函数匹配代替；原因可参考： https://juejin.cn/post/7070692078069481509
避免重复造轮子：在接手旧项目时，应避免创建重复的工具函数或业务处理函数。

3. 性能优化

这一类规范专注于提高代码的运行效率。

合理使用 Promise.all：只有在并行执行多个不相互依赖的异步操作时，才使用 Promise.all，以避免不必要的性能开销。
map/ foreach 使用之争： JavaScript中Map和ForEach的区别 | Fundebug博客 - 一行代码搞定BUG监控 - 网站错误监控|JS错误监控|资源加载错误|网络请求错误|小程序错误监控|Java异常监控|监控报警|Source Map|用户行为|可视化重现

4. 可读性与维护性

注释和文档：函数功能应有清晰的注释，接口命名应准确反映其功能。
日志记录：日志应包含足够的上下文信息，如请求参数和数据库 ID，以便于问题排查。
代码清晰性：避免编写难以理解的代码，保持代码有良好的段落感和细节处理。

避免长代码，举例如下：

ugly: 
list.push(...[arr.map(item=>****)])
valid: 
const list = [].map(item=> ****)
return [...list,]

5. 前端特定规范

这一类规范专门针对前端开发，涉及 UI 组件和响应式编程等方面。

使用新 API：尽量使用 UI 组件库提供的新 API。
响应式变量定义：在 Vue 的 setup 函数中，不要在嵌套的函数内部定义响应式变量，而应在 setup 函数的顶层定义。

ugly: 
setup(){const fun1 = ()=>{const a = ref(1) ❌const b = reactive({1})}
}
valid:
setup(){const a = ref(1)const b = reactive({1})const fun1 = ()=>{// do something}
}