没有规矩不成方圆，前端代码规范指南-CSDN博客

JS代码格式规范

      js文件, vue文件, 及jsx文件都遵循eslint规范, 而且在.eslintrc.js 对eslint进行一些配置, 我们遵循业界通用代码规范, 去除一些鸡肋的限制, 详情可见[eslint-rules](https://eslint.org/docs/rules/)

      注意: 我们本地开发时候, 会有eslint进行预检查, 如果有不符合规范的代码, 是不能进行开发的, 我们需统一代码风格, 有时候多一个空格少一个空格都会报错, 可以参考其他上线的案例, 也可以去[eslint-rules](https://eslint.org/docs/rules/)详细看看
复制代码

vue规范

    [vue风格指南](https://cn.vuejs.org/v2/style-guide/)
复制代码

文件名命名

    推荐: 文件(文件夹)名单词间隔用“-”隔开，不要采用大小写（因为windows路径不识别大小写）

    * 例如：item-scroll.jsx、inner-top.vue、class-list/
    * 有的项目喜欢组件大驼峰方式, 如果保证项目统一性, 可继续保留组首字母大写风格, 如: ItemScroll.js, InnerTop.vue, ClassList/
    * 有的项目是交接过来的, 里面什么命名都有, 那么新页面, 我们统一用 '-' 来命名, 不要一会儿驼峰, 一会全部大写, 一会中杆那么随意
复制代码

方法变量名命名

    命名不能随意想咋写咋写, 是为了更好的方便阅读, 保证代码整洁性, 统一性
复制代码

类: 大驼峰

    function Tab () {
         
    }

 
    class Scroll () {
         
    }
复制代码

变量, 函数: 小驼峰,

    // 变量简单直接, 不要带有逻辑和动作的意味
    let count = 10
    let flag = false
    // bad
    let getFlag = true
     
     
    // Boolean 类型推荐加个前缀 is
    let isCreated = true
     
    // 数据拉取推荐加个前缀 get
    function getInfo () {
         
    }
     
    // 赋值等操作推荐加个前缀 set
    const setInfo = function () {
     
    }
     
    //  如果是事件推荐前面加个on 或 handle
    const onTabChange = function () {}
    const handleScroll = function () {}
复制代码

常量: 全部大写, 底杠隔开 '_'

    const MAX_LIMIT = 10
    const LIMIT = 10
复制代码

什么时候用私有?

    * 私有属性和方法的判断是什么? 为什么有的函数里, 有的就是私有命名, 有的就不是私有命名?
    * 私有属性外部能否获取到?
      这是一个应该详细讨论的问题, 私有这个概念是静态语言的概念, js作为动态语言, 需要通过一些插件能在开发阶段实现私有,不过意义不太大, 所以更多私有只能是一个约定.
      原则: 只要在内部访问, 不对外暴露的都可以叫私有(即使外部可能访问到, 但是不是特意暴露的接口), 平时开发阶段, 不用特意纠结是否私有
复制代码

    let _a = 1
    const _getList = () => {}
复制代码

错误示例:

    const a = 1
    const a_b = 2
    const a_B = 3
    const getinfo = () => {}
    const MAX_list = 10
    const obj123456 = {}
    const item1 = {}
    const item2 = {}
    const item3 = {}
    const Tab = 'a'
复制代码

基础组件示例

    /**
     * 注意:
     * 自定义事件 一定要在顶部申明, 加上详细注释, 包括事件类型, 传递参数, 参数类型, 参数状态等
     */
    const events = {
      CLICK: 'click'
    }
     
    /**
     * 注意:
     * 自定义组件 一定要在顶部申明, 加上详细注释, 包括事件类型, 传递参数, 参数类型, 参数状态等
     *
     * button组件
     * @module components/button
     * @desc 按钮
     * @param {String} [type=default] - 显示类型, 接收 default, primary, danger
     * @param {Boolean} [disbale=false] - 禁用
     * @param {String} [size=large] - 尺寸, 接收 normal, small, large
     *
     * @example
     * <button @click="clickHandle" size="large" type="primary">按钮</button>
     */
    const props = {
      disable: Boolean,
      size: {
        type: String,
        default: 'normal'
      },
      type: {
        type: String,
        default: 'default'
      }
    }
复制代码

组件页面示例

    /**
     * 注意:
     * 基础组件css命名空间为 c-
     *
     * 外层容器样式命名 c-文件名
     * 子元素样式命名 c-文件名-样式名
     * 条件样式命名 c-文件名--样式名
     */
     
    <a
      class="c-button"
      :class="[
        `c-button--${type}`,
        `c-button--${size}`,
        {
          'c-button-disabled': disabled,
          'c-button-plain': plain
        }
      ]"
    >
      <text
        class="c-button-text"
        :class="[`c-button-${type}-text`]"
      >
        <slot></slot>
      </text>
    </a>
复制代码

业务逻辑页面


   /**
   * 注意:
   *
   * 子组件引用和其他引用换行
   * 基础组件用c+文件名命名
   * 基础模块用m+文件名命名
   * 页面子模块用p+文件名命名
   * 如果没有用vuex或者redux 页面状态统一入口在父组件, 并加上注释
   */
   import CWrap from 'components/wrap'
   import MContainer from 'modules/container'
   import PNotice from './notice'
    
   export default {
     components: {
       CWrap, MContainer, PNotice
     },
    
     data () {
       return {
         // 用户信息
         user: {},
    
         // 获取本周以上数据
         weekScore: {},
    
         // 广播显示文案
         broadcastText: {}
       }
     }
   }
复制代码

css命名规范

 class 命名 用中杆, 这块得注意, 不能出现, a_b, aB, a_b-c, a_bC 这种奇怪的命名, 应该是 a-b, a-b-c, a-b-c-d
复制代码

 // bad
 .a_b {}
 .aB {}
 .a_b_c {}
 .a_bC {}
   
 // good
 .a {}
 .a-b {}
 .a-b-c {}
复制代码

css命名空间规范及其他技巧

    less模块化写法
复制代码

    @joy-prefix-cls: ~'p-joy-new';
    .@{joy-prefix-cls}{
      &-wrapper{
        position: relative;
        width: 100%;
        height: 1772px;
        background: #ff949c;
        overflow: hidden;
      }
    }
复制代码

 将生成如下代码
复制代码

   .p-joy-new-wrapper {
     position: relative;
     width: 100%;
     height: 1772px;
     background: #ff949c;
     overflow: hidden;
   }
复制代码

  vue中使用css模块化
复制代码


  <template>
    <div :class="`${classPrefix}-wapper`">
      模板内容
    </div>
  </template>
   
  const classPrefix = 'p-joy-new'
  export default {
    data () {
      return {
        classPrefix
      }
    }
  }
复制代码

 less 引入文件别名
复制代码


   @import '~common/less/var';
    
   .bg {
     background-image: url('~asstes/images/banner/bg.png')
   }
复制代码

vue中对assets中的图片文件路径引用

bad
复制代码



   <template>
     <div :class="`${classPrefix}-wapper`">
       <img :src="../../assets/images/banner/bg.png"/>
     </div>
   </template>
复制代码

good
复制代码

    <template>
      <div :class="`${classPrefix}-wapper`">
        <img :src="require('assets/images/banner/bg.png)"/>
      </div>
    </template>
复制代码

方法名定义

   * 所有绑定事件类的方法统一前缀 on 例如：onOpen、onMessage
   * 所有后端拉取数据的方法统一前缀 get 例如：getList、getStudentDetail、保存统一前缀save、更新统一前缀update、删除统一前缀delete
   * 所有内部私有方法统一前缀 _ 例如：_compareTime、_isStudent
复制代码

避免使用"魔数"

  代码中所有关于状态, 类型相关的文字的值, 全部使用const声明, 如果是相对中等偏上项目, 声明一个文件, 如: constants/state.js
复制代码

   bad
   // 这个0, 鬼知道是什么意思, 什么时候为0
   // 即使项目中加了注释, 那么这个0, 如果在项目多个地方被用到, 就变得难以维护
   // 比如: 第一: 状态更改了呢? 修改N个地方的代码, 第二: N个地方写同样的注释
   if (this.state === 0) {
       ...
   }
复制代码

    good
    // 注意: 每个常量变量需要填写相关注释
    // 停止直播
    const STOP_LIVE = 0
    // 开始直播
    const START_LIVE = 1
     
     
    // 这样后面不管别人看, 还是自己回过头看, 都能明白其中意义, 如果后面项目中状态有修改, 修改一处即可.
    // 这就是可维护, 可扩展的小案例, 平时不管写业务代码还是通用框架, 多注意些小细节和反思, 就能有很多收获和提高
    switch (LIVE_STATE) {
        case STOP_LIVE:
            ...
            break  
        case START_LIVE:
            ...
            break
        ...
    }
复制代码