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

时间 2019-11-07

标签没有规矩不成方圆前端代码规范指南繁體版

原文原文链接

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/
    * 有的项目是交接过来的, 里面什么命名都有, 那么新页面, 咱们统一用 '-' 来命名, 不要一下子驼峰, 一会所有大写, 一会中杆那么随意
复制代码

方法变量名命名

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

类: 大驼峰javascript

function Tab () {
         
    }

 
    class Scroll () {
         
    }
复制代码

变量, 函数: 小驼峰,css

// 变量简单直接, 不要带有逻辑和动做的意味
    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
复制代码

何时用私有?vue

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

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

错误示例:java

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
        ...
    }
复制代码

联系

新前端技术交流群召集前端技术人，这里有Node.js/Vue.js/React.js/React-Native.js/微信小程序技术问题交流。欢迎加入！群号：426334209vuex

点击连接加入群聊【前端技术交流群】：jq.qq.com/?_wv=1027&a…redux