一、命名規範
代碼中的命名需語義化，優先使用英文命名，實在想不到可用拼音全拼命名。嚴禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。注意，即使純拼音命名方式也要避免采用。
常見的命名規則有以下幾種：
- 小寫字母+中劃線，例如：boor-admin
- 小寫字母+下劃線，例如：node_modules
- 小駝峰命名，例如：boorAdmin
- 大駝峰命名，例如：BoorAdmin
- 常量命名，例如：BASE_URL
項目命名
全部采用小寫字母+中劃線命名。例如：
boor-admin 、 boor-micro-frontends 等。
目錄命名
同項目命名。
檔案命名
同項目命名，例如：
# good
render-dom.js
news-info.html
company-logo-dark.png
# bad
RenderDom.js
xwxq.html
gslogo.png 代碼命名
class命名
全部采用小寫字母+中劃線命名，例如：
<!-- good -->
<img class="company-logo" src="xxx" alt="xxx" />
<!-- bad -->
<img class="companyLogo" src="xxx" alt="xxx" /> scss命名
scss中的變量、函數、混入等等采用小駝峰命名,例如：
// 變量
$mainContainerWidth: 1200px;
// 函數
@function columnWidth($col, $total) {
@return percentage($col/$total);
}
// 混入
@mixin redBox {
width: 50px;
height: 50px;
background: red;
}
.box {
@include redBox;
} JS命名
// 變量使用小駝峰命名
let pageSize = 10
// 常量使用全大寫+下劃線命名
const BASE_URL = 'http://xxxx'
// 普通函數使用小駝峰命名
const getAppData = () => {}
// 構造函數、class類使用大駝峰命名，一個單詞時首字母大寫
class Person {}
/* 如果使用ts */
// 接口、枚舉、裝飾器等使用大駝峰命名，一個單詞時首字母大寫
interface StepsProps {
active: number
label: string
}
enum Color { Red, Green, Blue }
@Component 二、代碼規範
公共規範：
- 代碼統一使用2個空格縮進（一個tab），2個空格足以讓代碼有層次感。
- 一個檔案夾内不要出現沒有任何關聯的檔案。例如：config檔案夾隻存放配置檔案
- 所有頁面禁止出現前端報錯，影響頁面性能的警告也應該盡量解決。
- 所有頁面傳參不允許出現前端自定義字段參數，全部使用後端接口提供的字段，字段名在使用時也應該保持一緻，不允許同一個含義的東西寫好幾個不同字段。
Vue規範
以下模闆之類的規範同樣适用于html
- 使用H5語義化标簽。
- 結構、樣式、行為分離。禁止圖友善在标簽上直接通過style寫樣式。
- 元件的樣式必須加 scoped
- components根目錄下需要建立一個doc.md 檔案，每個元件的使用必須都有詳細文檔。更新元件時也需在文檔中備注更新細節。
- 在vue檔案中的style scoped标簽下，應當避免使用@import導入樣式,使用@import 導入的樣式不受scoped影響，依舊會作用在全局。
- 元件的封裝盡可能地少暴露參數。高内聚的元件使用起來更友善。
- 使用項目中封裝好的元件，達成頁面一緻性。如果内置元件無法完成需求再嘗試修改或增加新元件
- 元件或标簽内無内容的統一改為單标簽：
<!-- good -->
<el-input value="xxx" />
<navBar />
<!-- bad -->
<el-input value="xxx"></el-input>
<navBar></navBar> - 必須開啟eslint，并且保證每次送出沒有任何eslint警告
- 路由命名應該根據頁面的檔案或檔案夾命名。禁止出現相同name的路由。
- 路由跳轉盡可能少攜帶參數。參數傳遞隻能跨一級頁面，多級頁面需要後端重新提供參數。
- 路由必須使用懶加載機制:
// good
{
path: "/home",
component: () => import('../views/home/index.vue')
}
// bad
import Home from '../views/home/index.vue'
{
path: "/home",
component: Home
} - vuex如果做了持久化處理就不要再使用本地存儲。統一使用vuex儲存資訊。
- 減少不必要的換行，除非真的特别長(接近2屏)。換行越少一眼看到的代碼就越多，收集到的資訊也越多，提高代碼可讀性，有邏輯性相關的地方代碼過長必須換行(比如if判斷之類的)。例如：
<!-- bad -->
<el-table :data="tableData">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="位址">
</el-table-column>
</el-table>
<!-- good -->
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="位址" />
</el-table>
<!-- 原因：假如這個表格有幾十列的情況下我們需要修改某一列的資訊，第一步肯定是先找到列，再找列當中的屬性。第一種寫法，整個table元件要占幾百行代碼，一屏隻能看到4-5列的資訊，找特定列估計隻能用ctrl+F了。而換成第二種一屏起碼可以收集到15-20列的資訊，更容易找到需要修改的列。 --> - 對于複雜的頁面，不要把所有東西寫在一個.vue檔案内，導緻一個頁面幾千行代碼。對于這種複雜頁面需以一個檔案夾作為一個頁面，有複用的結構可抽離成元件，例如建立一個home檔案夾結構如下：
views
├───home
│ ├───components # 隻作用在目前頁面的元件(可選)
│ ├───index.vue
│ ├───index.js
│ └───config.js # 可選
└───other.vue 在index.vue 寫頁面結構與樣式,邏輯通過import導入
<template>
...
</template>
<script lang="ts">
import Home from './'
export default Home
</script>
<style lang="scss" scoped>
// ...
</style> 在config.js中寫一些與邏輯無關的配置項，例如表格的表頭資訊等，避免直接在data中定義，導緻幾百行的data。
export const tableHeader = [
{ label: '名稱', prop: 'name', align: 'center' },
// ...
] 在index.js 寫頁面邏輯
import { tableHeader } from './config'
export default {
data(){
return {
tableHeader,
// ...
}
},
methods:{},
// ...
} 樣式規範
- 全局樣式中禁止使用 !important ，即便是在單獨的元件中也應當避免使用 !important ，需要修改樣式最好使用選擇器提升權重。
- 盡量使用簡寫樣式，0px時去掉機關，顔色除了透明用rgba其它都用16進制。16進制顔色可簡寫時就簡寫
// bad
div {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 0px;
background-color: #000000;
}
// good
div {
padding: 5px 10px 0 0;
background-color: #000;
} - 同一個選擇器禁止在兩個不同地方出現，例如：
.wrap{
width: 100%;
}
// 中間省略部分代碼...
.wrap{
width: auto;
} - scss 中同級樣式用 & 符代替目前塊的元素,例如：
// bad
.box {
width: 100px;
}
.box.red {
color: red;
}
// good
.box {
width: 100px;
&.red {
color: red;
}
} JS規範
- 字元串盡量使用單引号
- 使用ES6+ 文法
/**
* 使用let代替var,常量使用const
* 箭頭函數隻有一個參數的時候省略括号。
*/
// bad
var num = 0
function getData(params) {...}
// good
let num = 0
const getData = params => {...} - console、debuger、alert等不要送出到代碼倉庫
- 不要有任何多餘的代碼。由于需求改變多出的代碼，必須在不影響其它功能的情況下将其相關聯的屬性、方法都得删除，沒用的代碼日積月累後面就沒法維護了。注釋的代碼如果有用的情況下寫好備注為什麼存在，并且使用TODO注釋。
- 沒用到的參數就别寫上去。特别是forEach有時候用不到index索引就沒必要寫。
- 使用三元運算符替代簡單的if判斷，但多重判斷的情況一定要優先使用if而不是三目運算符。代碼可讀性一定比代碼簡潔性的優先級要高。
- 主要的邏輯方法和屬性都得加注釋，注釋不要寫廢話，寫明方法是什麼作用，需要傳什麼參數，有什麼傳回值。
- 禁止使用 == 與 != 來做任何判斷，雖然js提供了這個對類型判斷并不嚴格的文法，但并不建議使用，很多bug都是由各種類型的隐式轉換，導緻類型不明确出現的。需使用 === 與 !== 代替它們。
- 不要無意義聲明變量，例如：
// bad
const request = () => {
let params = {
pageSize: 10,
currentPage: 1
}
getData(params)
}
// good
const request = () => getData({
pageSize: 10,
currentPage: 1
}) - 少使用不常用的隐式轉換，寫代碼不是炫技，花裡胡哨的代碼不是每個人都看得懂
- 使用async/await替代promise.then文法, 提高代碼可讀性。
![前端中的一些編碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)