工作总结：代码

发表于   |   分类于

个人代码风格习惯及规范

工作中，每个人都有自己的书写代码习惯，及规范理解，以下仅属于展示自己的书写习惯及代码风格，现在自己书写代码时，已经形成了习惯，基本都是如此书写，具体如下。

vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
/**
 * 模版文件
 * 说明： xxx
 */
import styles from './index.module.less';

export default {
  name: 'test',
  components: {},
  props: {},
  data() {
    return {
      msg: '这是一个模版文件'
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
     * 初始化
     */
    init(){}
  },
  computed: {
    styles() {
      return styles
    }
  }
}
</script>

<template>
  <article :class='styles.test_box'>
    {{ msg }}
  </article>
</template>

以上皆是个人代码习惯

  1. template写在最下面仅是个人习惯（一是习惯最开头注释写明文件属于及一些说明，而js的注释比html的注释看起来舒服，二是受到react影响里，个人习惯了这样的阅读顺序）。
  2. 副作用写在created中，用init函数初始化操作，如一些参数的初始化设定和渲染数据接口的调用，皆在init中处理。
  3. css分离外部文件引用，使用css module的编写方式。
  4. html顶层用article。
  5. js函数写好注释规范。

javaScript

JavaScript主要是注释规范，细节逻辑就看具体思路去编写了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * 函数
 */
function fn() {}

/**
 * 传参函数
 * @param {string} str - 参数
 */
function fn(str) {}

/**
 * 带返回函数
 * @param {string} str - 参数
 * @returns {string}
 */
function fn(str) {
  return str
}

css

css的书写主要是按照一些常用及页面盒子阅读习惯（个人阅读习惯）来定书写顺序，基本每个dom的class都实行这一套顺序逻辑，基本书写思路习惯是：先定义盒子相关的内容，到定义盒子位置，然后从外到内的定义盒子元素，再尊从常用到不常用参数的逻辑思路。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.test {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  font-size: 12px;
  line-height: 12px;
  color: #eee;
  font-weight: bold;
  background: red;
  border: 1px solid #000;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
}

一般每个class都会尊从上面的书写顺序，盒子模型-布局-定位-盒子大小-内外边距-字体属性-背景-边框-其他

html

html的习惯没多少，仅结合vue来书写习惯顶层用article，然后section代替div，其实就是多用html5元素。

总结

其实以上都是个人的代码习惯而已，或有好坏，总的来说就是自己书写代码有点·强迫症·一定要尊从上面的书写习惯去写，否则会感觉不舒服，特别是vue的template和script对调，css的书写顺序和JavaScript的函数注释，如果不是这样的顺序或没有函数注释，个人会感觉很混乱，代码不好看。