记一次VUE代码重构中代码规范问题

前言

最近接手了一个经过了几代人开发（想想都可怕）的项目，由于之前的前端人员已经离职，所以只剩下我和一个前端老大。因为经过了不同人员的开发，代码质量参差不齐，且没有一个统一的规范。

所以。重构的重担就压倒我的肩膀上来了。以下只针对VUE开发规范中的一些个人见解以及网络上一些优秀开发规范，如有不妥，还望海涵！总体来说，Vue官方规范就够用了！

缩进

自古难题：到底是两个空格的缩进好，还是4个空格的缩进好？
复制代码

在我看来，两个空格的缩进看起来空格太少了，可读性远不如4空格的。看起来一点也不优雅。如果说4空格占空间大，但是在发布的时候可以压缩啊，这时候不是就不需要考虑几个空格了吗？

其实你不打空格都行，只要是你团队不杀你祭天就可以了。在同一个团队，至少是一个项目中我们应该约定统一的规范。反正不混用空格和Tab就行了。

空格

善用空格会使你的代码更美观易读，如：

// 没有空格
let num='';
num=1+2345+(3*889)-67/45;
for(var i=0;i<8;i++){}

// 有空格
let num = '';
num = 1 + 2345 + (3 * 889) - 67 / 45;
for(var i = 0; i < 8; i++){}
复制代码

总之我觉得第二种看上去更加美观，尤其是代码量大的情况下更加表现的明显。

风格指南

组件数据

组件的 data 必须是一个函数。

// bad
export default {
  data: {
    foo: 'bar'
  }
}

// good
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
复制代码

单文件组件文件名称

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

// bad
mycomponent.vue
myComponent.vue

// good
my-component.vue
MyComponent.vue
复制代码

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue

// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue
复制代码

自闭合组件

在单文件组件中没有内容的组件应该是自闭合的

<!-- bad -->
<my-component></my-component>

<!-- good -->
<my-component />
复制代码

Prop 名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。

// bad
export default {
  props: {
    'greeting-text': String
  }
};

// good
export default {
  props: {
    greetingText: String
  }
}
复制代码

<!-- bad -->
<welcome-message greetingText="hi" />

<!-- good -->
<welcome-message greeting-text="hi" />
复制代码

Props 换行

多个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。

<!-- bad -->
<my-component foo="a" bar="b" baz="c" />

<!-- good -->
<my-component
  foo="a"
  bar="b"
  baz="c"
/>
复制代码

指令缩写

指令缩写，用 : 表示 v-bind: ，用 @ 表示 v-on:

<!-- bad -->
<input
  v-bind:value="value"
  v-on:input="onInput"
>

<!-- good -->
<input
  :value="value"
  @input="onInput"
>
复制代码

Props 顺序

标签的 Props 应该有统一的顺序，依次为指令、属性和事件。

<!-- good -->
<my-component
  v-if="if"
  v-show="show"
  v-model="value"
  ref="ref"
  :key="key"
  :text="text"
  @input="onInput"
  @change="onChange"
/>
复制代码

组件选项的顺序

组件选项应该有统一的顺序。

<!-- good -->
export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
};
复制代码

组件选项中的空行

组件选项较多时，建议在属性之间添加空行。

<!-- good -->
export default {
  computed: {
    formattedValue() {
      // ...
    },

    styles() {
      // ...
    }
  },

  methods: {
    onInput() {
      // ...
    },

    onChange() {
      // ...
    }
  }
};
复制代码

单文件组件顶级标签的顺序

单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。

<!-- good -->
<template>
...
</template>

<script>
/* ... */
</script>

<style>
/* ... */
</style>
复制代码

小结

总之这种东西是仁者见仁，智者见智。自己的写的开心就好。