记平时工作中的一代码规范(Vue项目,纯记录)
2020/4/28 5:03:45
本文主要是介绍记平时工作中的一代码规范(Vue项目,纯记录),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
近期翻了翻自己在群里提交的review代码,发现一些小问题,还有一些问题犯了不止一次,还是老老实实记录一波,以免记性不好又忘记就怪不好意思的。
我在团队中主要负责前台项目,框架是vue,以下是我们工作中团队里定的一些代码规范。
Vue 代码规范
约定
- 如无特殊情况,禁用 v-bind 、v-on、v-text 这些有缩写的指令
- 组件属性之间必须有空行
- 事件绑定方法为:
handle[description]
,比如:handleSubmit、handleButtonClick - v-text 格式为
{{ someVar }}
,两边有空格 - 必须使用绝对路径引用,以
@
开头,css 文件除外
template 格式
属性个数大于等于 3 时,换行
<el-button size="small" icon="plus" class="ACompnent-button" > 编辑 <el-button>
属性顺序
建议每种属性,都按照 a-z 进行排列,不强制
- 指令属性,比如
v-if
v-for
v-model
- 绑定属性,比如
:label="labelWidth"
- 事件属性,比如
@click="handleButtonClick"
- 普通属性,比如
size="small"
自闭合组件
<el-button size="small" icon="plus" class="ACompnent-button" />
正常组件
<el-button size="small" icon="plus" class="ACompnent-button" > 删除 </el-button> <el-button size="small" icon="plus"> 删除 </el-button> <el-button size="small" icon="plus">删除</el-button>
component 属性顺序
组件外部声明
- components
- props
- exports
组件内部数据相关
- data
- computed
- mapState
- other
组件内部生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
组件内部监听声明
- watch
组件内部自定义方法
- methods
- mapActions
- mapGetters
- mapMutations
- handleAClick
- handleBClick
- handleBKeyup
- customMethod
svg 坐标简化的正则
replace (\.\d{2})\d+
with $1
以下都是我写代码时遇到的一些问题,现在统一整理出来(后面可能还有,粗心~~),至少是我需要注意的一些小事项,方便团队协作写出统一优美的代码
- slot标签注意自闭合: <slot :name="slotName" />,其他标签也一样,内部无内容或无其他子标签统一自闭合
- 模版里面不要有逻辑,只用来展示,放在methods or computed中
- css 有透明度,颜色用rgba组合写
// 例如 background: rgba(0, 0, 0, .8);
- 老代码slot最好用v-slot代替: https://cn.vuejs.org/v2/api/#...
<template v-slot:left> <go-back /> </template>
5.常犯的错误: ==class单个名称,不需要引号==
<div :class="{ Order: true, // Order不需要引号 'Order-mask-open': serviceMaskShown, 'Order-fringe': iOSWithFringe, }" >
6.如果代码逻辑里面有常量记得提前抽离出来,单个文件里面用到放在该文件下即可,多个地方用到放在外部统一import引入
7.代码记得考虑一下如何提交健壮性
//例如:如下的改成>= this.data.noticeDatas.length === this.maxLength
8.不要用all 指明属性
// all 改成transform/scale/opacity等具体的属性 transition: all .3s ease;
9.代码优化之判断对象里的属性返回Boolean值
return this.paymentInfo && this.paymentInfo.settlementSheetUrl; // 可以优化成 return Boolean(this.paymentInfo?.settlementSheetUrl); 或者改成 return !this.paymentInfo?.settlementSheetUrl
10.代码写法之子组件传给父组件,派发事件用'-',不要驼峰
// 子组件 handleChange(v) { this.$emit('address-changed', v); },
11.函数参数较多时 or 或者还有未知参数时传入对象形式比较好
// 例如当前的业务函数,传入四个参数,host可能是未知的 export const isSelfProposal = (sourceId, sourceId, shopAddress, host) => { if (!sourceId || !shopAddress) return false; const shopIds = getEnvByHost(host) === 'release' ? releaseSelfProposalShopIds : testSelfProposalShopIds; if (selfProposalSoureIds.includes(sourceId) && shopIds.includes(shopId)) { return true; } return false; }; // 可以改成 export const isSelfProposal = ({ sourceId, sourceId, shopAddress, host, }) => {
12.子组件可以通过vuex拿到的数据,不用从父组件取vuex中的数据再通过props传入
暂时这些,后面及时更新
这篇关于记平时工作中的一代码规范(Vue项目,纯记录)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程