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

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

自己先想一分鐘料仗。

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

前面的話

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

記住嗜诀，你不是一個(gè)人在寫代碼猾警。

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

目的

把一些常見(jiàn)的錯(cuò)誤的不良的代碼示例分享給大家掉盅，希望有的改之也拜，無(wú)則加勉≈憾唬看完之后慢哈，希望對(duì)你們有所幫助，提高自己的代碼質(zhì)量永票，每個(gè)人都能寫出一手漂亮的代碼卵贱。這是這篇文章最大的目的了滥沫！

概述

本文將以我的親身項(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 # 第三方依賴
├── src # 項(xiàng)目源碼（核心文件）
│ ├── assets # 資源文件（js, css, scss）
│ ├── components # 所有組件
│ ├── js # 自己寫的 js臀玄，里面各種工具類方法等
│ ├── 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)鎖定依賴的版本號(hào)（NPM 自動(dòng)生成）
├── package.json # 項(xiàng)目基本信息
└── README.md # 項(xiàng)目介紹

</pre>

都是用vue-cli 生成的，目錄結(jié)構(gòu)和命名規(guī)范也就沒(méi)啥可說(shuō)的魁莉〔墙В可能隨著時(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ì)外暴露的都是工具類方法讶请，這樣更顯語(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 目錄下的命名丹禀，真的是五花八門：

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ā)麻掖看？

這屬于一類問(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è)文件特石，盡量寫成 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>

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

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

</pre>

雖然地址欄路有短看起來(lái)雖然讓人舒服戴甩，但是模塊多的話符喝，就不容易區(qū)分，其實(shí)應(yīng)該這樣做：
// 增加用戶
localhost:3030/user/add
// 修改用戶
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í)候是很難排查的而线。

例如铭污，用戶管理（ UserManagement.vue ）組件：

<style scoped>
...
</style>

</pre>

  • 組件名要么單詞大寫開(kāi)頭 (PascalCase)，要么橫線連接(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)題

有的人喜歡這樣寫：

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

</pre>

也有人喜歡這樣寫：

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

</pre>

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

</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 類型盖文，為啥弄個(gè) String ?
pSize: 10, // pSize 是啥？
cPage: 1, // cPage 是啥蚯姆？
popCsr:true, // popCsr 是啥五续，恐怕現(xiàn)在連那個(gè)開(kāi)發(fā)者自己都不知道了吧
callcenterAuthority: false, // 這么長(zhǎng)你告訴是一個(gè) Boolean 類型的
}
}
}
// correct
export default {
data () {
return {
text: '', // 'wwwwwwww' 沒(méi)卵用刪掉
editBoxId: -1, // 它應(yīng)該是個(gè) Number 類型
flag: false, // 它應(yīng)該是個(gè) Boolean 類型啊
pageSize: 10, // pSize -> pageSize 多好
currentPage: 1, // 完整寫法更易懂，不是嗎蒋失？
isPopcsr: true, // Boolean 類型的總是前面加個(gè) is
isAuthority: false, // 是否授權(quán)返帕。
}
}
}

</pre>

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

  • Props 中的屬性聲明要明確類型

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

</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> <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)組件銷毀（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
// 專門處理數(shù)據(jù)請(qǐng)求的文件，也就是我沒(méi)常說(shuō)的MVC中的 M 層
import axios from 'axios'
export default {
/**

  • 獲取用戶列表
    */
    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)目里哼转，有人這樣寫：

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

</pre>

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

if (userId) {
// ...
}

</pre>

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

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

// incorrect
var arr = new Array() // 數(shù)組
var arr = '' // 雖然 js 是弱類型壹蔓，也不能這樣聲明
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)有人寫個(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)輸入用戶名"></el-input>



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

</pre>

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

代碼量少尚且不說(shuō)舅桩，如果一個(gè) .vue 文件很長(zhǎng)的話，找起來(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="新增用戶">...</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)撒妈。同事寫的注釋。希望有問(wèn)題的同學(xué)可以及時(shí)改正哦排监。另外狰右，關(guān)于 Git 如何正確的寫好注釋 。這里有篇文章講的很好舆床，大家可以看看棋蚌。傳送門 ->

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

add file

git add src/components/userManager/index.vue

commit

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

  • 修改了列表分頁(yè)的bug
  • 修改了當(dāng)用戶點(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 "修改用戶模塊bug"

</pre>

總結(jié)

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

  • Vue風(fēng)格指南
  • 騰訊團(tuán)隊(duì)文檔
  • Bootstrap編碼規(guī)范
  • isobar前端代碼規(guī)范 及 最佳實(shí)踐
  • 書(shū)寫具備一致風(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í)候，我相信如输，你離前端大神之門又邁進(jìn)了一步鼓黔！

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市慎陵，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌喻奥，老刑警劉巖席纽，帶你破解...
    沈念sama閱讀 218,284評(píng)論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異撞蚕，居然都是意外死亡润梯，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門甥厦，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)纺铭，“玉大人，你說(shuō)我怎么就攤上這事刀疙〔芭猓” “怎么了？”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,614評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵谦秧，是天一觀的道長(zhǎng)竟纳。 經(jīng)常有香客問(wèn)我，道長(zhǎng)疚鲤，這世上最難降的妖魔是什么锥累？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,671評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮集歇，結(jié)果婚禮上桶略，老公的妹妹穿的比我還像新娘。我一直安慰自己诲宇，他們只是感情好际歼，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著焕窝，像睡著了一般蹬挺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上它掂，一...
    開(kāi)封第一講書(shū)人閱讀 51,562評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天巴帮，我揣著相機(jī)與錄音溯泣，去河邊找鬼。 笑死榕茧，一個(gè)胖子當(dāng)著我的面吹牛垃沦，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播用押，決...
    沈念sama閱讀 40,309評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼肢簿，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了蜻拨？” 一聲冷哼從身側(cè)響起池充，我...
    開(kāi)封第一講書(shū)人閱讀 39,223評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎缎讼，沒(méi)想到半個(gè)月后收夸，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡血崭，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年卧惜，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夹纫。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡咽瓷，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出舰讹，到底是詐尸還是另有隱情茅姜，我是刑警寧澤，帶...
    沈念sama閱讀 35,705評(píng)論 5贊 347
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布跺涤，位于F島的核電站匈睁，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏桶错。R本人自食惡果不足惜航唆，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望院刁。 院中可真熱鬧糯钙，春花似錦、人聲如沸退腥。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,904評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)狡刘。三九已至享潜，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間嗅蔬，已是汗流浹背剑按。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,023評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工疾就， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人艺蝴。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓猬腰，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親猜敢。 傳聞我的和親對(duì)象是個(gè)殘疾皇子姑荷，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容