前端代码规范(一)

647 阅读2分钟

前端代码规范(一)

由于时间原因,暂时没有过多整理,后续将持续更新~~~,敬请关注。

一、JavaScript规范 使用 js-standard-style标准

关键规则

  • 不要定义未使用的变量

    eslint: no-unused-vars

    let title:sting = ''
    let name:string = ''  // ✗ avoid
    
    function myFunction (prop:string):void {
       this.title = prop
    }
    
  • 对于变量和函数名统一使用小驼峰命名法

    eslint: camelCase

      var myVar = 'hello'            // ✓ ok
      function myFunction () { }     // ✓ ok
    
      function my_function () { }    // ✗ avoid
      var my_var = 'hello'           // ✗ avoid
    
  • 取对象属性前需先对对象是否存在进行判断,避免报错导致代码异常,例如

    import { get } from 'lodash'
    
    let position = this.userInfo.position            // ✗ avoid
    let position = this.userInfo && this.userInfo.position // ✓ ok
    let position = get(this.userInfo,'position','') // ✓ ok
    
  • 始终使用 === 替代 ==
    例外: obj == null 可以用来检查 null || undefined。 eslint: eqeqeq

    let title:sting = ''
    
    function myFunction (prop:string):void {
       if(this.title === prop){
         // do something ...
       }
    }
    
  • 必须处理异常处理中的错误。

    eslint: handle-callback-err

    import { getUserInfo } from '@/api/common'
    getUserInfo().then((res)=>{
        // 处理正常返回
      }).catch(e=>{           // ✓ ok
        // 处理异常返回
      })
    
  • 构造函数要以大写字母开头

    eslint: new-cap

    
    function Animal () {}
    var dog = new Animal()    // ✓ ok
    
  • 不要扩展原生对象

    eslint: no-extend-native

    Object.prototype.age = 21     // ✗ avoid
    
  • 避免不必要的布尔转换

    eslint: no-extra-boolean-cast

    const result = true
    if (!!result) {   // ✗ avoid
      // ...
    }
    
    const result = true
    if (result) {     // ✓ ok
      // ...
    }
    
  • switch 一定要使用 break 来将条件分支正常中断

    eslint: no-fallthrough

    switch (filter) {
      case 1:
        doSomething()
        break           // ✓ ok
      case 2:
        doSomethingElse()
    }
    
    
  • 嵌套的代码块中禁止再定义函数

    eslint: no-inner-declarations

    if (authenticated) {
      function setAuthUser () {}    // ✗ avoid
    }
    
  • 不要使用 undefined 来初始化变量

    eslint: no-undef-init

    let name = undefined    // ✗ avoid
    
    let name
    name = 'value'          // ✓ ok
    
  • 如果可以,尽量使用 || 、&&、三元 表达式

    eslint: no-unneeded-ternary

    let score = val || 0          // ✓ ok
    val && getscore()             // ✓ ok
    val ? xx : yy             // ✓ ok
    
  • 条件语句变量在左(avoid Yoda conditions)

    eslint: yoda

    if (age === 42) { }    // ✓ ok
    

二、HTML模板规范 基于eslint强烈推荐

  • 标签使用小写横杠连接

    <v-header></v-header>     // ✓ ok
    <vHeader></vHeader>       // ✗ avoid
    
  • 多属性时应该换行显示

    <el-table :data="tableData"
              border
              stripe
              style="width: 100%"
              v-loading="$store.state.User.loading">
    </el-table>     // ✓ ok
    

三、Vue.js规范 详情请参考 Vue风格指南

  • 组件必须有name属性,且为大驼峰

    export default class Header extends Vue {
    }
    
  • props每个对象需要有默认值

    // js
    props: {
        treeType: {
        type: String,
        default: 'side'
      }
    }   // ✓ ok
    
     // ts
    @Prop({ type: String, default: 'label' }) title!: string
    
    
  • 使用v-for时必须设置:key, 且key不得为index

    <ul class="icons-list">
        <li v-for="data in iconData" :key="data.label"></li>
    </ui>                                   // ✓ ok
    
  • 事件处理函数格式为 handle+事件名/其他

      <el-button
          type="primary"
          @click="handleClick" // 事件处理函数格式为 handle+事件名/其他
      >添加</el-button>
    
  • 自定义事件使用'kebab'格式(横杆连接)

      emitSortChange(sortParams) {
        this.$emit('sort-change-debounce', sortParams)
      }
    
  • 标签变量外层使用双引号

    <ul class="icons-list">
        <li v-for='data in iconData' :key='data.label'></li>
    </ui>                                  // ✗ avoid
    

四、CSS规范

项目统一采用scss预处理语言,使用normalize进行样式重置, 各文件功能如下:

  • 公共样式文件路径src/assets/scss/common.scss
  • 主题配色theme.scss
  • 混入函数mixin.scss
  • 混入函数mixin.scss
  • scss常用变量variable.scss
  • 除非特殊情况,否则一律不得使用标签选择器

      div {
        line-height:24px;
      }                                  /* ✗ avoid */
    
  • 减少scoped的使用

      <style lang="scss" scoped>
      </style>                     /* ✗ avoid */
    
      <style lang="scss">
      </style>                     /* ✓  ok */
    
  • .vue单文件内样式必须有唯一外层class

      .home-header { //最外层class
        .title {
          width:100%;
        }
      }                                   /* ✓  ok */