前端开发规范
<p>前端开发规范<br>注意： Windows 系统不区分大小写 ， linux 区分 ，因此 全部 用小写<br>前端开发规范<br>1 文件夹、文件名称，方法名称 必须小写。长名称：中间以下划线连接。 例如 ：match_list_main.js ，handle_click_save_all<br>CSS-Class 命名：中划线 user-id<br>方法函数命名：小驼峰 userId<br>组件导出命名：大驼峰 User-id<br>2 前端所有注释基本采用korofileheader 插件注释模式，但是配置去掉最后更新时间和更新人<br>3 所有的 css、js、vue 文件都必须有文件功能说明，或者必要的逻辑说明，核心方法必须有方法说明<br>4 原则上： data内字段必需后面跟说明，每个方法必须都有注释<br>5 单个方法方法体过长的 必须尽量拆分<br>6 单个文件过大的必须尽量拆分（ 主要是 js 代码部分）</p><p><br>一.开发与命名规范<br>约定</p>
<p>文件必须添加头部解释说明,用以概括当前文件的主要作用<br>相同内容的 UI 或者内容被使用 2 次以上,务必封装成组件<br>临时数据如果过长,必须新建一个 js 用来放置临时数据,如当前页的 data.js<br>提交代码前务必执行 eslint 校验并自行删除 console 输出,保持代码的整洁度<br>项目采用懒加载形式,请自行补充 element,eachrt 等依赖的导出值<br>项目布局尽可能以 flex 布局为主要写法,少用或尽量不用 absolute 等定位方式<br>控件显示隐藏 以 show 开头 如:showOpenDialog</p>
<p>条件判断 以 is 开头 如:是否是管理员 isAdmin | 是否开启 isOpen</p>
<p>事件 以 handle 开头, 般的处理事件 如 @change @input 等事件, @click 除外</p>
<p>表单 以 form 结尾, 如 tagForm</p>
<p>数组 以 list 开头, 如 listTag</p>
<p>对象集合 以 obj 开头,如 objTag</p>
<p>v-for 循环, 禁止命名为 item 和 index, 应命名为当前循环内容的简称,如: tagItem,tagIndex</p>
<p>单独字段,尽可能以 curr 开头, 如:当前搜索 currSearch | 当前活动条目 currActive</p>
<p>方法函数内的临时变量,尽量以 temp 开头,如:tempName | tempListValue</p>
<p>组件引用时,用绝对路径,如:@/components/xxx.vue ,方便其它页面引入</p>
<p>路由 Router</p>
<p>命名 禁止使用大写,统一使用小写,如遇多层含义,以下划线分隔,如: applist | app_list<br>标题头 必须添加标题头 title<br>页面引入 必须使用懒加载形式 component()=>import(‘xxx.vue’)<br>Echart 图表使用时,必须先写成组件然后再引入到具体的页面中,便于多次利用及代码整洁</p>
<p>这是一篇以这些年在开发过程中逐渐总结形成的前端命名规则<br>个人觉得，代码的命名应该是 简单的、统一的<br>简单：命名应该简单、明了<br>统一：命名应该是通用的</p>
<p>一、对js<br>1、对相关联的变量，使用对象来将它们包含在一起<br>目的是不让变量过于分散，便于管理变量，使得相关的变量一目了然<br>对象名称也相当于一个小型的命名空间，可以不用担心命名冲突</p>
<p>2、对方法的命名，根据事件的类型来命名<br>对一般的处理事件，使用handle开头，命名成 handlexxx<br>对emit的监听事件，使用on开头，命名成 onxxx<br>//处理事件<br> function handleDeleteData(payload: string) {<br> }</p>
<p>3、对常量命名，使用大驼峰命名方式<br>用来与其他普通变量进行区分<br>表示该变量不能被赋值<br>const Router = useRouter()</p>
<p><br>4、对特定变量，根据其作用使用特定的命名</p>
<p>对绑定的ref变量，使用Ref开头，命名成 RefXxx<br>对引入的api接口，使用Api开头，命名成 ApiXxx<br>这样看见开头名称就可以大概的明白这个变量的作用</p>
<p>//用于dom绑定的ref变量命名<br>const RefCompModal: any = ref()</p>
<p>//对api接口的命名<br>//引入<br>import ApiDataGrade from '@/service/api/api-data-grade'<br>//调用<br>const res = await ApiDataGrade.getDataList()</p>
<p><br>对自定义的组件<br>以大驼峰方式命名，表示常量，也符合vue组件的命名<br>对全局通用组件，以 comp 开头（component的缩写），命名成 CompXxx，放在components文件夹下<br>对普通自定义组件，以大驼峰方式命名，名称尽量描述组件的作用，放在与对应的功能页面文件夹下</p>
<p><br>二、对html与css<br>对html的class或id命名，建议最少使用两个单词组合而成，尽量描述清楚对应dom的作用<br>以小写 + ‘ - ’的方式命名<br>自定义组件：以大驼峰方式引入，在html中使用时，改成小写加‘-’<br>使用class来对dom元素样式的控制，而不是通过style<br>尽量对每个标签添加class，方便样式控制<br>对引用的图片资源，使用相对路径引入<br><!-- 对引用的图片资源，使用相对路径 --><br>.icon-1 {<br> background-image: url('~@/assets/img/icon-1.png');<br>}</p>
<p>三、其他的一些规范<br>1、尽量使用变量来控制页面内容的展示，而不是将内容写死在html上<br>2、尽量不要在html中进行逻辑运算，可以先在js中运算好，在html展示运算后的结果即可<br>3、页面应该由各功能模块组件拼合而成，不应该将代码堆积在一个文件<br>4、单个.vue文件的代码量尽量不超过500行，如果超过，则可以继续拆分出子组件</p><br><br>
来源：https://www.cnblogs.com/k1990603/p/16294772.html
頁:
[1]