前端开发规范

前端开发规范
注意： Windows 系统不区分大小写 ， linux 区分 ，因此 全部 用小写
前端开发规范
1 文件夹、文件名称，方法名称 必须小写。长名称：中间以下划线连接。 例如 ：match_list_main.js ，handle_click_save_all
CSS-Class 命名：中划线 user-id
方法函数命名：小驼峰 userId
组件导出命名：大驼峰 User-id
2 前端所有注释基本采用korofileheader 插件注释模式，但是配置去掉最后更新时间和更新人
3 所有的 css、js、vue 文件都必须有文件功能说明，或者必要的逻辑说明，核心方法必须有方法说明
4 原则上： data内字段必需后面跟说明，每个方法必须都有注释
5 单个方法方法体过长的 必须尽量拆分
6 单个文件过大的必须尽量拆分（ 主要是 js 代码部分）

一.开发与命名规范
约定

文件必须添加头部解释说明,用以概括当前文件的主要作用
相同内容的 UI 或者内容被使用 2 次以上,务必封装成组件
临时数据如果过长,必须新建一个 js 用来放置临时数据,如当前页的 data.js
提交代码前务必执行 eslint 校验并自行删除 console 输出,保持代码的整洁度
项目采用懒加载形式,请自行补充 element,eachrt 等依赖的导出值
项目布局尽可能以 flex 布局为主要写法,少用或尽量不用 absolute 等定位方式
控件显示隐藏 以 show 开头 如:showOpenDialog

条件判断 以 is 开头 如:是否是管理员 isAdmin | 是否开启 isOpen

事件 以 handle 开头, 般的处理事件 如 @change @input 等事件, @click 除外

表单 以 form 结尾, 如 tagForm

数组 以 list 开头, 如 listTag

对象集合 以 obj 开头,如 objTag

v-for 循环, 禁止命名为 item 和 index, 应命名为当前循环内容的简称,如: tagItem,tagIndex

单独字段,尽可能以 curr 开头, 如:当前搜索 currSearch | 当前活动条目 currActive

方法函数内的临时变量,尽量以 temp 开头,如:tempName | tempListValue

组件引用时,用绝对路径,如:@/components/xxx.vue ,方便其它页面引入

路由 Router

命名 禁止使用大写,统一使用小写,如遇多层含义,以下划线分隔,如: applist | app_list
标题头 必须添加标题头 title
页面引入 必须使用懒加载形式 component()=>import(‘xxx.vue’)
Echart 图表使用时,必须先写成组件然后再引入到具体的页面中,便于多次利用及代码整洁

这是一篇以这些年在开发过程中逐渐总结形成的前端命名规则
个人觉得，代码的命名应该是 简单的、统一的
简单：命名应该简单、明了
统一：命名应该是通用的

一、对js
1、对相关联的变量，使用对象来将它们包含在一起
目的是不让变量过于分散，便于管理变量，使得相关的变量一目了然
对象名称也相当于一个小型的命名空间，可以不用担心命名冲突

2、对方法的命名，根据事件的类型来命名
对一般的处理事件，使用handle开头，命名成 handlexxx
对emit的监听事件，使用on开头，命名成 onxxx
//处理事件
function handleDeleteData(payload: string) {
}

3、对常量命名，使用大驼峰命名方式
用来与其他普通变量进行区分
表示该变量不能被赋值
const Router = useRouter()

4、对特定变量，根据其作用使用特定的命名

对绑定的ref变量，使用Ref开头，命名成 RefXxx
对引入的api接口，使用Api开头，命名成 ApiXxx
这样看见开头名称就可以大概的明白这个变量的作用

//用于dom绑定的ref变量命名
const RefCompModal: any = ref()

//对api接口的命名
//引入
import ApiDataGrade from '@/service/api/api-data-grade'
//调用
const res = await ApiDataGrade.getDataList()

对自定义的组件
以大驼峰方式命名，表示常量，也符合vue组件的命名
对全局通用组件，以 comp 开头（component的缩写），命名成 CompXxx，放在components文件夹下
对普通自定义组件，以大驼峰方式命名，名称尽量描述组件的作用，放在与对应的功能页面文件夹下

二、对html与css
对html的class或id命名，建议最少使用两个单词组合而成，尽量描述清楚对应dom的作用
以小写 + ‘ - ’的方式命名
自定义组件：以大驼峰方式引入，在html中使用时，改成小写加‘-’
使用class来对dom元素样式的控制，而不是通过style
尽量对每个标签添加class，方便样式控制
对引用的图片资源，使用相对路径引入
<!-- 对引用的图片资源，使用相对路径 -->
.icon-1 {
background-image: url('~@/assets/img/icon-1.png');
}

三、其他的一些规范
1、尽量使用变量来控制页面内容的展示，而不是将内容写死在html上
2、尽量不要在html中进行逻辑运算，可以先在js中运算好，在html展示运算后的结果即可
3、页面应该由各功能模块组件拼合而成，不应该将代码堆积在一个文件
4、单个.vue文件的代码量尽量不超过500行，如果超过，则可以继续拆分出子组件

标签：变量,规范,组件,html,开头,使用,命名,前端开发
来源： https://www.cnblogs.com/k1990603/p/16294772.html