芥子屋
0%

前端编码规范

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 2.5k 阅读时长 ≈ 6 分钟

Preface

关于平时工作时前端的编码规范，多采用官方或者推荐的编码规范。包括 JavaScript 和 Vue.js 规范

JavaScript规范

JavaScript 的规范采用 Airbnb 的 ESLint 规范。原则上能使用 ES6 语法的地方均使用 ES6 语法

  • 因为我是用的 vue-cli 搭建的 Vue 项目的脚手架，所以可以很方便的应用 ESLint 来规范代码。生成的两个文件，.eslintrc.js中包含了 ESLint 配置和规则，.eslintignore包含忽略检测的文件，类似.gitignore

  • 在.eslintrc.js中自定义的规则，详细的规则请参考 ESLint官网

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // allow debugger during development
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       // allow console during development
       'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       // allow unused variables during development
       'no-unused-vars': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
       // disallow trailing commas
       'comma-dangle': ['error', 'never'],
       // disallow trailing semi
       'semi': ['error', 'never'],
       // allow the unary operators ++ and --
       'no-plusplus': 'off'

Tips

  • 关于句尾是否该加分号，应该看个人习惯，我倒觉得两种风格都应该能适应，只要保证一个项目中统一风格即可。作为前端项目，个人为了简洁清爽所以没加分号

  • ASI( or Automatic Semicolon Insertion，自动分号插入机制)，现在的 ECMAScript 实现，无论是浏览器还是 Node.js 都包含了 ASI 功能，可以动态识别 JS 语句并判断是否在句尾插入分号

Vue.js规范

Vue.js 的官网上有非常详细的风格指南，所以说详细的官方文档真的很关键！

组件命名

  • 组件名始终为多个单词组成（为避免与 HTML 元素冲突），单词首字母大写拼接，组件的 name 属性不可省略（方便 DevTools 调试）

    1
    2
    3
    4
    5
    6
    TodoItem.vue

    // JS
    export default {
      name: 'TodoItem'
    }

  • 组件名应该倾向于完整单词而不是缩写

  • HTML 中对应组件单词均小写，以-中划线连接多个单词

    1
    2
    // HTML
    <todo-item></todo-item>

  • 使用组件名作为样式作用域空间，同时给<style>标签加上scoped属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <template>
      <div class="app-button">
        <!-- ... -->
      </div>
    </template>

    <style scoped>
      .app-button { /* ... */ }
    </style>

  • 通用组件或基础组件使用App、Base、V作为前缀

    1
    2
    AppHeader.vue
    AppTable.vue

属性

  • 组件的属性在 HTML 标签中一行一个，对齐显示

    1
    2
    3
    4
    5
    6
    7
    8
    <range-slider
      :values="[10, 20]"
      min="0"
      max="100"
      step="5"
      :on-slide="updateInputs"
      :on-end="updateResults">
    </range-slider>

v-for

  • 总是用key配合v-for

    1
    2
    3
    4
    5
    6
    7
    8
    <ul>
      <li
        v-for="todo in todos"
        :key="todo.id"
      >
        {{ todo.text }}
      </li>
    </ul>

  • 永远不要把v-if和v-for同时用在同一个元素上，可以将v-if移至上一层

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // bad
    <ul>
      <li
        v-for="user in users"
        v-if="shouldShowUsers"
        :key="user.id"
      >
        {{ user.name }}
      <li>
    </ul>

    //good
    <ul v-if="shouldShowUsers">
      <li
        v-for="user in users"
        :key="user.id"
      >
        {{ user.name }}
      <li>
    </ul>

参考