面試官：談?wù)勀銈冺?xiàng)目當(dāng)中的前端代碼規(guī)范吧？

自己先想一分鐘。

為什么我的代碼讓別人看起頭發(fā)麻？

前面的話(huà)

有些同學(xué)在開(kāi)發(fā)某個(gè)新功能時(shí)根據(jù)需求就哐哐哐（按照自己的代碼風(fēng)格）一頓擼。寫(xiě)完發(fā)現(xiàn)，另一個(gè)地方也有這個(gè)模塊功能，可能只是標(biāo)題的顏色，字體大小不對(duì)。怎么辦？ 于是很雞賊的復(fù)制粘貼過(guò)去，改吧改吧，提交代碼，萬(wàn)事大吉！自己倒是爽了，功能是按照需求如期完成了啊，沒(méi)毛病?？墒悄銋s忽視了一件很重要的東西： 團(tuán)隊(duì) 。

記住，你不是一個(gè)人在寫(xiě)代碼。

這篇文章有別于其他教程類(lèi)的文章，不是教你如何制定代碼規(guī)范，也不是告訴你這樣寫(xiě)就是錯(cuò)的亦或說(shuō)是正確的。本文是我這些天從優(yōu)化別人代碼過(guò)程中的所見(jiàn)和所得，凝結(jié)成文。旨在分享給大家，對(duì)號(hào)入座，然后改之。 三人行，必有我?guī)煟。粨衿渖普叨鴱闹洳簧普叨闹?由于我是做前端的，所以只說(shuō)前端代碼規(guī)范，其他語(yǔ)言同樣適用！

目的

把一些常見(jiàn)的錯(cuò)誤的不良的代碼示例分享給大家，希望有的改之，無(wú)則加勉?？赐曛?，希望對(duì)你們有所幫助，提高自己的代碼質(zhì)量，每個(gè)人都能寫(xiě)出一手漂亮的代碼。這是這篇文章最大的目的了！

概述

本文將以我的親身項(xiàng)目經(jīng)歷為例，來(lái)談?wù)勎覀內(nèi)粘ｉ_(kāi)發(fā)當(dāng)中，就代碼層面來(lái)講，我們應(yīng)該注意的一些小細(xì)節(jié)。希望各位看客能吸取精華去其糟粕。主要涉及的方面有：

• 項(xiàng)目結(jié)構(gòu)
• 文件命名
• 路由
• Vue 組件
• JavaScript
• Html
• Css
• Git 代碼提交

我將會(huì)從以上幾個(gè)方面逐一枚舉和大家分享討論。

枚舉

1. 項(xiàng)目結(jié)構(gòu)

沒(méi)說(shuō)之前，您不妨看下自己的項(xiàng)目結(jié)構(gòu)是什么樣的。目前我們的項(xiàng)目結(jié)構(gòu)是這樣的：

my-project
├── .idea # 這個(gè)是編輯器生成的
├── build # Webpack 配置文件放在這里
├── config # Vue 基本配置文件放在這里
├── node_modules # 第三方依賴(lài)
├── src # 項(xiàng)目源碼（核心文件）
│ ├── assets # 資源文件（js, css, scss）
│ ├── components # 所有組件
│ ├── js # 自己寫(xiě)的 js，里面各種工具類(lèi)方法等
│ ├── mixins # 混合
│ ├── router # 路由
│ ├── vuex # 狀態(tài)管理
│ ├── App.vue # 根組件
│ └── main.js # 入口文件
├── static # 靜態(tài)資源，一般放 img
├── theme # 主題文件，修改的 Element-UI 主題
├── .babelrc # babel 編譯配置
├── .editorconfig # 代碼格式
├── .gitignore # Git 提交忽略的文件配置
├── .postcssrc.js # 轉(zhuǎn)換 css 的工具配置文件
├── element-variables.css # Element 全局定義的變量，不明白為啥放這兒
├── index.html # 主頁(yè)模板
├── package-lock.json # 用來(lái)鎖定依賴(lài)的版本號(hào)（NPM 自動(dòng)生成）
├── package.json # 項(xiàng)目基本信息
└── README.md # 項(xiàng)目介紹

</pre>

都是用vue-cli 生成的，目錄結(jié)構(gòu)和命名規(guī)范也就沒(méi)啥可說(shuō)的?？赡茈S著時(shí)間的推移，自己會(huì)在項(xiàng)目里加一些東西（文件或文件夾）。拿上面我們的項(xiàng)目為例來(lái)說(shuō)幾點(diǎn)吧：

• 根目錄下不要有 css 文件 ：比如 element-variables.css 文件，它屬于 theme 文件夾下的東西，應(yīng)該放它下面。
• **js 文件夾應(yīng)該命名為 utils **：因?yàn)樗鼘?duì)外暴露的都是工具類(lèi)方法，這樣更顯語(yǔ)義化。

關(guān)于項(xiàng)目結(jié)構(gòu)，我發(fā)現(xiàn)的就這么多。每個(gè)項(xiàng)目的目錄可能會(huì)不同，這個(gè)就看你們的規(guī)范了。

2. 文件的命名

它包含文件的命名和文件夾的命名。依我們的項(xiàng)目為例，我重點(diǎn)說(shuō)下 src/components 目錄下的命名，真的是五花八門(mén)：

2.1. 文件名不夠語(yǔ)義化

為什么我的代碼讓別人看起頭發(fā)麻？

這個(gè)還算正常，但還是有些問(wèn)題。這里是一些問(wèn)題清單：

• 這個(gè)模塊的中文叫，是關(guān)于機(jī)器人學(xué)習(xí)的，叫 knowledgeBaseManagement 雖然很好的翻譯了中文意思，但總覺(jué)的有點(diǎn)長(zhǎng)，叫 robot 會(huì)不會(huì)好些？
• 而且文件夾下的文件命名也不夠語(yǔ)義化

下面是整理過(guò)后的樣子：

robot
├── addQuestion.vue
├── editQuestion.vue
├── index.vue
└── missedQuestion.vue

</pre>

為什么我的代碼讓別人看起頭發(fā)麻？

這個(gè)我就不想說(shuō)了，看的我頭皮發(fā)麻。從字面意思上來(lái)講，我就認(rèn)識(shí)一個(gè) TreeNode2.vue 。后面還加個(gè) 2 是什么鬼？

2.2. 文件目錄不統(tǒng)一

為什么我的代碼讓別人看起頭發(fā)麻？

為什么我的代碼讓別人看起頭發(fā)麻？

為什么我的代碼讓別人看起頭發(fā)麻？

這屬于一類(lèi)問(wèn)題，即里面太亂了，不統(tǒng)一，問(wèn)題清單：

• src/components/moduleName/ 下除了子模塊外，盡量不要瞎放其他無(wú)關(guān)的文件夾，如上面的 src 、 component/common 、 top
• callcenterList/src 下的圖片可以放到 static 下
• 如果是功能型組件（上面的 color 是一個(gè)顏色選擇器組件），盡量放到一個(gè)叫 package 或者 lib 的文件夾下。因?yàn)?src/components 下的模塊都是系統(tǒng)模塊，不要混淆
• elvesSetting/top 如果是某幾個(gè)頁(yè)面頭部的公共部分盡量放到 components/common 下

2.3. 文件名過(guò)長(zhǎng)

為什么我的代碼讓別人看起頭發(fā)麻？

如果一個(gè)模塊下就一個(gè)文件，盡量寫(xiě)成 index.vue 。這里文件夾和文件同名，路由是不是很長(zhǎng)？你在其他文件中 import 的時(shí)候是不是也不方便？ 而且我發(fā)現(xiàn) problemManagement 和 problemRetrieve 都屬于問(wèn)題管理模塊，完全可以合并到一個(gè)文件夾里啊。還有，文件夾已經(jīng)表明是問(wèn)題管理模塊了，所以文件就不要再以 problem*** 開(kāi)頭了。不覺(jué)得啰嗦嗎？ 下面是整理過(guò)后的樣子：

problemManagement
│ ├── index.vue
│ ├── retrieve.vue
qualityCheckAppeal
└── index.vue

</pre>

3. 路由

我們系統(tǒng)里的路由都是一級(jí)路由。舉個(gè)栗子：

userManagement
├── add.vue
└── update.vue

</pre>

用戶(hù)管理下有增改兩個(gè)功能，不使用彈框去做的前提下，假如說(shuō) add 和 update 對(duì)應(yīng)兩個(gè)路由是 /addUser ， /updateUser 。我們系統(tǒng)地址欄是這樣顯示的：

// 增加用戶(hù)
localhost:3030/addUser
// 修改用戶(hù)
localhost:3030/updateUser?id=1

</pre>

雖然地址欄路有短看起來(lái)雖然讓人舒服，但是模塊多的話(huà)，就不容易區(qū)分，其實(shí)應(yīng)該這樣做：
// 增加用戶(hù)
localhost:3030/user/add
// 修改用戶(hù)
localhost:3030/user/update?id=1
...
// 總結(jié)
localhost:3030/module/function?queryString

</pre>

4. Vue 組件

關(guān)于 Vue 組件開(kāi)發(fā)規(guī)范可以參考官方的風(fēng)格指南。下面是我們項(xiàng)目的一些問(wèn)題清單和改正意見(jiàn)，我列舉一下作為對(duì)照：

• 不要在 App.vue 中直接修改第三方樣式（比如： ElementUI ）。請(qǐng)使用外部文件導(dǎo)入：

App.vue 文件：

...
<style>
.el-input__icon {
cursor: pointer
}
</style>

...
<style>
@import 'element-style-overwrite';
...
</style>

</pre>

_element-style-overwrite.scss 外部樣式文件：

.el-input__icon {
cursor: pointer
}

</pre>

• 給每個(gè)組件起個(gè)名字是個(gè)好習(xí)慣。例如 Dialog 組件：

// incorrect
export default {
...
}
// correct
export default {
name: 'MyDialog', // 以大駝峰命名
...
}

</pre>

• 給組件樣式設(shè)置作用域 scoped

如果你在某個(gè)子組件中修改了全局樣式，本來(lái)只想在該組件中使用，沒(méi)想到造成了全局污染。等進(jìn)行代碼 review 的時(shí)候是很難排查的。

例如，用戶(hù)管理（ UserManagement.vue ）組件：

<style scoped>
...
</style>

</pre>

• 組件名要么單詞大寫(xiě)開(kāi)頭 (PascalCase)，要么橫線(xiàn)連接(kebab-case)：

// incorrect
components/
└── mycomponent.vue
components/
└── myComponent.vue
// correct
components/
└── MyComponent.vue
// 或者
components/
└── my-component.vue

</pre>

• .vue 單文件中的 <template> 、 <script> 、 <style> 標(biāo)簽的順序問(wèn)題

有的人喜歡這樣寫(xiě)：

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

</pre>

也有人喜歡這樣寫(xiě)：

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

</pre>

如果你想寫(xiě)，那好，不阻攔，拜托你統(tǒng)一下行不？別這個(gè)組件這個(gè)順序，那個(gè)組件那個(gè)順序。累不累？ 這里我強(qiáng)力推薦大家按照官方的寫(xiě)法，即下面的順序來(lái)寫(xiě)：

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

</pre>

• 使用兩個(gè)空格（space）進(jìn)行縮進(jìn)

這個(gè)放在全局規(guī)范會(huì)比較好一些。為什么是兩個(gè)空格？ 大神們都是這樣做的！而且更重要的是，使用兩個(gè)空格開(kāi)發(fā)項(xiàng)目，傳到 github 或者 gitlab 上排版會(huì)很好看。什么？不會(huì)設(shè)置？百度??！你用的什么編輯器就查這個(gè)編輯器怎么設(shè)置的。

一般是統(tǒng)一把全局規(guī)范設(shè)置放到一個(gè)叫.editorconfig 的文件夾里，有的編輯器支持這個(gè)文件，比如： webstorm 。有的則不支持，對(duì)于不支持的編輯器，可以下載安裝 editorConfig 插件，如： atom 、 sublime 、 vscode 等。

• 代碼中不用的注釋都刪掉
• 調(diào)試結(jié)束，把不用的 console.log(...) 及時(shí)刪掉，它會(huì)影響性能
• data 中的屬性命名和初始化問(wèn)題

// incorrect
export default {
data () {
return {
text: 'wwwwwwww', // 這是啥？
editBoxId: null, // 很明顯Id是String，這里他初始化一個(gè) null
flag: '', // 這個(gè)表示的啥？看意思應(yīng)該是個(gè) Boolean 類(lèi)型，為啥弄個(gè) String ?
pSize: 10, // pSize 是啥？
cPage: 1, // cPage 是啥？
popCsr:true, // popCsr 是啥，恐怕現(xiàn)在連那個(gè)開(kāi)發(fā)者自己都不知道了吧
callcenterAuthority: false, // 這么長(zhǎng)你告訴是一個(gè) Boolean 類(lèi)型的
}
}
}
// correct
export default {
data () {
return {
text: '', // 'wwwwwwww' 沒(méi)卵用刪掉
editBoxId: -1, // 它應(yīng)該是個(gè) Number 類(lèi)型
flag: false, // 它應(yīng)該是個(gè) Boolean 類(lèi)型啊
pageSize: 10, // pSize -> pageSize 多好
currentPage: 1, // 完整寫(xiě)法更易懂，不是嗎？
isPopcsr: true, // Boolean 類(lèi)型的總是前面加個(gè) is
isAuthority: false, // 是否授權(quán)。
}
}
}

</pre>

其實(shí)還有好多問(wèn)題，我就不一一列舉了。諸如此類(lèi)的問(wèn)題，希望各位看客們都能吸取精華，去其糟粕。

• Props 中的屬性聲明要明確類(lèi)型

// incorrect
export default {
props: ['node', 'size']
}
// correct
export default {
props: {
node: Object, // 對(duì)象
size: [String, Number], // 兩種類(lèi)型都可以
}
}

</pre>

• Vue 生命周期函數(shù)按順序放在 methods 之前

為什么說(shuō)這個(gè)呢？ 我們項(xiàng)目中有的組件就 methods 中的代碼就上千行。如果生命周期函數(shù)放在 methods 之后，拉來(lái)拉去非常不方便：

// incorrect
export default {
...
created () {},
methods: {
// 省略 1000 行代碼
// ...
},
mounted () {},
beforeDestroy () {},
destroy () {},
}
// correct
export default {
...
created () {},
mounted () {},
beforeDestroy () {},
destroy () {},
methods: {
// 省略 1000 行代碼
// ...
}
}

</pre>

• Vue 組件中的 this 賦值要統(tǒng)一

代碼中，有時(shí)候我們需要把 this 賦給一個(gè)變量，你要么統(tǒng)一賦值給變量 vm ，要么統(tǒng)一賦值給變量 self 。別一個(gè)組件里，變來(lái)變?nèi)ァ?/p>

// incorrect
export default {
...
methods: {
one () {
let vm = this
},
two () {
let self = this
}
}
}
// incorrect
export default {
...
methods: {
one () {
let vm = this
// 或者
let self = this
},
two () {
let vm = this
// 或者
let self = this
}
}
}

</pre>

• Vue 組件中 Html 如果過(guò)長(zhǎng)，請(qǐng)換行

<el-input v-model="ruleForm.maskInput" size="small" class="nodeIpt" :icon="ruleForm.maskInput ? 'circle-close':''" @click="ruleForm.maskInput = ''" @keyup.enter.native="nodesure(event,'ruleForm')">
</el-input>

</pre>

• Vue 中監(jiān)聽(tīng)的事件記得垃圾回收

舉個(gè)例子，如果我們?cè)?Vue 組件的 created 聲明周期鉤子中監(jiān)聽(tīng)了一個(gè)點(diǎn)擊事件，那么，當(dāng)組件銷(xiāo)毀（beforeDestroy）之前記得把這個(gè)事件釋放，看代碼：

export default {
...
created () {
document.addEventListener('click', this.handleClick)
},
beforeDestroy () {
document.removeEventListener('click', this.handleClick)
}
}

</pre>

• Vue 組件中不要直接操作異步請(qǐng)求（axios）

把所有的異步請(qǐng)求方法封裝成一個(gè)獨(dú)立 js 文件，或者放到 Vuex 中，千萬(wàn)不要耦合到 Vue 組件中。因?yàn)榇a量太多，會(huì)加重組件的后期維護(hù)，各司其職不好嗎？

不好的范例：

// User.vue
export default {
...
mounted () {
this.getUsers()
},
methods: {
getUsers () {
this.axios(url, data, (response) => {
// Do something
}).catch(err => {
console.error(err)
})
}
}
}

</pre>

如果項(xiàng)目比較小還好，我沒(méi)意見(jiàn)，如果項(xiàng)目較復(fù)雜，千萬(wàn)別這么干。下面是推薦的做法：

// server.js
// 專(zhuān)門(mén)處理數(shù)據(jù)請(qǐng)求的文件，也就是我沒(méi)常說(shuō)的MVC中的 M 層
import axios from 'axios'
export default {
/**

• 獲取用戶(hù)列表
  */
  getUsers (url, data) {
  return axios.get(url, data)
  }
  }
  // User.vue
  import api from '@/api/server.js'
  export default {
  ...
  data () {
  return {
  users: null
  }
  },
  mounted () {
  api.getUsers((response) => {
  this.users = response.data.data
  }).catch(err => {
  console.log(err)
  })
  }
  }

</pre>

5. JavaScript

下面所有的錯(cuò)誤代碼示例都是從我們的項(xiàng)目中發(fā)現(xiàn)的，撿主要的列出來(lái)一些。希望犯同樣錯(cuò)誤的你能及時(shí)改正哦~

• 變量命名

要語(yǔ)義化命名
// incorrect
var a = document.getElementById(this.lastid) // 這里的 a
var aa = true // 這是啥你們知道嗎？
// corrent
let orderId = this.order.id
let currentTime = Date.now()

</pre>

• 多個(gè)單詞要駝峰命名

// incorrent
vm.timedefault = timedvalue
vm.currentsessionid = id
// corrent
vm.timeDefault = timedValue
vm.currentSessionId = id

</pre>

• 變量要加注釋

為什么我的代碼讓別人看起頭發(fā)麻？

上面那一坨你們知道啥意思嗎？如果這個(gè)開(kāi)發(fā)人員離職了，那可是坑了后來(lái)人了。所以，做開(kāi)發(fā)不能自己爽了，做一個(gè)帥氣和代碼于一身的工程師，難道不更好嗎？

• 不要重復(fù)使用 var 聲明變量

// incorrect
var name = 'test';
var age = 12;
var hobby = 'sport';
// correct
var name = 'test',
age = 12,
hobby = 'sport';

</pre>

• = 或 == 之間要保留一個(gè)空格

錯(cuò)誤的范例：

// 變量
var name='test'
var arr=[]
var obj={
id:1
}
// if 判斷
if(this.id==currentId){
// Do something
}
// for 循環(huán)
for(let i=0;i<arr.length;i++){
// Do something

</pre>

上面三種情況是最常見(jiàn)的，其他雷同。下面是正確的范例：
// 變量
var name = 'test'
var arr = []
var obj = {
id: 1
}
// if 判斷
if(this.id == currentId) {
// Do something
}
// for 循環(huán)
for(let i = 0; i < arr.length; i++) {
// Do something
}

</pre>

• 右括號(hào) ) 遇到 左大括號(hào) { 時(shí)要空一格

下面是錯(cuò)誤的范例：

// if
if(a === b){
// Do something
}
// for
for(let i = 0; i < arr.length; i++){...}
// 函數(shù)
var T = function(params){
...
}

</pre>

常見(jiàn)的幾種情況，其他情況不再列舉。下面是正確的范例：

// if
if (a === b) {
// Do something
}
// for
for (let i = 0; i < arr.length; i++) {...}
// 函數(shù)
var T = function(params) {
...
}

</pre>

• 一定要進(jìn)行非空判斷處理

在我們項(xiàng)目里，有人這樣寫(xiě)：

// 假如 Vue 組件中有一個(gè)叫 userId 的 data 屬性
if (userId != '' || userId != null || userId != undefined) {
// ...
}

</pre>

真不知道怎么想的，簡(jiǎn)單一句話(huà)不就搞定了嗎？

if (userId) {
// ...
}

</pre>

• 對(duì)象聲明不當(dāng)問(wèn)題

不要用下面的方式之一去聲明一個(gè)對(duì)象：

// incorrect
var arr = new Array() // 數(shù)組
var arr = '' // 雖然 js 是弱類(lèi)型，也不能這樣聲明
var obj = new object() // 對(duì)象
var obj = ''

</pre>

• 異常處理問(wèn)題

我們?cè)谔幚懋惒秸?qǐng)求的時(shí)候，一定要對(duì) response 中的數(shù)據(jù)進(jìn)行異常處理，不然控制臺(tái)回報(bào) response.data is not undefined ，我們項(xiàng)目我看了下，有些地方?jīng)]做處理，結(jié)果在做測(cè)試的時(shí)候，瀏覽器控制臺(tái)一頓報(bào)錯(cuò)。那叫一個(gè)難看啊！
// incorrect
this.axios(url, data, (response) => {
let result = response.data.data
})
// correct
this.axios(url, data, (response) => {
if (response.data && response.data.code === 1) {
let result = response.data.data
}
}).catch(err => {
console.error(err)
})

• 如果這個(gè)取值過(guò)長(zhǎng)且多次用到，請(qǐng)賦給一個(gè)變量

export default {
...
methods: {
handleClick (evt) {
// incorrect
evt.target.parentNode.innerHTML = 'test'
evt.target.style.width = '100px'
evt.target.style.height = '200px'

// correct
let target = evt.target
target.parentNode.innerHTML = 'test'
target.style.width = '100px'
target.style.height = '200px'
}
}
}
6. HTML
</pre>

• 正確的使用標(biāo)簽

項(xiàng)目中我見(jiàn)有人寫(xiě)個(gè)按鈕居然用 span 標(biāo)簽，或者一個(gè) div 。

下面是錯(cuò)誤的范例：

// 用 div 當(dāng)按鈕
<div class="btn">搜索</div>
// 在 span 里 嵌套 el-input 組件
// 這樣做的同學(xué)，肯定不知道 el-input 編譯后的代碼是啥樣的！
<span>
<el-input></el-input>
</span>
// 用 label 當(dāng)標(biāo)題
// label 標(biāo)簽是配合表單使用的
<label>標(biāo)題</label>
// 加粗字體沒(méi)有用原生標(biāo)簽
<span class="bold">我是加粗字體</span>

</pre>

下面是改正后的范例：

// 用 H5 的 button
<button class="btn">搜索</button>
// 如果要包含 el-input 組件請(qǐng)使用塊級(jí)元素，并加上合適的 class
<div class="el-input__wrapper">
<el-input></el-input>
</div>
// h1-h6 才是標(biāo)題的正確打開(kāi)方式
<h2>標(biāo)題</h2>
// 加粗字體請(qǐng)使用原生標(biāo)簽
// 然后使用 class 控制字體樣式
<strong class="bold">我是加粗字體</strong>

</pre>

• 所有的按鈕，超鏈接，鼠標(biāo)的 :hover 狀態(tài)都應(yīng)該是手形。

a, button {
cursor: pointer
}

</pre>

• id 和 class 或者其他的屬性，命名要語(yǔ)義化

不要命個(gè)名只有你自己知道。這樣會(huì)帶來(lái)后期維護(hù)困難。

<div class="dfdf">
<el-form class="loginForm">...</el-form>
</div>

<div class="login-form__wrapper">
<el-form class="loginForm">...</el-form>
</div>

</pre>

• 把代碼縮進(jìn)改成 2 個(gè)空格
• Html 中的屬性之間保留一個(gè)空格距離

<el-input v-model="form.loginUser" size="small" placeholder="請(qǐng)輸入用戶(hù)名"></el-input>



<el-input v-model="form.loginUser" size="small" placeholder="請(qǐng)輸入用戶(hù)名"></el-input>

</pre>

• 每個(gè)代碼快盡量加上注釋

代碼量少尚且不說(shuō)，如果一個(gè) .vue 文件很長(zhǎng)的話(huà)，找起來(lái)就很痛苦了。你還別說(shuō)，我們項(xiàng)目里就是這樣沒(méi)注釋。

<template>
<div class="user-managerment__wrapper">

<div class="header">...</div>

<div class="user-table__wrapper">
<el-table>...</el-table>
</div>

<div class="add-user__dialog">
<el-dialog title="新增用戶(hù)">...</el-dialog>
</div>
</div>
</template>

</pre>

7. CSS

• { 和選擇器保持一個(gè)空格距離

.selector {
...
}

</pre>

• 給每個(gè)樣式模塊加上注釋有助于區(qū)分

// Global style
html, body, a, div {
margin: 0
}
// Login style
.login button {
...
}
// User manager style
.user-manager__wrapper {
...
}

</pre>

• 每個(gè)獨(dú)立樣式間保留一行距離

見(jiàn)上面的示例

• 選擇器不要嵌套太多層級(jí)

嵌套太多層級(jí)會(huì)影響性能，盡量保證在三層以下：

// incorrect
.user-management .user-box .user-form .el-form-item .remark {
color: #42b983
}
// correct
.user-management .user-form .remark {
color: #42b983
}

</pre>

8. Git 代碼提交

大家可以看我沸點(diǎn)。同事寫(xiě)的注釋。希望有問(wèn)題的同學(xué)可以及時(shí)改正哦。另外，關(guān)于 Git 如何正確的寫(xiě)好注釋 。這里有篇文章講的很好，大家可以看看。傳送門(mén) ->

下面舉個(gè)例子，比如我這次在用戶(hù)管理模塊中修改了兩個(gè) bug。如何以清單的方式提交呢？ 看代碼：

add file

git add src/components/userManager/index.vue

commit

git commit -m 'fix: 用戶(hù)管理模塊bug修改。
清單：

• 修改了列表分頁(yè)的bug
• 修改了當(dāng)用戶(hù)點(diǎn)擊編輯按鈕彈框無(wú)法顯示的bug
  '

push code

git push

</pre>

你千萬(wàn)別用下面的方式之一去提交你的代碼說(shuō)明：

說(shuō)一些毫無(wú)意義的內(nèi)容

git commit -m "fix: ok!"

or 不加 fix、feat、refactor、doc、style等前綴

為什么要加這些前綴呢？問(wèn)得好！

是方便日后檢索，當(dāng)我們以這些前綴去搜索修改日志的時(shí)候

是很容易的哦，微笑。

git commit -m "修改用戶(hù)模塊bug"

</pre>

總結(jié)

最后，給大家找了幾個(gè)大廠(chǎng)的團(tuán)隊(duì)規(guī)范文檔，希望你看完能夠受益多多：

• Vue風(fēng)格指南
• 騰訊團(tuán)隊(duì)文檔
• Bootstrap編碼規(guī)范
• isobar前端代碼規(guī)范 及 最佳實(shí)踐
• 書(shū)寫(xiě)具備一致風(fēng)格、通俗易懂 JavaScript 的原則
• eslint-rules

以上就是我在項(xiàng)目當(dāng)中發(fā)現(xiàn)的一些問(wèn)題，記錄下來(lái)，暫時(shí)就記錄這么多吧。希望正好看d到這篇文章的你如果也正好有以上的不良問(wèn)題，請(qǐng)加油改正哦。當(dāng)你的代碼質(zhì)量又提升一個(gè)檔次的時(shí)候，我相信，你離前端大神之門(mén)又邁進(jìn)了一步！

啰嗦了這么多，希望看到的同學(xué)或多或少有點(diǎn)收獲吧。不對(duì)的地方還請(qǐng)留言指正，不勝感激。俗話(huà)說(shuō)， 三人行則必有我?guī)?/strong> ，希望更多志同道合的小伙伴能聚在一起交流技術(shù)！