SSF0SSF0
首页
前端
  • Node
  • Go
  • C#
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
Timeline
Github
标签
分类
首页
前端
  • Node
  • Go
  • C#
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
Timeline
Github
标签
分类
  • HTML

    • html1
    • html2
  • CSS

    • Flex 布局常见问题与解决方案
  • JavaScript

    • 数据类型及引用问题
    • 处理 Blob 类型文件下载问题总结
    • localStorage 与 sessionStorage 区别
    • JavaScript 中的 script 标签问题详解
    • JavaScript 中的`this`指向问题详解
    • SessionStorage踩坑记录:它真的能"只设置一次"吗?
    • 动态加载 JS 脚本方法对比
    • 浏览器页面关闭场景下的数据上报
  • es6

    • Promise
    • es6 模块导出方式全解析
  • Vue2

    • created VS mounted 发起异步请求
    • vue2-2
  • Vue3

    • Vite + Vue3 修改 element-plus 源码
    • Vue v-if 与 v-show
    • Vue3 ref 获取组件
    • Vue3 路由传参
    • 父子组件与组件里 Hooks 加载顺序
    • 第三方组件传入参数TS提示
    • Vue3 Props 在 Hooks 中的响应性处理
    • Vue Router 的两种历史模式及部署配置详解
    • 在Vue 3项目中顺利集成Tailwind CSS的完整指南
    • Vue 3 深度选择器:deep()完全指南
  • Electron

    • 快速构建 electron + vue3 项目
  • TS

    • TS 泛型
    • 记录模板使用断言的问题
    • type 与 interface
  • WebPack

    • Webpack 介绍
  • Vite

    • Vite CLI 常见命令
    • vite 与 webpack 比较
  • 项目工程

    • 前端代码风格
    • Vue3 项目规范
    • npm 镜像问题
    • 包管理工具
    • 使用 engines 限制开发环境依赖
    • 打包与shell交互指定模式
    • 使用 pnpm 构建 Monorepo 实战指南
    • pnpm 修改依赖源码打包报错
  • 记录一下小程序
  • 控制浏览器正确保存网站账号密码的技巧

1. 空行使用

  • 在逻辑块之间应该保留一个空行,提高代码可读性

  • if 语句的提前返回(Early Return)模式中,return 语句的上下应保留空行

  • 在不同功能的代码块之间添加空行

  • 在函数定义之间添加空行

2. 命名规范

  • 变量名使用小驼峰命名法(camelCase)

  • 类名使用大驼峰命名法(PascalCase)

  • 常量使用全大写,下划线分隔(UPPER_SNAKE_CASE)

  • 私有属性和方法以下划线开头(_privateMethod)

3. 缩进和空格

  • 使用 2 个或 4 个空格作为缩进(团队内保持统一)

  • 运算符前后添加空格

  • 逗号后面要加空格

  • 对象的键值对冒号后要加空格

4. 注释规范

  • 使用 JSDoc 风格的文档注释来描述函数和类

  • 复杂逻辑需要添加行内注释说明

  • 临时代码或待办事项使用 // TODO: 标记

  • 避免无意义的注释

5. 代码组织

  • 相关的代码应该组织在一起

  • import 语句按照类型分组并排序

  • 类的方法按照访问修饰符和功能分组

  • 保持单个文件的代码量适中,过长时考虑拆分

6. 最佳实践

  • 避免过深的嵌套(最多 3 层)

  • 优先使用早期返回(Early Return)模式

  • 避免过长的函数(建议不超过 20 行)

  • 遵循单一职责原则

7. 错误处理

  • 使用 try-catch 处理可预见的错误

  • 自定义错误类要继承基础 Error 类

  • 错误信息要清晰具体,便于定位问题

  • 避免在循环中使用 try-catch

  • 不要忽略捕获的错误(避免空 catch 块)

8. 条件语句

  • 优先使用三元运算符处理简单条件

  • 多个条件时使用 switch 代替多个 if-else

  • 复杂条件应该提取为命名良好的变量或函数

  • 避免否定条件判断(if (!isNotValid) => if (isValid))

9. 函数设计

  • 函数参数最好不超过 3 个

  • 使用对象参数来处理多参数情况

  • 函数要职责单一,避免副作用

  • 优先使用纯函数

  • 提供有意义的默认参数值

10. 模块化

  • 一个文件只导出一个主要功能

  • 相关的功能放在同一目录下

  • 使用 index.js 统一导出模块接口

  • 避免循环依赖

  • 合理使用模块别名

11. 性能考虑

  • 避免在循环中创建函数
  • 及时清理不再使用的事件监听器
  • 使用防抖(debounce)和节流(throttle)
  • 避免频繁的 DOM 操作
  • 合理使用缓存机制

12. 测试相关

  • 测试文件与源文件结构保持一致
  • 测试用例命名要清晰表达测试目的
  • 每个测试用例只测试一个功能点
  • 使用 setup 和 teardown 管理测试环境
  • 避免测试实现细节

13. Git 提交规范

  • 使用规范的 commit message 格式
    • feat: 新功能
    • fix: 修复 bug
    • docs: 文档更新
    • style: 代码格式调整
    • refactor: 重构
    • test: 测试相关
    • chore: 构建过程或辅助工具的变动
  • 每个提交只做一件事
  • 提交前进行代码检查

14. 项目文档

  • 保持 README.md 文件的及时更新
  • 关键算法和复杂业务逻辑需要文档说明
  • 项目配置和环境搭建步骤要详细记录
  • API 文档要及时更新
  • 记录重要的设计决策和架构变更

15. 安全性考虑

  • 避免在代码中硬编码敏感信息
  • 使用参数化查询防止 SQL 注入
  • 对用户输入进行严格验证
  • 避免暴露内部错误信息给用户
  • 遵循最小权限原则

16. 代码复用

  • 遵循 DRY(Don't Repeat Yourself)原则
  • 提取公共组件和工具函数到独立模块
  • 使用继承和组合来复用代码
  • 建立统一的工具库
  • 定期重构重复代码

17. 变量声明和使用

  • 优先使用 const,其次是 let,避免 var
  • 变量声明尽量靠近使用位置
  • 避免使用全局变量
  • 使用有意义的中间变量提高代码可读性
  • 及时释放不再使用的引用

18. 异步编程规范

  • 优先使用 async/await 替代 Promise.then()
  • Promise 链中要做好错误处理
  • 避免回调地狱
  • 并发请求使用 Promise.all()
  • 注意内存泄漏问题

19. 类和接口设计

  • 遵循 SOLID 原则
  • 类的大小要适中,避免过于臃肿
  • 优先使用组合而非继承
  • 接口要简单,职责单一
  • 明确类的公共 API 和私有实现

20. 代码评审准则

  • 检查代码是否符合项目规范
  • 关注业务逻辑的正确性
  • 评审性能和安全隐患
  • 检查测试覆盖率
  • 提供建设性的改进建议

21. 日志规范

  • 统一日志格式和级别
    • ERROR:系统错误
    • WARN:警告信息
    • INFO:重要业务信息
    • DEBUG:调试信息
  • 包含必要的上下文信息
  • 敏感信息脱敏处理
  • 适当的日志轮转策略

22. 前端特定规范

  • 组件设计原则
    • 组件职责单一
    • 属性验证完整
    • 合理使用状态管理
  • CSS 命名规范(如 BEM)
  • 响应式设计规范
  • 资源加载优化
  • 跨浏览器兼容性处理

23. 后端特定规范

  • API 设计规范
    • RESTful 接口设计
    • 版本控制策略
    • 统一的响应格式
  • 数据库操作规范
    • 索引设计原则
    • SQL 优化指南
    • 连接池管理
  • 缓存使用规范
  • 服务间通信规范

24. 项目规范

  • 目录结构规范 src ├── api # API 接口定义 ├── assets # 静态资源 ├── components # 公共组件 ├── config # 配置文件 ├── hooks # 自定义 hooks ├── layouts # 布局组件 ├── pages # 页面组件 ├── services # 服务层 ├── store # 状态管理 ├── styles # 样式文件 ├── types # 类型定义 └── utils # 工具函数

  • 环境配置规范

    • 开发环境
    • 测试环境
    • 生产环境
  • 构建发布规范

  • 版本管理规范

25. 代码优化准则

  • 避免过早优化
  • 先保证正确性,再考虑性能
  • 使用性能分析工具定位问题
  • 建立性能基准和监控
  • 优化应该可度量和可验证

26. 代码重构指南

  • 重构的时机
    • 添加新功能前
    • 修复 bug 时
    • 代码审查后
    • 发现代码异味时
  • 重构的步骤
    • 确保有完整的测试覆盖
    • 小步快跑,逐步改进
    • 及时提交变更
    • 保持功能不变
  • 常见重构手法
    • 提取方法
    • 移动方法
    • 重命名
    • 替换算法

27. 调试规范

  • 使用断点调试而非 console.log
  • 善用调试工具的高级功能
    • 条件断点
    • 监视表达式
    • 调用栈分析
  • 线上调试
    • 日志级别控制
    • 性能监控
    • 错误追踪
  • 调试信息管理
    • 开发环境保留
    • 生产环境移除
    • 敏感信息过滤

28. 技术债务管理

  • 识别技术债务
    • 代码复杂度过高
    • 测试覆盖率不足
    • 过时的依赖
    • 文档缺失
  • 技术债务评估
    • 影响范围
    • 修复成本
    • 潜在风险
  • 还债计划
    • 优先级排序
    • 分步实施
    • 进度追踪

29. 代码发布流程

  • 发布前检查清单
    • 代码审查完成
    • 测试通过
    • 文档更新
    • 依赖检查
  • 版本管理
    • 语义化版本号
    • 更新日志维护
    • 版本标签管理
  • 发布策略
    • 灰度发布
    • A/B 测试
    • 回滚机制

30. 团队协作规范

  • 知识共享
    • 技术文档维护
    • 代码评审文化
    • 团队分享会
  • 工作流程
    • 任务拆分
    • 进度同步
    • 问题追踪
  • 沟通规范
    • 及时反馈
    • 清晰表达
    • 有效讨论

31. 持续集成/持续部署(CI/CD)

  • 自动化构建
    • 代码检查
    • 单元测试
    • 构建打包
  • 自动化测试
    • 集成测试
    • 端到端测试
    • 性能测试
  • 自动化部署
    • 环境配置
    • 部署脚本
    • 监控告警

32. 代码可测试性

  • 设计原则
    • 依赖注入
    • 接口抽象
    • 单一职责
  • 测试策略
    • 单元测试
    • 集成测试
    • 端到端测试
  • 测试工具
    • 测试框架
    • Mock 工具
    • 覆盖率工具

33. 微服务开发规范

  • 服务设计原则
    • 服务边界清晰
    • 松耦合高内聚
    • 单一职责
    • 数据自治
  • 服务通信
    • API 网关策略
    • 服务发现机制
    • 负载均衡
    • 熔断降级
  • 数据一致性
    • SAGA 模式
    • 最终一致性
    • 分布式事务
  • 监控告警
    • 服务健康检查
    • 性能指标监控
    • 链路追踪

34. 安全开发生命周期(SDL)

  • 设计阶段
    • 威胁建模
    • 安全架构评审
    • 风险评估
  • 开发阶段
    • 安全编码规范
    • 依赖安全检查
    • 代码安全审计
  • 测试阶段
    • 渗透测试
    • 安全扫描
    • 漏洞验证
  • 运维阶段
    • 安全配置
    • 漏洞修复
    • 应急响应

35. 性能优化指南

  • 前端优化
    • 资源加载优化
      • 懒加载
      • 预加载
      • 资源压缩
    • 渲染优化
      • 虚拟列表
      • 防抖节流
      • 缓存策略
  • 后端优化
    • 数据库优化
      • 索引设计
      • SQL 优化
      • 分库分表
    • 缓存优化
      • 多级缓存
      • 缓存策略
      • 缓存一致性
  • 网络优化
    • CDN 加速
    • HTTP 优化
    • 协议优化

36. 代码迁移规范

  • 迁移策略
    • 渐进式迁移
    • 功能完整性验证
    • 性能对比
  • 迁移步骤
    • 依赖分析
    • 接口兼容
    • 数据迁移
    • 功能验证
  • 风险控制
    • 回滚方案
    • 监控告警
    • 分批发布

37. 开发环境规范

  • 开发工具
    • IDE 配置统一
    • 代码格式化插件
    • 代码检查工具
  • 环境管理
    • 容器化开发环境
    • 依赖版本控制
    • 环境变量管理
  • 调试工具
    • 断点调试
    • 性能分析
    • 内存分析

38. API 设计最佳实践

  • RESTful API 设计
    • 资源命名
    • HTTP 方法使用
    • 状态码规范
  • 版本控制
    • URI 版本
    • Header 版本
    • 参数版本
  • 错误处理
    • 错误码规范
    • 错误信息格式
    • 异常处理机制
  • 接口文档
    • 接口说明
    • 参数描述
    • 示例代码

39. 移动端开发规范

  • 界面设计
    • 适配不同屏幕尺寸
    • 遵循人机交互规范
    • 考虑网络状态提示
    • 合理使用手势操作
  • 性能优化
    • 启动速度优化
    • 内存管理
    • 电量优化
    • 离线功能支持
  • 安全考虑
    • 数据本地加密
    • 安全传输
    • 权限管理
    • 防止反编译

40. 数据库开发规范

  • 数据库设计
    • 遵循三范式
    • 合理使用反范式
    • 字段命名规范
    • 索引设计原则
  • SQL 编写规范
    • 避免全表扫描
    • 使用参数化查询
    • 合理使用存储过程
    • 优化查询性能
  • 数据维护
    • 备份策略
    • 数据清理
    • 版本管理
    • 变更审核

41. 云原生应用规范

  • 容器化
    • Dockerfile 最佳实践
    • 镜像构建优化
    • 多阶段构建
    • 安全基线
  • Kubernetes 部署
    • 资源配置
    • 健康检查
    • 弹性伸缩
    • 服务发现
  • 可观测性
    • 日志收集
    • 监控指标
    • 链路追踪
    • 告警策略

42. 技术文档规范

  • 架构文档
    • 系统概述
    • 技术选型
    • 架构决策
    • 部署架构
  • API 文档
    • 接口描述
    • 参数说明
    • 返回值
    • 错误码
  • 运维文档
    • 部署步骤
    • 配置说明
    • 故障处理
    • 运维脚本
  • 用户手册
    • 功能说明
    • 使用指南
    • 常见问题
    • 故障排除

43. 代码审查清单

  • 功能性
    • 业务逻辑正确性
    • 边界条件处理
    • 错误处理完整性
    • 兼容性考虑
  • 可维护性
    • 代码结构清晰
    • 命名规范
    • 注释完整
    • 重复代码处理
  • 性能相关
    • 算法复杂度
    • 资源使用
    • 并发处理
    • 缓存策略
  • 安全性
    • 输入验证
    • 权限控制
    • 敏感数据处理
    • 安全漏洞检查

44. 发布流程规范

  • 发布准备
    • 版本号管理
    • 更新日志
    • 功能测试
    • 性能测试
  • 发布策略
    • 蓝绿部署
    • 金丝雀发布
    • 灰度发布
    • 回滚机制
  • 发布后确认
    • 服务监控
    • 日志分析
    • 性能监控
    • 用户反馈
最后更新时间:
贡献者: 何风顺
下一页
Vue3 项目规范