记平时工作中的一代码规范(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

以下都是我写代码时遇到的一些问题，现在统一整理出来（后面可能还有，粗心～～），至少是我需要注意的一些小事项，方便团队协作写出统一优美的代码

1. slot标签注意自闭合： <slot :name="slotName" />，其他标签也一样，内部无内容或无其他子标签统一自闭合
2. 模版里面不要有逻辑，只用来展示，放在methods or computed中
3. css 有透明度，颜色用rgba组合写

// 例如
background: rgba(0, 0, 0, .8);

1. 老代码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传入

13.两个提案，简化代码，如下所示

• https://babeljs.io/docs/en/ba...

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};
// 可以写成下面这种形式
const baz = obj?.foo?.bar?.baz; // 42

• https://babeljs.io/docs/en/ba...

order(state) {
    // ?? 后面接默认值
    return state.order.orderDetailEntities[this.orderId] ?? {};
},

暂时这些，后面及时更新