沒有規矩不成方圓，前端代碼規範指南

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
        ...
    }
複製代碼

聯繫

新前端技術交流羣召集前端技術人，這裏有Node.js/Vue.js/React.js/React-Native.js/微信小程序 技術問題交流。歡迎加入！羣號：426334209

點擊連接加入羣聊【前端技術交流羣】：jq.qq.com/?_wv=1027&a…