技术文档（3）前端开发—vue项目—规范文档

前端开发—vue项目—规范文档

酒鼎

10597人浏览 · 2022-03-31 11:49:36

酒鼎 · 2022-03-31 11:49:36 发布

目录

1，通用规范
2，命名规范
3，HTML规范
4，Css规范
5，Js规范
6，Vue规范

1，通用规范

缩进统一即可，不要使用 Tab 或者 Tab、空格混搭。
良好的注释是非常重要的，不要让团队其它成员，来猜测一段不通用或不明显的代码。

建议添加注释的地方：
公共组件、函数使用说明,
接口说明，
vuex中，store 中的 state, mutation, action，
组件中data, 非常见单词要加注释。

调试信息 console.log()、debugger使用完及时删除。
代码规范

为了更好的可读性，请一行只声明一个变量。
一行代码的最大长度应该在团队层面上达成一致。通常是 80 或 120 个字符。

2，命名规范

2.1，项目命名

全部采用小写方式，以中线分割。

//正例
web-abs
//反例
helloword

2.2，目录命名

全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。
项目目录与其项目一级导航菜单统一，便于管理，二级导航放在一级导航文件夹下，以此类推。

复数命名法：文件夹可缩写，文件尽量不缩写，变量可缩写(但需备注全称)。
原因：一个项目，目录不会很多，文件会很多，变量会更多，变量的缩写可以备注，但文件的缩写无法备注，需要让人直观的了解到文件的作用，

//正例
src/views/ec/common/modification-invoice-info.vue

//反例
src/views/ec/common/mod-inv-info.vue

2.3，文件命名

JS、CSS、SCSS、HTML、PNG命名，全部采用小写方式，以中划线分隔。

//正例
@/assets/img/logo-white.png，

//反例
@/assets/img/logoWhite.png

2.4，命名注意项

公共文件用common命名，例如：公共css：common.css；公共js：common.js。
一些浏览器会将含有某些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以下词汇， ad、ads、adv、banner、sponsor、gg、guangg、guanggao等。

3，HTML规范

属性值必须用双引号""。避免使用中文拼音，尽量简易并要求语义化。
减少<div>嵌套。过多嵌套（4,5层足够），会影响网页加载速度，不利于SEO（搜索引擎优化）。
在页面中尽量避免使用style属性，即style=“...”。应该尽量使用class或者id来定义新的样式，然后在对应的css文件里面修改。
重要图片必须加上alt属性。当图片不能正常显示时，则显示alt中的文字。给重要的元素和截断的元素加上title，目的：有利于SEO，搜索引擎的爬虫。
一个标签内有多个属性，属性分行写，目的：提高可读性。

<!-- 正例 -->
<el-table
          :data="assetList.list"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
>
</el-table>

HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签。

<!--正例-->
<header></header>

<!--反例-->
<div> 
	<div>
		<div>
		<div></div>
		</div>
	</div>
</div>

4，Css规范

协作开发及分工。

T根据各个模块，同时根据页面相似程序，事先写好大体框架文件, 分配给前端人员，然后由前端人员实现内部结构&表现&行为。
共用css文件（common.css）由T书写，协作开发过程中, 每个页面请务必都要引入，此文件包含头部底部样式，此文件不可随意修改。

规避class与id命名。

class命名采用小写字母，以中划线分割；
Id命名采用驼峰命名；
Scss中的函数、变量等使用驼峰命名。

<!-- 正例 -->
<div id="mainText" class="main-text">主体内容</div>

<!-- 反例 -->
.fs-14 {
    font-size: 14px;
}
.red {
    color: red;
}

书写代码前，考虑并提高样式重复使用率，避免重复开发。
CSS样式属性或者JavaScript代码后加“;”，目的：方便压缩工具“断句”。

 this.pageInfo.pageNum = 1;
 this.pageInfo.pageSize = 10;
 this.pageInfo.total = 0;

尽量避免使用子选择器，如果层次关系过长，逻辑不清晰，非常不利于维护。

.kso-nav ul li a {
	width:100px;
}

使用scoped关键字，约束样式生效的范围。
避免使用标签选择器（效率低、损耗性能），避免使用通配符*。
可以省略零（0）后面的单位。

/* 正例 */
.main {
    padding-bottom: 0;
    margin: 0;
}

/* 反例 */
.main {
    padding-bottom: 0px;
    margin: 0px;
}

5，Js规范

方法名、参数名、变量名、局部变量都统一使用小驼峰命名风格。

//正例
let lowerCamelCase = 'text'

//反例
name$、name12

方法命名必须是全称、尽量语义化；格式：动词+名词。

//正例
saveShopData() /openShopInfoDialog()

//反例
save()/open()

函数方法常用的动词:

get 获取/set 设置,
add 增加/remove 删除,
open 打开/close 关闭,
view 查看/browse 浏览,
edit 编辑/modify 修改,
clean 清理/clear 清除,
index 索引/sort 排序,
find 查找/search 搜索,
send 发送/receive 接收,
download 下载/upload 上传,
refresh 刷新/synchronize 同步,
submit 提交/commit 交付, save 保存，
enter 进入/exit 退出,

常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。

//正例
 MAX_STOCK_COUNT
 
//反例
 MAX_COUNT

使用模板字符串取代连接字符串。

//正例
this.$router.push({
     name:`/center/abs/law/asset/check/${path}`,
     query:data
});

//反例
this.$router.push({
     name:'/center/abs/law/asset/check/' + path ,
     query:data
});

回调函数统一使用 Promise 函数；回调成功的参数统一为 res，错误参数为 err。
JS 中一致使用反引号``或单引号 ‘’ , 不使用双引号。
建议利用 && 和 || 短路来简化代码：
或运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为false，则返回第二个运算子的值。

下面6种值转化为布尔值时为false，其他转化都为true：

1，undefined（未定义，找不到值时出现），
2，null（代表空值），
3，false（布尔值的false，字符串"false"布尔值为true），
4，0（数字0，字符串"0"布尔值为true），
5，NAN，（无法计算结果时出现，表示"非数值"；但是typeof NaN==="number"的值是true），
6，“双引号中无内容” 或 ‘单引号中无内容’（即空字符串，字符串中间有空格时也是true）

注意：空数组（[]）和空对象（{}）对应的布尔值，都是true。

			/*反例*/
			if(system){
                system = 'win'
                console.log("执行了——if")
            }else {
                system = 'ios'
                console.log("执行了——else")
            }
            console.log(system);  //win

			//正例
            system = 'win' || 'ios';
            console.log(system);  //win

使用字面量来代替对象构造器。

//正例
let user = { age: 0, name:'king', city: '北京' };

//反例
let user = new Object();
user.age = 0;
user.name = 'king';
user,city = '北京' ;

优先使用ES6+中新增的语法糖和函数。目的：简化程序，代码灵活和可复用。比如箭头函数、await/async ，解构， let ， for…of 等等。
if关键字后必须有大括号（即使代码块的内容只有一行）。

//正例
if(pageNum){
	this.addPageData();
}

//反例
if(pageNum) this.addPageData();

永远不要直接使用 undefined 进行变量判断，使用 typeof 和字符串’undefined’对变量进行判断。

//正例
if(typeof code === 'undefined') {
    console.log('code is undefined');
}

//反例
if(code === 'undefined') {
    console.log('code is undefined');
}

6，Vue规范

6.1，组件命名规范

组件中name用英文单词，多个单词用驼峰命名法，且命名规范为KebabCase格式，尽量具有唯一性。

<!-- 正例 -->
	export default {
		name:'CompanyAbsAssign',
		data(){
			return {}
		}
	}
	
<!-- 反例 -->
	export default {
		name:'Company-Abs-Assign',
		data(){
			return {}
		}
	}

组件文件名为pascal-case格式；文件名应该倾向于完整单词，而不是缩写；根组件 App 除外。例如abs-check，不要absche。建议：文件名尽量语义化：让阅读者易于理解，避免歧义。

//正例
import ThousandInput from '@/components/page/common/thousand-input.vue';

//反例
import  AssignDetails from  '@/components/page/center/component/assDet.vue';

紧密耦合的父子组件命名：一般以父组件名称开头+描述性单词。

abs-list.vue
abs-list-add.vue
abs-list-edit.vue

在template模版中使用组件，应使用PascalCase模式，并且使用自闭合组件。

<PactInfo
     :pjFactContractDTOList='pjFactContractDTOList'
     @PactAddChange='PactAddChange'
     @PactRemoveChange='PactRemoveChange'
     @PactUplodChange='PactUplodChange'
     @PactDeleteFileChange='PactDeleteFileChange'
     :IsSupplierShow='IsSupplierShow'
     :isAddOnePact='isAddOnePact'
></PactInfo>

6.2，组件开发规范

props 必须定义值类型。
为v-for设置Key值。目的：遍历的每一个元素具有唯一性，这便于diff算法进行优化。
规避v-if和v-for用在一起。v-for优先级比v-if高，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）。
组件script标签内部结构顺序：

//正例
components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods

无特殊情况不允许使用原生API操作dom，谨慎使用this.$refs直接操作dom。
操作DOM是及其损耗性能得，
代码的质量会降低，出现一些多余得代码，
经常直接操作DOM 会导致一些不可预测得问题，当你在一个组件当中直接操作全局得DOM时，有可能会影响到其他页面，一旦报错，定位问题会比较困难。
使用ES6风格编码源码,
定义变量使用let，
定义常量使用const（只能被赋值一次）,
使用export,import模块化，优先使用箭头函数。
目的：避免1个变量可以使用两次var（重声明）；
函数中统一使用self=this来解决全局指向问题。
尽量使用===。
声明变量必须赋值。
指定都用指令缩写（用 : 表示 v-bind: 和用 @ 表示 v-on:）。
弹框、select等需要大量代码去实现，要以组件的方式引入。
【推荐】应该把复杂计算属性分割为尽可能多的更简单的属性。
组件内css样式彻底模块化（即我的规则影响不了别人，别人的规则也影响不了我）。

6.3，路由规范

路由中，path命名，尽量与组件名相匹配（即一眼看到 path 就能迅速找到对应的组件）。
页面跳转数据传递使用路由参数。

页面跳转传参：
例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，使用路由参数进行传参；而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据。
因为如果在B页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。

使用路由懒加载（延迟加载）机制

懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

{
  path: 'abs/list',
  name:'/center/abs/member/abs/list',
  //懒加载
  component: resolve => require(['@/components/page/center/abs/member/abs/list'],resolve),
   meta: { permission: true, prodCode: 'ABS' }
},

视图跳转能用声明式就用声明式。

<!-- 正例 -->
<ul>
    <router-link tag='li' to='...'>
        <div>使用声明式</div>
        ...
    </router-link>
</ul>
	
<!-- 反例 -->
<ul>
    <li @click='$router.push(...)'>
        <div>使用命令式</div>
        ...
    </li>
</ul>

导入模块时不要省略后缀（js 除外），这样有利于 IDE 感知（特别是 .vue）。
导入当前目录以外的模块时，建议使用’@'别名。

<!-- 正例 -->
<!-- js -->
import xxxxx from  '@/components/xxxxx.vue'

<!-- template -->
<img src="@/assets/logo.png" alt="">

/* css */
@import '~@/style.vars.less'
.xxx{
    background:url('~@/assets/logo.png');
}

严格遵守 ESLint 语法校验，警告级别的也要处理 (暂时用不到的代码可以先注释掉)。

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文解读GaussDB(DWS)监控运维诊断优化能力

华为开发者空间

cover

GaussDB技术解读——GaussDB架构介绍（四）

华为开发者空间

cover

华为云数据仓库专业级开发者认证重磅发布

华为开发者空间

所有评论(0)

查看更多评论

酒鼎

已为社区贡献3条内容