2023前端編碼規(guī)范
一、命名規(guī)范
代碼中的命名需語義化，優(yōu)先使用英文命名，實(shí)在想不到可用拼音全拼命名。嚴(yán)禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。注意，即使純拼音命名方式也要避免采用。
常見的命名規(guī)則有以下幾種：
小寫字母+中劃線，例如：
boor-admin小寫字母+下劃線，例如：
node_modules小駝峰命名，例如：
boorAdmin大駝峰命名，例如：
BoorAdmin常量命名，例如：
BASE_URL
項(xiàng)目命名
全部采用小寫字母+中劃線命名。例如：
boor-admin ?、 boor-micro-frontends 等。
目錄命名
同項(xiàng)目命名。
文件命名
同項(xiàng)目命名，例如：
?# 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中的變量、函數(shù)、混入等等采用小駝峰命名,例如：
?// 變量
?$mainContainerWidth: 1200px;
?// 函數(shù)
?@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'
?// 普通函數(shù)使用小駝峰命名
?const getAppData = () => {}
?// 構(gòu)造函數(shù)、class類使用大駝峰命名，一個(gè)單詞時(shí)首字母大寫
?class Person {}
?
?/* 如果使用ts */
?// 接口、枚舉、裝飾器等使用大駝峰命名，一個(gè)單詞時(shí)首字母大寫
?interface StepsProps {
? ?active: number
? ?label: string
?}
?enum Color { Red, Green, Blue }
?@Component
二、代碼規(guī)范
公共規(guī)范：
代碼統(tǒng)一使用2個(gè)空格縮進(jìn)（一個(gè)tab），2個(gè)空格足以讓代碼有層次感。
一個(gè)文件夾內(nèi)不要出現(xiàn)沒有任何關(guān)聯(lián)的文件。例如：config文件夾只存放配置文件
所有頁(yè)面禁止出現(xiàn)前端報(bào)錯(cuò)，影響頁(yè)面性能的警告也應(yīng)該盡量解決。
所有頁(yè)面?zhèn)鲄⒉辉试S出現(xiàn)前端自定義字段參數(shù)，全部使用后端接口提供的字段，字段名在使用時(shí)也應(yīng)該保持一致，不允許同一個(gè)含義的東西寫好幾個(gè)不同字段。
Vue規(guī)范
以下模板之類的規(guī)范同樣適用于html
使用H5語義化標(biāo)簽。
結(jié)構(gòu)、樣式、行為分離。禁止圖方便在標(biāo)簽上直接通過style寫樣式。
組件的樣式必須加
scopedcomponents根目錄下需要?jiǎng)?chuàng)建一個(gè)
doc.md文件，每個(gè)組件的使用必須都有詳細(xì)文檔。更新組件時(shí)也需在文檔中備注更新細(xì)節(jié)。在
vue文件中的style scoped標(biāo)簽下，應(yīng)當(dāng)避免使用@import導(dǎo)入樣式,使用@import導(dǎo)入的樣式不受scoped影響，依舊會(huì)作用在全局。組件的封裝盡可能地少暴露參數(shù)。高內(nèi)聚的組件使用起來更方便。
使用項(xiàng)目中封裝好的組件，達(dá)成頁(yè)面一致性。如果內(nèi)置組件無法完成需求再嘗試修改或增加新組件
組件或標(biāo)簽內(nèi)無內(nèi)容的統(tǒng)一改為單標(biāo)簽：
?<!-- good -->
?<el-input value="xxx" />
?<navBar />
?<!-- bad -->
?<el-input value="xxx"></el-input>
?<navBar></navBar>必須開啟eslint，并且保證每次提交沒有任何eslint警告
路由命名應(yīng)該根據(jù)頁(yè)面的文件或文件夾命名。禁止出現(xiàn)相同name的路由。
路由跳轉(zhuǎn)盡可能少攜帶參數(shù)。參數(shù)傳遞只能跨一級(jí)頁(yè)面，多級(jí)頁(yè)面需要后端重新提供參數(shù)。
路由必須使用懶加載機(jī)制:
?// good
?{
? ?path: "/home",
? ?component: () => import('../views/home/index.vue')
?}
?
?// bad
?import Home from '../views/home/index.vue'
?{
? ?path: "/home",
? ?component: Home
?}vuex如果做了持久化處理就不要再使用本地存儲(chǔ)。統(tǒng)一使用vuex儲(chǔ)存信息。
減少不必要的換行，除非真的特別長(zhǎng)(接近2屏)。換行越少一眼看到的代碼就越多，收集到的信息也越多，提高代碼可讀性，有邏輯性相關(guān)的地方代碼過長(zhǎng)必須換行(比如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>
?<!-- 原因：假如這個(gè)表格有幾十列的情況下我們需要修改某一列的信息，第一步肯定是先找到列，再找列當(dāng)中的屬性。第一種寫法，整個(gè)table組件要占幾百行代碼，一屏只能看到4-5列的信息，找特定列估計(jì)只能用ctrl+F了。而換成第二種一屏起碼可以收集到15-20列的信息，更容易找到需要修改的列。 -->
對(duì)于復(fù)雜的頁(yè)面，不要把所有東西寫在一個(gè)
?views.vue文件內(nèi)，導(dǎo)致一個(gè)頁(yè)面幾千行代碼。對(duì)于這種復(fù)雜頁(yè)面需以一個(gè)文件夾作為一個(gè)頁(yè)面，有復(fù)用的結(jié)構(gòu)可抽離成組件，例如創(chuàng)建一個(gè)home文件夾結(jié)構(gòu)如下：
?├───home
?│ ? ├───components # 只作用在當(dāng)前頁(yè)面的組件(可選)
?│ ? ├───index.vue
?│ ? ├───index.js
?│ ? └───config.js # 可選
?└───other.vue在
?<template>index.vue寫頁(yè)面結(jié)構(gòu)與樣式,邏輯通過import導(dǎo)入
? ?...
?</template>
?<script lang="ts">
?import Home from './'
?export default Home
?</script>
?<style lang="scss" scoped>
?// ...
?</style>在
?export const tableHeader = [config.js中寫一些與邏輯無關(guān)的配置項(xiàng)，例如表格的表頭信息等，避免直接在data中定義，導(dǎo)致幾百行的data。
? ?{ label: '名稱', prop: 'name', align: 'center' },
? ?// ...
?]在
?import { tableHeader } from './config'index.js寫頁(yè)面邏輯
?export default {
? ?data(){
? ? ?return {
? ? ? ?tableHeader,
? ? ? ?// ...
? ? ?}
? ?},
? ?methods:{},
? ?// ...
?}
樣式規(guī)范
全局樣式中禁止使用
!important，即便是在單獨(dú)的組件中也應(yīng)當(dāng)避免使用!important，需要修改樣式最好使用選擇器提升權(quán)重。盡量使用簡(jiǎn)寫樣式，0px時(shí)去掉單位，顏色除了透明用rgba其它都用16進(jìn)制。16進(jìn)制顏色可簡(jiǎn)寫時(shí)就簡(jiǎn)寫
?// bad
?div {
? ?padding-top: 5px;
? ?padding-right: 10px;
? ?padding-bottom: 0px;
? ?background-color: #000000;
?}
?
?// good
?div {
? ?padding: 5px 10px 0 0;
? ?background-color: #000;
?}同一個(gè)選擇器禁止在兩個(gè)不同地方出現(xiàn)，例如：
?.wrap{
? ?width: 100%;
?}
?// 中間省略部分代碼...
?.wrap{
? ?width: auto;
?}scss 中同級(jí)樣式用
?// bad&符代替當(dāng)前塊的元素,例如：
?.box {
? ?width: 100px;
?}
?.box.red {
? ?color: red;
?}
?
?// good
?.box {
? ?width: 100px;
? ?&.red {
? ? ?color: red;
? ?}
?}
JS規(guī)范
字符串盡量使用單引號(hào)
使用ES6+ 語法
?/**
? * 使用let代替var,常量使用const
? * 箭頭函數(shù)只有一個(gè)參數(shù)的時(shí)候省略括號(hào)。
? */
?
?// bad
?var num = 0
?function getData(params) {...}
?
?// good
?let num = 0
?const getData = params => {...}console、debuger、alert等不要提交到代碼倉(cāng)庫(kù)
不要有任何多余的代碼。由于需求改變多出的代碼，必須在不影響其它功能的情況下將其相關(guān)聯(lián)的屬性、方法都得刪除，沒用的代碼日積月累后面就沒法維護(hù)了。注釋的代碼如果有用的情況下寫好備注為什么存在，并且使用TODO注釋。
沒用到的參數(shù)就別寫上去。特別是forEach有時(shí)候用不到index索引就沒必要寫。
使用三元運(yùn)算符替代簡(jiǎn)單的if判斷，但多重判斷的情況一定要優(yōu)先使用if而不是三目運(yùn)算符。代碼可讀性一定比代碼簡(jiǎn)潔性的優(yōu)先級(jí)要高。
主要的邏輯方法和屬性都得加注釋，注釋不要寫廢話，寫明方法是什么作用，需要傳什么參數(shù)，有什么返回值。
禁止使用
==與!=來做任何判斷，雖然js提供了這個(gè)對(duì)類型判斷并不嚴(yán)格的語法，但并不建議使用，很多bug都是由各種類型的隱式轉(zhuǎn)換，導(dǎo)致類型不明確出現(xiàn)的。需使用===與!==代替它們。不要無意義聲明變量，例如：
?// bad
?const request = () => {
? ?let params = {
? ? ?pageSize: 10,
? ? ?currentPage: 1
? ?}
? ?getData(params)
?}
?
?// good
?const request = () => getData({
? ?pageSize: 10,
? ?currentPage: 1
?})少使用不常用的隱式轉(zhuǎn)換，寫代碼不是炫技，花里胡哨的代碼不是每個(gè)人都看得懂
使用async/await替代promise.then語法, 提高代碼可讀性。
