ue 開發規范目錄及說明

本文檔為前端 vue 開發規范

• 規范目的
• 命名規范
• 結構化規范
• 注釋規范
• 編碼規范
• CSS 規范

規范目的

為提高團隊協作效率

便于后臺人員添加功能及前端后期優化維護

輸出高質量的文檔

命名規范

為了讓大家書寫可維護的代碼，而不是一次性的代碼

讓團隊當中其他人看你的代碼能一目了然

甚至一段時間時候后你再看你某個時候寫的代碼也能看

普通變量命名規范

• 命名方法 ：駝峰命名法
• 命名規范 ：命名必須是跟需求的內容相關的詞，比如說我想申明一個變量，用來表示我的學校，那么我們可以這樣定義const mySchool="我的學校";命名是復數的時候需要加s,比如說我想申明一個數組，表示很多人的名字，那么我們可以這樣定義const names=new Array();

常量

• 命名方法 : 全部大寫
• 命名規范 : 使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。

const MAX_COUNT=10
const URL='https://www.baidu.com/'
復制代碼

組件命名規范

官方文檔推薦及使用遵循規則：

PascalCase (單詞首字母大寫命名)是最通用的聲明約定

kebab-case (短橫線分隔命名) 是最通用的使用約定

• 組件名應該始終是多個單詞的，根組件 App 除外
• 有意義的名詞、簡短、具有可讀性
• 命名遵循 PascalCase 約定公用組件以 Abcd (公司名縮寫簡稱) 開頭，如（AbcdDatePicker,AbcdTable）頁面內部組件以組件模塊名簡寫為開頭，Item 為結尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
• 使用遵循 kebab-case 約定在頁面中使用組件需要前后閉合，并以短線分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）
• 導入及注冊組件時，遵循 PascalCase 約定
• 同時還需要注意：必須符合自定義元素規范: 切勿使用保留字。

method 方法命名命名規范

• 駝峰式命名，統一使用動詞或者動詞+名詞形式

  //bad
  go、nextPage、show、open、login

    // good
  jumpPage、openCarInfoDialog

復制代碼

• 請求數據方法，以 data 結尾

  //bad
  takeData、confirmData、getList、postForm

  // good
  getListData、postFormData
復制代碼

• init、refresh 單詞除外
• 盡量使用常用單詞開頭（set、get、go、can、has、is）

附： 函數方法常用的動詞:

get 獲取/set 設置,
add 增加/remove 刪除
create 創建/destory 移除
start 啟動/stop 停止
open 打開/close 關閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創建/destroy 銷毀
begin 開始/end 結束,
backup 備份/restore 恢復
import 導入/export 導出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標記
copy 復制/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動/run 運行
compile 編譯/execute 執行,
debug 調試/trace 跟蹤
observe 觀察/listen 監聽,
build 構建/publish 發布
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect 斷開,
send 發送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize 同步
update 更新/revert 復原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 折疊
begin 起始/end 結束,
start 開始/finish 完成
enter 進入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集
復制代碼

views 下的文件命名

• 只有一個文件的情況下不會出現文件夾，而是直接放在 views 目錄下面，如 index.vue
• 盡量是名詞,且使用駝峰命名法
• 開頭的單詞就是所屬模塊名字（workbenchIndex、workbenchList、workbenchEdit）
• 名字至少兩個單詞（good: workbenchIndex）（bad:workbench）

props 命名

在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板中應該始終使用 kebab-case

<!-- bad -->
<script>
props: {
  'greeting-text': String
}
</script>

<welcome-message greetingText="hi"></welcome-message>

<!-- good -->
<script>
props: {
  greetingText: String
}
</script>

<welcome-message greeting-text="hi"></welcome-message>
復制代碼

例外情況

1. 作用域不大臨時變量可以簡寫，比如：str，num，bol，obj，fun，arr。
2. 循環變量可以簡寫，比如：i，j，k 等。

結構化規范

目錄文件夾及子文件規范

• 以下統一管理處均對應相應模塊
• 以下全局文件文件均以 index.js 導出，并在 main.js 中導入
• 以下臨時文件，在使用后，接口已經有了，發版后清除

src                               源碼目錄
|-- api                              接口，統一管理
|-- assets                           靜態資源，統一管理
|-- components                       公用組件，全局文件
|-- filters                          過濾器，全局工具
|-- icons                            圖標，全局資源
|-- datas                            模擬數據，臨時存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模擬接口，臨時存放
|-- router                           路由，統一管理
|-- store                            vuex, 統一管理
|-- views                         視圖目錄
|   |-- staffWorkbench               視圖模塊名
|   |-- |-- staffWorkbench.vue       模塊入口頁面
|   |-- |-- indexComponents          模塊頁面級組件文件夾
|   |-- |-- components               模塊通用組件文件夾
復制代碼

vue 文件基本結構

  <template>
    <div>
      <!--必須在div中編寫頁面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <!--聲明語言，并且添加scoped-->
  <style lang="scss" scoped>
  </style>
復制代碼

多個特性的元素規范

多個特性的元素應該分多行撰寫，每個特性一行。(增強更易讀)

<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>
復制代碼

元素特性的順序

原生屬性放前面，指令放后面

如下所示：

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text
復制代碼

組件選項順序

如下所示：

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch
復制代碼

注釋規范

代碼注釋在一個項目的后期維護中顯得尤為重要，所以我們要為每一個被復用的組件編寫組件使用說明，為組件中每一個方法編寫方法說明

務必添加注釋列表

1. 公共組件使用說明
2. 各組件中重要函數或者類說明
3. 復雜的業務邏輯處理說明
4. 特殊情況的代碼處理說明,對于代碼中特殊用途的變量、存在臨界值、函數中使用的 hack、使用了某種算法或思路等需要進行注釋描述
5. 多重 if 判斷語句
6. 注釋塊必須以/**（至少兩個星號）開頭**/
7. 單行注釋使用//

單行注釋

注釋單獨一行，不要在代碼后的同一行內加注釋。例如：

  bad

  var name=”abc”; // 姓名    

  good

  // 姓名
  var name=“abc”;         
復制代碼

多行注釋

組件使用說明，和調用說明
      /**
      * 組件名稱
      * @module 組件存放位置
      * @desc 組件描述
      * @author 組件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} [title]    - 參數說明
      * @param {String} [columns] - 參數說明
      * @example 調用示例
      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
      **/
復制代碼

編碼規范

優秀的項目源碼，即使是多人開發，看代碼也如出一人之手。統一的編碼規范，可使代碼更易于閱讀，易于理解，易于維護。盡量按照 ESLint 格式要求編寫代碼

源碼風格

使用 ES6 風格編碼

1. 定義變量使用 let ,定義常量使用 const
2. 靜態字符串一律使用單引號或反引號，動態字符串使用反引號

  // bad
  const a='foobar'
  const b='foo' + a + 'bar'

  // acceptable
  const c=`foobar`

  // good
  const a='foobar'
  const b=`foo${a}bar`
  const c='foobar'
復制代碼

3. 解構賦值

• 數組成員對變量賦值時，優先使用解構賦值

  // 數組解構賦值
  const arr=[1, 2, 3, 4]
  // bad
  const first=arr[0]
  const second=arr[1]

  // good
  const [first, second]=arr
復制代碼

• 函數的參數如果是對象的成員，優先使用解構賦值

  // 對象解構賦值
  // bad
  function getFullName(user) {
    const firstName=user.firstName
    const lastName=user.lastName
  }

  // good
  function getFullName(obj) {
    const { firstName, lastName }=obj
  }

  // best
  function getFullName({ firstName, lastName }) {}
復制代碼

4. 拷貝數組使用擴展運算符（...）拷貝數組。

  const items=[1, 2, 3, 4, 5]

  // bad
  const itemsCopy=items

  // good
  const itemsCopy=[...items]
復制代碼

5. 箭頭函數需要使用函數表達式的場合，盡量用箭頭函數代替。因為這樣更簡潔，而且綁定了 this

  // bad
  const self=this;
  const boundMethod=function(...params) {
    return method.apply(self, params);
  }

  // acceptable
  const boundMethod=method.bind(this);

  // best
  const boundMethod=(...params)=> method.apply(this, params);
復制代碼

6. 模塊

• 如果模塊只有一個輸出值，就使用 export default，如果模塊有多個輸出值，就不使用 export default，export default 與普通的 export 不要同時使用

  // bad
  import * as myObject from './importModule'

  // good
  import myObject from './importModule'
復制代碼

• 如果模塊默認輸出一個函數，函數名的首字母應該小寫。

  function makeStyleGuide() {
  }

  export default makeStyleGuide;
復制代碼

• 如果模塊默認輸出一個對象，對象名的首字母應該大寫。

  const StyleGuide={
    es6: {
    }
  };

  export default StyleGuide;
復制代碼

指令規范

1. 指令有縮寫一律采用縮寫形式

  // bad
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"

  // good
  :class="{'show-left'：true}"
  @click="getListData"
復制代碼

2. v-for 循環必須加上 key 屬性，在整個 for 循環中 key 需要唯一

  <!-- good -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>

  <!-- bad -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
復制代碼

3. 避免 v-if 和 v-for 同時用在一個元素上（性能問題）以下為兩種解決方案：

• 將數據替換為一個計算屬性，讓其返回過濾后的列表

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

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

  <script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
  </script>
復制代碼

• 將 v-if 移動至容器元素上 (比如 ul, ol)

  <!-- 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>
復制代碼

Props 規范

Props 定義應該盡量詳細

// bad 這樣做只有開發原型系統時可以接受
props: ['status']

// good
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !==-1
    }
  }
}
復制代碼

其他

1. 避免 this.$parent
2. 調試信息 console.log() debugger 使用完及時刪除
3. 除了三目運算，if,else 等禁止簡寫

  // bad
  if (true)
      alert(name);
  console.log(name);

  // bad
  if (true)
  alert(name);
  console.log(name)

  // good
  if (true) {
      alert(name);
  }
  console.log(name);
復制代碼

CSS 規范

通用規范

1. 統一使用"-"連字符
2. 省略值為 0 時的單位

 // bad
  padding-bottom: 0px;
  margin: 0em;

 // good
  padding-bottom: 0;
  margin: 0;
復制代碼

3. 如果 CSS 可以做到，就不要使用 JS
4. 建議并適當縮寫值，提高可讀性，特殊情況除外“建議并適當”是因為縮寫總是會包含一系列的值，而有時候我們并不希望設置某一值，反而造成了麻煩，那么這時候你可以不縮寫，而是分開寫。當然，在一切可以縮寫的情況下，請務必縮寫，它最大的好處就是節省了字節，便于維護，并使閱讀更加一目了然。

  // bad
  .box{
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
  }

  // good
  .box{
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
  }
復制代碼

5. 聲明應該按照下表的順序

左到右，從上到下

  // bad
  .box {
    font-family: 'Arial', sans-serif;
    border: 3px solid #ddd;
    left: 30%;
    position: absolute;
    text-transform: uppercase;
    background-color: #eee;
    right: 30%;
    isplay: block;
    font-size: 1.5rem;
    overflow: hidden;
    padding: 1em;
    margin: 1em;
  }

  // good
  .box {
    display: block;
    position: absolute;
    left: 30%;
    right: 30%;
    overflow: hidden;
    margin: 1em;
    padding: 1em;
    background-color: #eee;
    border: 3px solid #ddd;
    font-family: 'Arial', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
  }
復制代碼

6. 元素選擇器應該避免在 scoped 中出現官方文檔說明：在 scoped 樣式中，類選擇器比元素選擇器更好，因為大量使用元素選擇器是很慢的。
7. 分類的命名方法使用單個字母加上"-"為前綴布局（grid）（.g-）；模塊（module）（.m-）；軟件（unit）（.u-）；功能（function）（.f-）；皮膚（skin）（.s-）；狀態（.z-）。
8. 統一語義理解和命名

布局（.g-）

模塊（.m-）、軟件（.u-）

功能（.f-）

皮膚（.s-）

狀態（.z-）

sass 規范

1. 當使用 Sass 的嵌套功能的時候，重要的是有一個明確的嵌套順序，以下內容是一個 SCSS 塊應具有的順序。當前選擇器的樣式屬性父級選擇器的偽類選擇器 (:first-letter, :hover, :active etc)偽類元素 (:before and :after)父級選擇器的聲明樣式 (.selected, .active, .enlarged etc.)用 Sass 的上下文媒體查詢的選擇器作為最后的部分

  .product-teaser {
    // 1. Style attributes
    display: inline-block;
    padding: 1rem;
    background-color: whitesmoke;
    color: grey;

    // 2. Pseudo selectors with parent selector
    &:hover {
      color: black;
    }

    // 3. Pseudo elements with parent selector
    &:before {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }

    &:after {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }

    // 4. State classes with parent selector
    &.active {
      background-color: pink;
      color: red;

      // 4.2. Pseuso selector in state class selector
      &:hover {
        color: darkred;
      }
    }

    // 5. Contextual media queries
    @media screen and (max-width: 640px) {
      display: block;
      font-size: 2em;
    }

    // 6. Sub selectors
    > .content > .title {
      font-size: 1.2em;

      // 6.5. Contextual media queries in sub selector
      @media screen and (max-width: 640px) {
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
    }
  }
復制代碼

特殊規范

• 對用頁面級組件樣式，應該是有作用域的
• 對于公用組件或者全局組件庫，我們應該更傾向于選用基于 class 的 BEM 策略

、語義化標簽

1. 列表使用 ul li
2. 文字使用 p span em cite 等標簽
3. 標題使用 h1 h2 等標簽
4. 布局使用 section aside header footer article 等 HTML5 布局標簽

2、自定義標簽

使用自閉合標簽的寫法 小寫加下劃線

<template>
  <my-owner-components />
</template>

3、多特性分行寫

為提高可讀性 組件應用時換行 按照 ref、class、傳入、傳出 順序書寫

<template>
  <my-components
    ref="myComponents"
    class="home-my-components"
    :data="data"
    @changeHandle="changeHandle"
  />
</template>

4、行內使用表達式

在模版中 簡單情況使用表達式 復雜情況使用計算屬性或函數

<template>
  <!-- 簡單情況 -->
  <div v-show="data.type===1">
    ...
  </div>
  <!-- 復雜情況 -->
  <div v-show="getTypeShow(data)">
    ...
  </div>
</template>

<script>
export default {
  methods: {
    /**
    * ***顯示判斷
    * @param data **
    */
    getTypeShow(data) {
      return data.type===1 && ...
    }
  }
}
</script>

5、避免重復

避免過多重復代碼 果超過三行類似的代碼 配置數據再循環遍歷

6、代碼嵌套

根據元素嵌套規范 每個塊狀元素獨立一行 內聯元素可選

<template>
  <!-- 情況1 -->
  <div>
    <h1></h1>
    <p></p>
    <p><span></span><span></span></p>
  </div>
  <!-- 情況2 -->
  <div>
    <h1></h1>
    <p></p>
    <p>
      <span></span>
      <span></span>
    </p>
  </div>
</template>

7、活用v-if v-show

v-show 不會改變dom樹 不會導致重新渲染 用于頻繁的切換顯示隱藏
v-if 會改變dom樹 會導致重新渲染 用于只控制一次顯示隱藏

8、注釋規范

<template>
  <!-- 標簽注釋 -->
  <div>
    ...
  </div>
  <!-- 組件注釋 -->
  <my-owner-components />
</template>

CSS規范

1、避免使用

1. 避免使用標簽選擇器 因為在 Vue 中 特別是在局部組件 使用標簽選擇器效率特別低 損耗性能 建議需要的情況直接定義 class
2. 非特殊情況下 禁止使用 ID 選擇器定義樣式（有 JS 邏輯的情況除外）
3. 避免使用important選擇器
4. 避免大量的嵌套規則 控制在3級之內 對于超過4級的嵌套 考慮重寫或新建子項
5. 避免使用ID選擇器及全局標簽選擇器防止污染全局樣式

2、推薦使用

1. 提取公用樣式進assets文件styles里 按模塊/功能區分
2. 使用 scoped 關鍵字 約束樣式生效的范圍
3. 可復用屬性盡量抽離為頁面變量 易于統一維護
4. 使用混合（mixin）根據功能定義模塊 然后在需要使用的地方通過 @include 調用 避免編碼時重復輸入代碼段

3、書寫順序

CSS 屬性書寫順序 先決定定位寬高顯示大小 再做局部細節修飾
定位屬性(或顯示屬性 display)=> 寬高屬性=> 邊距屬性(margin padding)=> 背景 顏色 字體等修飾屬性的定義 這樣定義為了更好的可讀性 讓別人只要看一眼就能在腦海中浮現最終顯示的效果

.class-name {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 10px;
  background-color: red; 
  border-radius: 2px;
  font-size: 14px;
  color: #000;
  line-height: 1.42;
}

4、樣式覆蓋

組件內部需要覆蓋UI框架樣式 必須在最外層組件加類名

<template>
  <div class="input-container">
    <el-input class="name-input"></el-input>
  </div>
</template>

<style lang="scss">
.input-container {
  .name-input {
    .el-input__inner {
      font-size: 16px;
    }
  }
}
</style>

5、注釋規范

以 / 注釋內容 / 格式注釋 前后空格 嵌套子類需要一個回車分割開

/* 注釋內容 */
.class-name {
  width: 20px;
  
   /* 這里需要換行 */
  .class-name-l {
    color: blue
  }
}

JS規范

1、用法規范

1. 在vue-cli 腳手架使用架自帶的指向 src 開發目錄的 '@' 符號引入文件資源
2. 使用 template 或計算屬性規避 v-if 和 v-for 用在一起
3. 統一使用單引號
4. 堅持單一原則 函數內僅做該函數應該做的 盡量避免通過傳入標記控制不同行為
5. 優先考慮三目運算符 但不要寫超過3層的三目運算符
6. 對于無用代碼必須及時刪除 例如：一些調試的 console 語句、無用的棄用功能代碼
7. 請求數據的方法使用try catch 錯誤捕捉 注意執行回調

2、組件順序規范

<script>
export default {
  name: 'ExampleName',        // 這個名字推薦：大寫字母開頭駝峰法命名
  props: {},                  // Props 定義
  components: {},             // 組件定義
  directives: {},             // 指令定義
  mixins: [],                 // 混入 Mixin 定義。
  data () {                   // Data 定義。
    return {
      dataProps: ''           // Data 屬性的每一個變量都需要在后面寫注釋說明用途，就像這樣
    }
},
  computed: {},               // 計算屬性定義。
  watch: {},                  // 屬性變化監聽器。
  created () {},              // 生命鉤子函數，按照他們調用的順序。
  mounted () {},              // 掛載到元素。
  activated () {},            // 使用 keep-alive 包裹的組件激活觸發的鉤子函數。
  deactivated () {},          // 使用 keep-alive 包裹的組件離開時觸發的鉤子函數
  methods: {                  // 組件方法定義。
    publicbFunction () {}     // 公共方法的定義，可以提供外面使用
    _privateFunction () {}    // 私有方法，下劃線定義，僅供組件內使用。多單詞，注意與系統名字沖突！
  }
}
</script>

3、注釋規范

函數/方法注釋必須包含函數說明，有參數和返回值時必須使用注釋標識，它的作者, 依賴關系和兼容性信息。

1. 單行注釋：雙斜線后應跟空格，且縮進與上下文的代碼保持一致；或在行尾注釋，在行尾依然需要左右空格

// 注釋
const userID=24
const userID=12 // 注釋

2. 多行注釋：一般用于注釋難以理解的、可能存在錯誤的、邏輯強的代碼，且縮進一致

/*
 * 針對下方代碼的說明
 * 第一行太長寫第二行
 */
const aa=1

3. 函數注釋：寫明傳入參數名稱、類型推薦完整注釋以下格式

/**
 * @Description 加入購物車
 * @Author luochen_ya
 * @Date 2024-03-13
 * @param {Number} goodId 商品id
 * @param {Array<Number>} specs sku規格
 * @param {Number} amount 數量
 * @param {String} remarks 備注
 * @returns <Promise> 購物車信息
 */
apiProductAddCard=(goodId, specs, amount, remarks)=> {
  return axios.post('***', { goodId, specs, amount, remarks })
}

4. 文件注釋：寫明文件描述

/**
 * @Description: 文件描述
 * @Author: luochen_ya
 * @Date: 2024-03-13
 */

命名規范

1、目錄命名

按照小駝峰命名 首字母小寫

1. 項目文件夾：projectName
2. 樣式文件夾：css / scss
3. 腳本文件夾：js

2、圖片命名

圖片就是img開頭 圖標就是icon開頭

1. img_功能_模塊_編號
2. icon_功能_模塊_編號

3、文件命名

1. 按照小駝峰命令 英文單詞過長或超出2個以上 可縮略至前四位 列如：comming_soon.png 等
2. 有復數含義 采用復數命名 列如：minixs styles images icons 等
3. 靜態資源命名格式為小寫 + 下劃線 列如：icon_arrow.png img_logo.png 等
4. 組件命名為小駝峰 公用組件加上gd前綴 列如：gdOwnerComponents 等

4、方法命名

method 方法命名不同于文件命名，盡量完整英文命名，語義表達需完整清楚

1. 按照小駝峰命名法 可使用常見動詞約定

• can： 判斷是否可執行某個動作 函數返回一個布爾值 true可執行 false不可執行
• has： 判斷是否含有某個值 函數返回一個布爾值 true含有此值 false不含有此值
• is： 判斷是否為某個值，函數返回一個布爾值 true為某個值 false不為某個值
• get： 獲取某個值 函數返回一個非布爾值
• set： 設置某個值 無返回值或者返回是否加載完成的結果

2. 語義化英文命名 僅組件內部使用方法前加上_（下劃線）區分

<script>
export default {
  methods: { // 組件方法定義
    publicbFunction () {} // 公共方法的定義 可以提供外面使用
    _privateFunction () {} // 私有方法 下劃線定義 僅供組件內使用
  }
}
</script>

3. 引入組件：首字母大寫的駝峰法命名

import MyOwnerComponents from '@/components/MyOwnerComponents'

4. 變量：使用駝峰式命名 優先使用 let const 避免使用 var

let userName='luochen_ya'
const userInfo={
  name: 'luochen_ya',
  age: 24
}

5. 常量：字母全部大寫 以下橫線 _ 劃分

const Constant={
  // 公用狀態
  COMMON_STATUS_ENABLE=1, // 啟用
  COMMON_STATUS_DISABLE=2, // 停用
}

5、樣式命名

class命名以小寫字母開頭 小寫字母、中劃線和數字組成 以下是一些常用到的 class的名字

1. 包裹層: .xxx-wrap
2. 列表: .xxx-list
3. 列表項: .xxx-list-item
4. 左邊內容: .xxx-left
5. 中間內容: .xxx-middle
6. 右邊內容: .xxx-right
7. 某個頁面：.xxx-page

6、常用詞

1. 常用動詞

• get=> 取值
• set=> 給值
• add=> 新增
• remove=> 移除
• show=> 顯示
• hide=> 隱藏
• view=> 查看
• browse=> 瀏覽
• edit=> 修改
• save=> 保存
• delete=> 刪除
• find=> 查詢
• undo=> 撤銷
• redo=> 重做
• clean=> 清除
• index=> 索引
• observe=> 觀察
• send=> 發送
• receive=> 接收
• refresh=> 刷新
• synchronize=> 同步

2. 常用縮寫

• object=> obj
• array=> arr
• function=> fn
• message=> msg
• button=> btn

工程結構

1、目錄構建

├── api                       所有api接口
├── assets                    靜態資源
│   ├── fonts                   全局公用字體
│   ├── icons                   全局公用圖標
│   ├── images                  全局公用圖片
│   └── styles                  全局公用樣式
├── components                公用組件
│   ├── base                    基礎組件
│   └── business                業務組件
├── constants                 常量 統一管理
├── locales                   多語言管理
├── plugins                   插件 統一管理
├── router                    路由 統一管理
│   └── index.js               
├── store                     vuex 統一管理
│   ├── modules                 
│   ├── getters.js              
│   └── index.js                
├── utils                     工具函數 統一管理
├── views                     視圖目錄（所有業務邏輯的頁面）

2、代碼風格

可以直接使用eslint 強制統一代碼規范 還能規避一些語法錯誤 或者按照以下自己定義的去配置eslint來使用
以下是個人習慣 僅供參考

1. 首行縮進2空格
2. js代碼去除分號
3. html代碼超出255字符一行進行換行操作
4. js代碼統一使用單引號或雙引號

頁的生命周期長的，更需要特別注意后期的可維護性。「欲求其上而得中,欲求其中而得下」

https://www.kwgg2020.com/

HTML規范

頁面語言lang

推薦使用屬性值 cmn-Hans-CN（簡體, 中國大陸），
但是考慮瀏覽器和操作系統的兼容性，目前仍然使用 zh-CN 屬性值 <html lang="zh-CN">
lang="en" 表示此頁面定位為英文網頁，這都是給搜索引擎看的，
你的站點是中文站，對html本身不會有影響，現在都講究html規范，你的頁面越規范，就越容易被收錄

細節決定成敗，耐心鑄造不朽

//html 標簽
標簽必須合法且閉合、嵌套正確，標簽名需小寫
標簽語法無錯誤，需要符合語義化
標簽的自定義屬性以data-開頭，如：<a href="#" data-num='18'></a>
除非有特定的功能、組件要求等，禁止隨意使用id來定義元素樣式

//鏈接
給 <a> 標簽加上title屬性
<a>標簽的href屬性必須寫上鏈接地址，暫無的加上javascript：alert('敬請期待！')
非本專題的頁面間跳轉，采用打開新窗口模式：target="_blank"

//https協議自適應
//將調用靜態域名 ossweb-img.qq.com 以及 game.gtimg.cn 的外部請求，
//寫法上一律去掉協議http:部分，采用自適應的寫法。具體方法如下：
<style>
.bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;}
</style>
//鏈接URL
<a href="//cf.qq.com/main.shtml">進入官網</a>
//圖片SRC
<img src="//game.gtimg.cn/images/logo.png">
//JS鏈接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>
  
//flash
  頁面禁止使用flash，動畫使用video，css3，canvas等，低版本瀏覽器使用背景圖片降級。

css規范

//選擇器
CSS類名命名
禁止使用層級過深的選擇器，最多3級。
除非有特定的功能、組件要求等，禁止隨意使用id來定義元素樣式
除非是樣式reset需要，禁止對純元素選擇器設置特定樣式，避免樣式污染

//reset.css
a, img {-webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */}
html, body {
    -webkit-user-select: none;   /* 禁止選中文本（如無文本選中需求，此為必選項） */
    user-select: none;
}

//移動端字體
移動端頁面不支持微軟雅黑，宋體等中文字體，終端瀏覽器字體取決于設備上的系統字體。
那么在移動端h5如何定義字體呢font-family呢，一般會用@font-face定義微軟雅黑字體并
存到web服務器上，在需要使用時被自動下載，但這樣操作很消耗用戶流量 

//##ios系統
默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體

//##android 系統
默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體

//各個手機都有自己的默認字體，一般不支持我們常用字體，比如微軟雅黑等，
除非特殊要求，一般手機無需定義中文字體，使用系統默認即可。
英文和數字字體可以使用 Helvetica都支持。
/* 移動端定義字體的代碼 */
body{font-family:Helvetica;}

圖片處理

//圖片優化
圖片體積不能超過300K
JPG圖片必須壓縮，一般80%品質即可，保證文字清晰
JPG圖片必須使用漸進式圖片：使用Photoshop的“存儲為web所用格式”時候，勾選“連續”
透明PNG圖片必須使用壓縮工具壓縮后提供

//圖片標簽
PC端img圖片必須填寫width、height、alt屬性
移動端必須填寫alt屬性
alt不能為無意義字符，需要能表現出圖片的含義，如圖片為道具圖，則應該為道具的名稱

//合理切圖
裝飾性圖片合并成精靈圖，減少頁面請求

注釋與命名