目录
前端代码规范
前端开发代码规范是确保代码质量和可维护性的重要工具。有以下一些好处：
- 促进团队合作
- 减少 bug 处理
- 降低维护成本
- 有助于代码审查
- 有助于程序员自身的成长
一、基本规范
命名规范
使用有意义的变量和函数名称，避免使用缩写或简写。使用驼峰命名法来命名变量和函数。缩进和空格：使用 4 个空格进行缩进，不要使用制表符。在逗号、运算符和分号之后使用空格，但不要在函数调用和函数声明之间添加空格。
文件名应简洁明了，能够准确反映文件的内容或功能。文件名应具有可读性，避免使用特殊字符或空格，避免过于冗长或缩写。
缩进规范
使用 4 个空格作为缩进单位，避免使用制表符。块级元素应进行适当的缩进，以清晰地表示层级关系。对于复杂的条件语句或循环，应适当增加缩进层级，以提高代码可读性。避免不必要的缩进，以减少代码行数和阅读难度。
注释规范
对于复杂的代码逻辑或方法，应添加注释进行说明。注释应简洁明了，能够准确解释代码的作用和意图。注释应与代码保持同步，避免注释与实际代码不符的情况。对于需要特别注意的代码段，可以添加警告或注意事项标注。
代码风格规范
使用简洁的代码风格，避免过于复杂的表达式或嵌套结构。对于相同作用的代码段，应保持一致的格式和排版。在需要的情况下，可以添加空行来分隔不同的代码段，提高可读性。避免使用全局变量，尽量使用局部变量或参数传递数据。
HTML 标签
使用小写标签名，关闭所有标签，避免使用自闭合标签。使用语义化标签来标记内容，例如使用 <header>、<footer> 和 <article> 等标签。
CSS 样式
避免使用行内样式，将样式写入单独的 CSS 文件中。避免使用 !important 规则，使用简写属性时要注意兼容性问题。
JavaScript 代码
使用严格模式，避免使用全局变量，使用函数来封装代码，避免在循环中声明变量。使用 ES6+ 的新特性，例如箭头函数、模板字符串和解构赋值等。
响应式设计
考虑不同设备和屏幕尺寸，使用媒体查询（Media Query）和响应式设计来适应不同的屏幕尺寸和设备类型，根据设备特性应用不同的样式表或样式规则。避免使用过于复杂的 CSS 选择器，以减少样式冲突和性能开销。对于响应式设计中的不同断点，应进行明确的标记和说明。
性能优化
优化图片大小和质量，以减少页面加载时间和带宽消耗。避免使用过多的 HTTP 请求，使用 CDN（内容分发网络）加速静态资源的加载速度。优化 JavaScript 代码，避免阻塞页面渲染和不必要的计算，以减少加载时间和提高性能。对于动态生成的内容，应使用数据缓存和延迟加载等技术，以减少页面加载时间和带宽消耗。
安全性
避免跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。对用户输入进行验证和过滤，避免直接将用户输入写入 HTML 或 JavaScript 代码中。
可维护性
遵循单一职责原则和开闭原则，将代码分解为小的、可维护的模块和函数。编写可读性高的代码，为变量、函数和文件添加有意义的名称。
二、文件、组件、组件结构命名、代码上传仓库规范
文件规范
文件名称应统一格式，使用驼峰命名法，开头的单词就是所属模块名字（例如：workbenchIndex、workbenchList、workbenchEdit）
组件规范
- 组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况，这样增加可读性。
- 组件应该都放到 components 文件夹下，单个页面独立一个文件夹，用来放相对应的 VUE 文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。
- 组件结构遵循从上往下 template，script，style 的结构。
Template 规范
- 尽量使用以.vue 结束的单文件组件，方便管理，结构清晰。
- 标签语义化，避免清一色的 div 元素
- 多特性，分行写，提高可读性。即一个标签内有多个属性，属性分行写。
- 自定义标签：使用自闭标签的写法。例如：，如果自定义标签中间需要传入 slot，则写开始标签和结束标签，结束标签必须加 /。
JS 细节规范
- 在 Script 标签中，应该遵守 JS 的规范和 ES6 规范。
- 创建公共的 JS，封装公用的方法和工具类。
- 使用 ES6 风格编码源码，定义变量使用 let，定义常量使用 const，使用 export，import 模块化。
- 需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。
- 若循环中需使用函数，请将函数定义在循环外部而非内部，这样可以避免函数的反复创建。
- Props 定义：提供默认值，使用 Type 属性校验类型，使用 Props 之前先检查 Prop 是否存在。
- JS 中统一使用反引号（``）或是单引号(‘’)， 不使用双引号(“”)。
- v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一，key 一般使用 index 或者 item.id。
- 避免 v-if 和 v-for 同时用在一个元素上（性能问题），以下为两种解决方案：
- （1）将数据替换为一个计算属性，让其返回过滤后的列表。
- （2）将 v-if 移动至容器元素上 (比如 ul、ol，或增加一层 template)。
- 无特殊情况不允许使用原生 API 操作 DOM，谨慎使用 this.$refs 直接操作 DOM。
- 函数中统一使用_this=this 来解决全局指向问题。
CSS 细节规范
- class 命名尽量使用英语，不要使用汉拼，并且有意义，非常有名的单词可以试用缩写。
- 规则命名中，一般采用小写加中划线的方式，避免使用大写字母或 _ 例如（header-list）。
- 不允许通过 1、2、3 等序号开头进行命名。
- 避免 class 与 id 重名。
- 省略值为 0 时的单位，如 margin: 0px 应简写成 margin:0;。
- 如果 CSS 可以做到，就不要使用 JS，比如鼠标划过和一些简单地动画效果。
- 创建一个公共的 CSS 文件，存放公共的样式，不需要每个页面单独复制一份。
- 使用 scoped 关键字，约束样式生效的范围。
- 避免使用标签选择器（效率低、损耗性能）。
- 文字超出表格类容器时需要进行 ‘…’ 省略。
图片规范
- 图片文件夹（\public\resource\img）|（\src\assets\images）方便后期维护和处理，图片文件命名尽量跟模块意义的相同，尽量使用小写单词命名。
- 图片格式常用 png，jpg，gif，webp。
- 命名全部用小写字母，数字及中划线组合，其中不包含汉字、空格和特殊字符；尽量用易懂的词汇，便于团队其他成员理解；命名分头尾两部分，用中划线或下划线隔开，（例如：ad-left01.png、btn-submit.png）。
- 在保证视觉效果的情况下选最小的图片格式与图片质量，减少加载时间。
- 图片显示 无特殊要求时，按原图宽高比显示，尽量不要变形。
API 管理规范
- API 接口地址统一管理，接口较少时可以单独写一个接口文件 JS，页面中使用哪些引入哪些。
- 接口较多时，可对接口按模块进行分类，一个模块对应一个接口文件。
- 开发环境可使用 MOCK 插件 模拟数据。生成环境需关闭。
弹框，提示信息规范
弹框：
- 普通新增和编辑弹框，上传文件弹框 宽度设置为 50%。
- 弹框内容较多时 宽度设置为 70%。
- 高度都为自适应，由弹框内容撑开。
- 小屏时，宽度应设置为 100%。
确认弹框：
- 使用 AntDesign-UI 自带的 Modal 对话框。
提示信息：
- 使用 AntDesign-UI 提供的 Message 全局提示。
其他
- 涉及数据处理功能按钮，增加防频繁点击处理（防抖节流）。
- 页面按钮颜色，样式，功能尽量统一。
- 不同页面相同功能的提示文字尽量统一。
- 小图标尽量使用 UI 框架自带的 icon 图标或（https://icones.js.org/ 中的图标）。
前端规范格式化插件
- HTML / JS / TS : Prettier / Eslint
- CSS / LESS: StyleLint
- VUE: Volar
代码上传（多人协作）规范
- 文件保存前每个文件必须使用 Prettier / Eslint 格式化，VS code 快捷键为 Alt + Shift + F。
- 文件暂存前，需仔细检查对比上一版本，确定有误疏漏。
- 多人开发同一项目时，需创建不同的分支，禁止直接提交主分支。
- 切忌一次大量提交代码；一个新功能拉取单独的分支开发，开发完后再合并到主分支上。
- 提交代码前须先拉代码。
- 一般情况下不得强制提交，需要解决提交冲突。
- 禁止无意义说明提交。
- 通常需要每天下班前推送本地仓库到远程仓库中。
- 每次提交代码到 Git 仓库时，都需要写 commit message。通常情况下，commit message 应该清晰明了，说明本次提交的目的和具体操作等。
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
