前端代码规范--仅个人-CFANZ编程社区

废话篇

HTML编写规范

布局时标签使用

块级容器尽可能只使用div,ul,li标签，不要使用h1,h2,p标签；

内联容器尽可能只使用span, i标签

多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。

<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>

标签中的判断

使用===和!==进行判断

标签中的语句中适当空格

bad
<div v-if="item.name==='string'&&true"></div>
good
<div v-if="item.name === 'string' && true"></div>

注释规范

务必添加注释列表

公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
多重 if 判断语句
注释块必须以/**（至少两个星号）开头**/
单行注释使用//

单行注释

注释单独一行，不要在代码后的同一行内加注释。例如：

  bad

  var name =”abc”; // 姓名    

  good

  // 姓名
  var name = “abc”;         
复制代码

多行注释

组件使用说明，和调用说明
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
      **/
复制代码

编码规范

尽量按照 ESLint 格式要求编写代码，请开着eslint

源码风格

使用 ES6 风格编码

声明变量优先级 const -> let ;不使用var
静态字符串一律使用单引号或反引号，动态字符串使用反引号

  // bad
  const a = 'foobar'
  const b = 'foo' + a + 'bar'

  // acceptable
  const c = `foobar`

  // good
  const a = 'foobar'
  const b = `foo${a}bar`
  const c = 'foobar'
复制代码

解构赋值

数组成员对变量赋值时，优先使用解构赋值

  // 数组解构赋值
  const arr = [1, 2, 3, 4]
  // bad
  const first = arr[0]
  const second = arr[1]

  // good
  const [first, second] = arr
复制代码

函数的参数如果是对象的成员，优先使用解构赋值

  // 对象解构赋值
  // bad
  function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.lastName
  }

  // good
  function getFullName(obj) {
    const { firstName, lastName } = obj
  }

  // best
  function getFullName({ firstName, lastName }) {}
复制代码

拷贝数组

使用扩展运算符（…）拷贝数组。

  const items = [1, 2, 3, 4, 5]

  // bad
  const itemsCopy = items

  // good
  const itemsCopy = [...items]
复制代码

箭头函数

需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this

  // bad
  const self = this;
  const boundMethod = function(...params) {
    return method.apply(self, params);
  }

  // acceptable
  const boundMethod = method.bind(this);

  // best
  const boundMethod = (...params) => method.apply(this, params);
复制代码

模块

如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用

  // bad
  import * as myObject from './importModule'

  // good
  import myObject from './importModule'
复制代码

如果模块默认输出一个函数，函数名的首字母应该小写。

  function makeStyleGuide() {
  }

  export default makeStyleGuide;
复制代码

如果模块默认输出一个对象，对象名的首字母应该大写。

  const StyleGuide = {
    es6: {
    }
  };

  export default StyleGuide;
复制代码

指令规范

指令有缩写一律采用缩写形式
v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一
避免 v-if 和 v-for 同时用在一个元素上（性能问题）以下为两种解决方案：

将数据替换为一个计算属性，让其返回过滤后的列表
将 v-if 移动至容器元素上 (比如 ul, ol)

Props 规范

Props 定义应该尽量详细

// bad 这样做只有开发原型系统时可以接受
props: ['status']

// good
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}
复制代码

其他

避免 this.$parent
调试信息 console.log() debugger 使用完及时删除
除了三目运算，if,else 等禁止简写（这个是个人习惯，感觉阅读会比较方便）

  // bad
  if (true)
      alert(name);
  console.log(name);

  // bad
  if (true)
  alert(name);
  console.log(name)

  // good
  if (true) {
      alert(name);
  }
  console.log(name);

CSS规范

通用规范

统一使用-连字符
省略值为 0 时的单位

 // bad
  padding-bottom: 0px;
  margin: 0em;

 // good
  padding-bottom: 0;
  margin: 0;
复制代码

如果 CSS 可以做到，就不要使用 JS
css属性编写有顺序的（我有一套，要不要）
必须添加scoped
类名要不要统一规范，特别是一些的简写
多处使用的样式和颜色值等尽可能提取到顶部或global中
不要使用标签选择器，特别是div这种标签选择器
建议sass嵌套层级不要太深，尽可能在3层以内，一层当然是最好

适当空格

// bad
.supplier-info, .plat-info {
    display: flex;
    flex-wrap: wrap;
    .info-item {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .info-item-img {
      width: 48px;
      height: 48px;
      margin-right: 16px;
    }
}
// good
.supplier-info, .plat-info {
    display: flex;
    flex-wrap: wrap;

    .info-item {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .info-item-img {
      width: 48px;
      height: 48px;
      margin-right: 16px;
    }
}

属性声明顺序

个人建议：在属性数量较多时可以参考这5个类别归类排列，至于顺序没必要太过纠结。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

使用&符号引用父选择器

.header {
    .header-title {/* styles */}
    .header-title:after {/* styles */}
    .header-content {/* styles */}
}

/* 用&引用来优化代码👇 */
.header {
    &-title {
        /* styles */
        &:after {/* styles */}
    }
    &-content {/* styles */}
}