CF1168A - Increasing by Modulo （貪心+二分)

阿新 • • 發佈：2021-07-17

前端程式碼規範

Front Standard Guide

前端 JS 專案開發規範

規範的目的是為了編寫高質量的程式碼，讓你的團隊成員每天得心情都是愉悅的，大家在一起是快樂的。

引自《阿里規約》的開頭片段：

----現代軟體架構的複雜性需要協同開發完成，如何高效地協同呢？無規矩不成方圓，無規範難以協同，比如，制訂交通法規表面上是要限制行車權，實際上是保障公眾的人身安全，試想如果沒有限速，沒有紅綠燈，誰還敢上路行駛。對軟體來說，適當的規範和標準絕不是消滅程式碼內容的創造性、優雅性，而是限制過度個性化，以一種普遍認可的統一方式一起做事，提升協作效率，降低溝通成本。程式碼的字裡行間流淌的是軟體系統的血液，質量的提升是儘可能少踩坑，杜絕踩重複的坑，切實提升系統穩定性，碼出質量。

一、程式設計規約

(一)命名規範

1.1.1 專案命名

全部採用小寫方式，以中劃線分隔。

正例：mall-management-system

反例：mall_management-system / mallManagementSystem

1.1.2 目錄命名

全部採用小寫方式，以中劃線分隔，有複數結構時，要採用複數命名法，縮寫不用複數

正例：scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例：script / style / demo_scripts / demoStyles / imgs / docs

【特殊】VUE 的專案中的 components 中的元件目錄，使用 kebab-case 命名

正例：head-search / page-loading / authorized / notice-icon

反例：HeadSearch / PageLoading

【特殊】VUE 的專案中的除 components 元件目錄外的所有目錄也使用 kebab-case 命名
正例：page-one / shopping-car / user-management

反例：ShoppingCar / UserManagement

1.1.3 JS、CSS、SCSS、HTML、PNG 檔案命名

全部採用小寫方式，以中劃線分隔

正例：render-dom.js / signup.css / index.html / company-logo.png

反例：renderDom.js / UserManagement.html

1.1.4 命名嚴謹性

程式碼中的命名嚴禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。說明：正確的英文拼寫和語法可以讓閱讀者易於理解，避免歧義。注意，即使純拼音命名方式也要避免採用

正例：henan / luoyang / rmb 等國際通用的名稱，可視同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [評分] / int 某變數 = 3

杜絕完全不規範的縮寫，避免望文不知義：

反例：AbstractClass“縮寫”命名成 AbsClass；condition“縮寫”命名成 condi，此類隨意縮寫嚴重降低了程式碼的可閱讀性。

(二)HTML 規範（Vue Template 同樣適用）

1.2.1 HTML 型別

推薦使用 HTML5 的文件型別申明： .
（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支援與優化空間都十分有限）。

規定字元編碼
IE 相容模式
規定字元編碼
doctype 大寫

正例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

1.2.2 縮排

縮排使用 2 個空格（一個 tab）

巢狀的節點應該縮排。

1.2.3 分塊註釋

在每一個塊狀元素，列表元素和表格元素後，加上一對 HTML 註釋。註釋格式

```

1.2.4 語義化標籤

HTML5 中新增很多語義化標籤，所以優先使用語義化標籤，避免一個頁面都是 div 或者 p 標籤

正例

<header></header>
<footer></footer>

反例

<div>
  <p></p>
</div>

1.2.5 引號

使用雙引號(" ") 而不是單引號(’ ') 。

正例： ``

反例： ``

(三) CSS 規範

1.3.1 命名

類名使用小寫字母，以中劃線分隔
id 採用駝峰式命名
scss 中的變數、函式、混合、placeholder 採用駝峰式命名

ID 和 class 的名稱總是使用可以反應元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱

不推薦：

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}

1.3.2 選擇器

1)css 選擇器中避免使用標籤名
從結構、表現、行為分離的原則來看，應該儘量避免 css 中出現 HTML 標籤，並且在 css 選擇器中出現標籤名會存在潛在的問題。

2)很多前端開發人員寫選擇器鏈的時候不使用直接子選擇器（注：直接子選擇器和後代選擇器的區別）。有時，這可能會導致疼痛的設計問題並且有時候可能會很耗效能。然而，在任何情況下，這是一個非常不好的做法。如果你不寫很通用的，需要匹配到 DOM 末端的選擇器，你應該總是考慮直接子選擇器。

不推薦:

.content .title {
  font-size: 2rem;
}

1.3.3 儘量使用縮寫屬性

不推薦：

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;

推薦：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

1.3.4 每個選擇器及屬性獨佔一行

不推薦：

button{
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

推薦：

button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

1.3.5 省略0後面的單位

不推薦：

div{
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

div{
  padding-bottom: 0;
  margin: 0;
}

1.3.6 避免使用ID選擇器及全域性標籤選擇器防止汙染全域性樣式

不推薦：

#header{
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

.header{
  padding-bottom: 0px;
  margin: 0em;
}

(四) LESS 規範

1.4.1 程式碼組織

1)將公共less檔案放置在style/less/common資料夾

例:// color.less,common.less

2)按以下順序組織

1、@import;
2、變數宣告;
3、樣式宣告;

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

1.4.2 避免巢狀層級過多

將巢狀深度限制在3級。對於超過4級的巢狀，給予重新評估。這可以避免出現過於詳實的CSS選擇器。
避免大量的巢狀規則。當可讀性受到影響時，將之打斷。推薦避免出現多於20行的巢狀規則出現

不推薦：

.main{
  .title{
    .name{
       color:#fff
    }
  }
}

推薦：

.main-title{
   .name{
      color:#fff
   }
}

(五) Javascript 規範

1.5.1 命名

1) 採用小寫駝峰命名 lowerCamelCase，程式碼中的命名均不能以下劃線，也不能以下劃線或美元符號結束

反例：_name / name_ / name$

2) 方法名、引數名、成員變數、區域性變數都統一使用 lowerCamelCase 風格，必須遵從駝峰形式。

正例：localValue / getHttpMessage() / inputUserId

*其中 method 方法命名必須是動詞或者動詞+名詞形式*

正例：saveShopCarData /openShopCarInfoDialog

反例：save / open / show / go

*特此說明，增刪查改，詳情統一使用如下 5 個單詞，不得使用其他（目的是為了統一各個端）*

add / update / delete / detail / get

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

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 聚集

3) 常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長。

正例：MAX_STOCK_COUNT

反例：MAX_COUNT

1.5.2 程式碼格式

1) 使用 2 個空格進行縮排

正例：

if (x < y) {
  x += 10;
} else {
  x += 1;
}

2) 不同邏輯、不同語義、不同業務的程式碼之間插入一個空行分隔開來以提升可讀性。

說明：任何情形，沒有必要插入多個空行進行隔開。

1.5.3 字串

統一使用單引號(‘)，不使用雙引號(“)。這在建立 HTML 字串非常有好處：

正例:

let str = 'foo';
let testDiv = '<div id="test"></div>';

反例:

let str = 'foo';
let testDiv = "<div id='test'></div>";

1.5.4 物件宣告

1)使用字面值建立物件

正例：let user = {};

反例：let user = new Object();

2) 使用字面量來代替物件構造器

正例：

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

1.5.5 使用 ES6,7

必須優先使用 ES6,7 中新增的語法糖和函式。這將簡化你的程式，並讓你的程式碼更加靈活和可複用。

必須強制使用 ES6, ES7 的新語法，比如箭頭函式、await/async ，解構， let ， for…of 等等

1.5.6 括號

下列關鍵字後必須有大括號（即使程式碼塊的內容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

正例：

if (condition) {
  doSomething();
}

反例：

if (condition) doSomething();

1.5.7 undefined 判斷

永遠不要直接使用 undefined 進行變數判斷；使用 typeof 和字串’undefined’對變數進行判斷。

正例：

if (typeof person === 'undefined') {
    ...
}

反例：

if (person === undefined) {
    ...
}

1.5.8 條件判斷和迴圈最多三層

條件判斷能使用三目運算子和邏輯運算子解決的，就不要使用條件判斷，但是謹記不要寫太長的三目運算子。如果超過 3 層請抽成函式，並寫清楚註釋。

1.5.9 this 的轉換命名

對上下文 this 的引用只能使用’self’來命名

1.5.10 慎用 console.log

因 console.log 大量使用會有效能問題，所以在非 webpack 專案中謹慎使用 log 功能

二、Vue 專案規範

(一) Vue 編碼基礎

vue 專案規範以 Vue 官方規範（https://cn.vuejs.org/v2/style-guide/）中的 A 規範為基礎，在其上面進行專案開發，故所有程式碼均遵守該規範。

請仔仔細細閱讀 Vue 官方規範，切記，此為第一步。

2.1.1. 元件規範

1) 元件名為多個單詞。

元件名應該始終是多個單片語成（大於等於 2），且命名規範為KebabCase格式。
這樣做可以避免跟現有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的。

正例：

export default {
  name: 'TodoItem'
  // ...
};

反例：

export default {
  name: 'Todo',
  // ...
}
export default {
  name: 'todo-item',
  // ...
}

2) 元件檔名為 pascal-case 格式

正例：

components/
|- my-component.vue

反例：

components/
|- myComponent.vue
|- MyComponent.vue

3) 基礎元件檔名為 base 開頭，使用完整單詞而不是縮寫。

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

4) 和父元件緊密耦合的子元件應該以父元件名作為字首命名

正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）

反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了縮寫）

5) 在 Template 模版中使用元件，應使用 PascalCase 模式，並且使用自閉合元件。

正例：

<!-- 在單檔案元件、字串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data"/></Row>

反例：

<my-component /> <row><table :column="data"/></row>

6) 元件的 data 必須是一個函式

當在元件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個物件的函式。因為如果直接是一個物件的話，子元件之間的屬性值會互相影響。

正例：

export default {
  data () {
    return {
      name: 'jack'
    }
  }
}

反例：

export default {
  data: {
    name: 'jack'
  }
}

7) Prop 定義應該儘量詳細

必須使用 camelCase 駝峰命名
必須指定型別
必須加上註釋，表明其含義
必須加上 required 或者 default，兩者二選其一
如果有業務需要，必須加上 validator 驗證

正例：

 props: {
  // 元件狀態，用於控制組件的顏色
   status: {
     type: String,
     required: true,
     validator: function (value) {
       return [
         'succ',
         'info',
         'error'
       ].indexOf(value) !== -1
     }
   },
    // 使用者級別，用於顯示皇冠個數
   userLevel：{
      type: String,
      required: true
   }
}

8) 為元件樣式設定作用域

正例：

<template>
  <button class="btn btn-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
  .btn-close {
    background-color: red;
  }
</style>

反例：

<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 沒有使用 `scoped` 特性 -->
<style>
  .btn-close {
    background-color: red;
  }
</style>

9) 如果特性元素較多，應該主動換行。

正例：

<MyComponent foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
 />

反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>

2.1.2. 模板中使用簡單的表示式

元件模板應該只包含簡單的表示式，複雜的表示式則應該重構為計算屬性或方法。複雜表示式會讓你的模板變得不那麼宣告式。我們應該儘量描述應該出現的是什麼，而非如何計算那個值。而且計算屬性和方法使得程式碼可以重用。

正例：

<template>
  <p>{{ normalizedFullName }}</p>
</template>

// 複雜表示式已經移入一個計算屬性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例：

<template>
  <p>
       {{
          fullName.split(' ').map(function (word) {
             return word[0].toUpperCase() + word.slice(1)
           }).join(' ')
        }}
  </p>
</template>

2.1.3 指令都使用縮寫形式

指令推薦都使用縮寫形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

正例：

<input
  @input="onInput"
  @focus="onFocus"
>

反例：

<input
  v-on:input="onInput"
  @focus="onFocus"
>

2.1.4 標籤順序保持一致

單檔案元件應該總是讓標籤順序保持為 `

正例：

<template>...</template>
<script>...</script>
<style>...</style>

反例：

<template>...</template>
<style>...</style>
<script>...</script>

2.1.5 必須為 v-for 設定鍵值 key

2.1.6 v-show 與 v-if 選擇

如果執行時，需要非常頻繁地切換，使用 v-show ；如果在執行時，條件很少改變，使用 v-if。

2.1.7 script 標籤內部結構順序

components > props > data > computed > watch > filter > 鉤子函式（鉤子函式按其執行順序） > methods

2.1.8 Vue Router 規範

1) 頁面跳轉資料傳遞使用路由引數

頁面跳轉，例如 A 頁面跳轉到 B 頁面，需要將 A 頁面的資料傳遞到 B 頁面，推薦使用路由引數進行傳參，而不是將需要傳遞的資料儲存 vuex，然後在 B 頁面取出 vuex 的資料，因為如果在 B 頁面重新整理會導致 vuex 資料丟失，導致 B 頁面無法正常顯示資料。

正例：

let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });

2) 使用路由懶載入（延遲載入）機制

    {
        path: '/uploadAttachment',
        name: 'uploadAttachment',
        meta: {
          title: '上傳附件'
        },
        component: () => import('@/view/components/uploadAttachment/index.vue')
      },

3) router 中的命名規範

path、childrenPoints 命名規範採用kebab-case命名規範（儘量vue檔案的目錄結構保持一致，因為目錄、檔名都是kebab-case，這樣很方便找到對應的檔案）

name 命名規範採用KebabCase命名規範且和component元件名保持一致！（因為要保持keep-alive特性，keep-alive按照component的name進行快取，所以兩者必須高度保持一致）

// 動態載入
export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: Main,
    meta: {
      title: '動態載入',
      icon: 'icon iconfont'
    },

    children: [
      {
        path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
          title: 'SmartReload',
          childrenPoints: [
            {
              title: '查詢',
              name: 'smart-reload-search'
            },
            {
              title: '執行reload',
              name: 'smart-reload-update'
            },
            {
              title: '檢視執行結果',
              name: 'smart-reload-result'
            }
          ]
        },
        component: () =>
          import('@/views/reload/smart-reload/smart-reload-list.vue')
      }
    ]
  }
];

4) router 中的 path 命名規範

path除了採用kebab-case命名規範以外，必須以 / 開頭，即使是children裡的path也要以 / 開頭。如下示例

目的：

經常有這樣的場景：某個頁面有問題，要立刻找到這個vue檔案，如果不用以/開頭，path為parent和children組成的，可能經常需要在router檔案裡搜尋多次才能找到，而如果以/開頭，則能立刻搜尋到對應的元件
*

{
    path: '/file',
    name: 'File',
    component: Main,
    meta: {
      title: '檔案服務',
      icon: 'ios-cloud-upload'
    },
    children: [
      {
        path: '/file/file-list',
        name: 'FileList',
        component: () => import('@/views/file/file-list.vue')
      },
      {
        path: '/file/file-add',
        name: 'FileAdd',
        component: () => import('@/views/file/file-add.vue')
      },
      {
        path: '/file/file-update',
        name: 'FileUpdate',
        component: () => import('@/views/file/file-update.vue')
      }
    ]
  }

(二) Vue 專案目錄規範

2.2.1 基礎

vue 專案中的所有命名一定要與後端命名統一。

比如許可權：後端 privilege, 前端無論 router , store, api 等都必須使用 privielege 單詞！

2.2.2 使用 Vue-cli 腳手架

使用 vue-cli3 來初始化專案，專案名按照上面的命名規範。

2.2.3 目錄說明

目錄名按照上面的命名規範，其中 components 元件用大寫駝峰，其餘除 components 元件目錄外的所有目錄均使用 kebab-case 命名。

src                               原始碼目錄
|-- api                              所有api介面
|-- assets                           靜態資源，images, icons, styles等
|-- components                       公用元件
|-- config                           配置資訊
|-- constants                        常量資訊，專案所有Enum, 全域性常量等
|-- directives                       自定義指令
|-- filters                          過濾器，全域性工具
|-- datas                            模擬資料，臨時存放
|-- lib                              外部引用的外掛存放及修改檔案
|-- mock                             模擬介面，臨時存放
|-- plugins                          外掛，全域性使用
|-- router                           路由，統一管理
|-- store                            vuex, 統一管理
|-- themes                           自定義樣式主題
|-- views                            檢視目錄
|   |-- role                             role模組名
|   |-- |-- role-list.vue                    role列表頁面
|   |-- |-- role-add.vue                     role新建頁面
|   |-- |-- role-update.vue                  role更新頁面
|   |-- |-- index.less                      role模組樣式
|   |-- |-- components                      role模組通用元件資料夾
|   |-- employee                         employee模組

1) api 目錄

檔案、變數命名要與後端保持一致。
此目錄對應後端 API 介面，按照後端一個 controller 一個 api js 檔案。若專案較大時，可以按照業務劃分子目錄，並與後端保持一致。
api 中的方法名字要與後端 api url 儘量保持語義高度一致性。
對於 api 中的每個方法要添加註釋，註釋與後端 swagger 文件保持一致。

正例：

後端 url： EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update

前端： employee.js

  // 新增員工
  addEmployee: (data) => {
    return postAxios('/employee/add', data)
  },
  // 更新員工資訊
  updateEmployee: (data) => {
    return postAxios('/employee/update', data)
  },
    // 刪除員工
  deleteEmployee: (employeeId) => {
    return postAxios('/employee/delete/' + employeeId)
   },

2) assets 目錄

assets 為靜態資源，裡面存放 images, styles, icons 等靜態資源，靜態資源命名格式為 kebab-case

|assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- styles

3) components 目錄

此目錄應按照元件進行目錄劃分，目錄命名為 KebabCase，元件命名規則也為 KebabCase

|components
|-- error-log
|   |-- index.vue
|   |-- index.less
|-- markdown-editor
|   |-- index.vue
|   |-- index.js
|-- kebab-case

4) constants 目錄

此目錄存放專案所有常量，如果常量在 vue 中使用，請使用 vue-enum 外掛(https://www.npmjs.com/package/vue-enum)

目錄結構：

|constants
|-- index.js
|-- role.js
|-- employee.js

例子： employee.js

export const EMPLOYEE_STATUS = {
  NORMAL: {
    value: 1,
    desc: '正常'
  },
  DISABLED: {
    value: 1,
    desc: '禁用'
  },
  DELETED: {
    value: 2,
    desc: '已刪除'
  }
};

export const EMPLOYEE_ACCOUNT_TYPE = {
  QQ: {
    value: 1,
    desc: 'QQ登入'
  },
  WECHAT: {
    value: 2,
    desc: '微信登入'
  },
  DINGDING: {
    value: 3,
    desc: '釘釘登入'
  },
  USERNAME: {
    value: 4,
    desc: '使用者名稱密碼登入'
  }
};

export default {
  EMPLOYEE_STATUS,
  EMPLOYEE_ACCOUNT_TYPE
};

5) router 與 store 目錄

這兩個目錄一定要將業務進行拆分，不能放到一個 js 檔案裡。

router 儘量按照 views 中的結構保持一致

store 按照業務進行拆分不同的 js 檔案

6) views 目錄

命名要與後端、router、api 等保持一致
components 中元件要使用 PascalCase 規則

|-- views                            檢視目錄
|   |-- role                             role模組名
|   |   |-- role-list.vue                    role列表頁面
|   |   |-- role-add.vue                     role新建頁面
|   |   |-- role-update.vue                  role更新頁面
|   |   |-- index.less                      role模組樣式
|   |   |-- components                      role模組通用元件資料夾
|   |   |   |-- role-header.vue                        role頭部元件
|   |   |   |-- role-modal.vue                         role彈出框元件
|   |-- employee                         employee模組
|   |-- behavior-log                      行為日誌log模組
|   |-- code-generator                    程式碼生成器模組

2.2.4 註釋說明

整理必須加註釋的地方

公共元件使用說明
api 目錄的介面 js 檔案必須加註釋
store 中的 state, mutation, action 等必須加註釋
vue 檔案中的 template 必須加註釋，若檔案較大新增 start end 註釋
vue 檔案的 methods，每個 method 必須添加註釋
vue 檔案的 data, 非常見單詞要加註釋

2.2.5 其他

1) 儘量不要手動操作 DOM

因使用 vue 框架，所以在專案開發中儘量使用 vue 的資料驅動更新 DOM，儘量（不到萬不得已）不要手動操作 DOM，包括：增刪改 dom 元素、以及更改樣式、新增事件等。

2) 刪除無用程式碼

因使用了 git/svn 等程式碼版本工具，對於無用程式碼必須及時刪除，例如：一些除錯的 console 語句、無用的棄用功能程式碼。

CF1168A - Increasing by Modulo （貪心+二分)

前端程式碼規範

前端 JS 專案開發規範

一、程式設計規約

(一)命名規範

1.1.1 專案命名

1.1.2 目錄命名

1.1.3 JS、CSS、SCSS、HTML、PNG 檔案命名

1.1.4 命名嚴謹性

(二)HTML 規範 （Vue Template 同樣適用）

1.2.1 HTML 型別

1.2.2 縮排

1.2.3 分塊註釋

1.2.4 語義化標籤

1.2.5 引號

(三) CSS 規範

1.3.1 命名

1.3.2 選擇器

1.3.3 儘量使用縮寫屬性

1.3.4 每個選擇器及屬性獨佔一行

1.3.5 省略0後面的單位

1.3.6 避免使用ID選擇器及全域性標籤選擇器防止汙染全域性樣式

(四) LESS 規範

1.4.1 程式碼組織

1)將公共less檔案放置在style/less/common資料夾

2)按以下順序組織

1.4.2 避免巢狀層級過多

(五) Javascript 規範

1.5.1 命名

1) 採用小寫駝峰命名 lowerCamelCase，程式碼中的命名均不能以下劃線，也不能以下劃線或美元符號結束

2) 方法名、引數名、成員變數、區域性變數都統一使用 lowerCamelCase 風格，必須遵從駝峰形式。

3) 常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長。

1.5.2 程式碼格式

1) 使用 2 個空格進行縮排

2) 不同邏輯、不同語義、不同業務的程式碼之間插入一個空行分隔開來以提升可讀性。

1.5.3 字串

1.5.4 物件宣告

1)使用字面值建立物件

2) 使用字面量來代替物件構造器

1.5.5 使用 ES6,7

1.5.6 括號

1.5.7 undefined 判斷

1.5.8 條件判斷和迴圈最多三層

1.5.9 this 的轉換命名

1.5.10 慎用 console.log

二、Vue 專案規範

(一) Vue 編碼基礎

2.1.1. 元件規範

1) 元件名為多個單詞。

2) 元件檔名為 pascal-case 格式

3) 基礎元件檔名為 base 開頭，使用完整單詞而不是縮寫。

4) 和父元件緊密耦合的子元件應該以父元件名作為字首命名

5) 在 Template 模版中使用元件，應使用 PascalCase 模式，並且使用自閉合元件。

6) 元件的 data 必須是一個函式

7) Prop 定義應該儘量詳細

8) 為元件樣式設定作用域

9) 如果特性元素較多，應該主動換行。

2.1.2. 模板中使用簡單的表示式

2.1.3 指令都使用縮寫形式

2.1.4 標籤順序保持一致

2.1.5 必須為 v-for 設定鍵值 key

2.1.6 v-show 與 v-if 選擇

2.1.7 script 標籤內部結構順序

2.1.8 Vue Router 規範

1) 頁面跳轉資料傳遞使用路由引數

2) 使用路由懶載入（延遲載入）機制

3) router 中的命名規範

4) router 中的 path 命名規範

(二) Vue 專案目錄規範

2.2.1 基礎

2.2.2 使用 Vue-cli 腳手架

2.2.3 目錄說明

1) api 目錄

2) assets 目錄

3) components 目錄

4) constants 目錄

5) router 與 store 目錄

6) views 目錄

2.2.4 註釋說明

2.2.5 其他

(二)HTML 規範（Vue Template 同樣適用）