一、框架 / Vue
1.組件名
組件名為多個(gè)單詞，并且用連接線（-）連接，避免與 HTML 標(biāo)簽沖突，并且結(jié)構(gòu)更加清晰。
示例：
// 反例
export default {
name:'item'
}
// 正例
export default {
name:'page-article-item'
}
2.組件文件
組件的名字應(yīng)該始終是以連接線（-）連接的單詞，一方面可與組件名一致，使項(xiàng)目更加清晰，另一方面這樣的寫法對(duì)編輯器引入也很友好。
示例：
// 反例
├── index.html
├── main.js
└── components?
?├── pageheader?
?├── pagearticle?
?└── pageheader
// 正例
├── index.html
├── main.js
└── components?
?├── page-header?
?├── page-article?
?└── page-header
對(duì)于例如按鈕、下拉框或表格這樣的基礎(chǔ)組件應(yīng)該始終以一個(gè)特定的前綴開頭，區(qū)別與其他業(yè)務(wù)組件。
示例：
// 反例
├── index.html
├── main.js
└── components?
?├── page-header?
?├── page-article?
?├── page-header?
?├── mazey-button
?├── mazey-select
└── mazey-table
// 正例
├── index.html
├── main.js
└── components
? ? ? ? |├── page-header
? ? ? ? ?|├── page-article
? ? ? ? ?|└── page-header
└──base
? ? ? ? ?├── mazey-button?
?├── mazey-select
└── mazey-table
3.Prop
定義 Prop 的時(shí)候應(yīng)該始終以駝峰格式（camelCase）命名，在父組件賦值的時(shí)候使用連接線（-）。這里遵循每個(gè)語(yǔ)言的特性，因?yàn)樵?HTML 標(biāo)記中對(duì)大小寫是不敏感的，使用連接線更加友好；而在 JavaScript 中更自然的是駝峰命名。
示例：
// 反例
// Vue
props:{article-status:Boolean}
// HTML<article-item:articleStatus="true"></article-item>
// 正例
// Vue
props:{articleStatus:Boolean}
// HTML<article-item:article-status="true"></article-item>
Prop 的定義應(yīng)該盡量詳細(xì)的指定其類型、默認(rèn)值和驗(yàn)證。
示例：
// 反例
props:['attrM','attrA','attrZ']
// 正例
props:{
attrM:Number,
attrA:{
type:String,
required:true
},
attrZ:{
type:Object,
// 數(shù)組/對(duì)象的默認(rèn)值應(yīng)該由一個(gè)工廠函數(shù)返回
default:function(){
return{msg:'成就你我'}
}
},
attrE : {
? type: String,
? validator: function(v){
? ? ? ? ? return !(['success','fail'].indexOf(v)=== -1)
? ? ? ?}
? ?}
}
4. v-for
在執(zhí)行 v-for 遍歷的時(shí)候，總是應(yīng)該帶上 key 值使更新 DOM 時(shí)渲染效率更高。
示例：
// 反例
<ul>?
? ? ? ?<li v-for="item in list">
? ? ? ? ? ? ? {{item.title}}?
? ? ? ?</li>
</ul>
// 正例
<ul>?
? ? ?<li v-for="item in list":key="item.id">?
? ? ? ? ? ? ?{{item.title}}
? ? ? </li>
</ul>
v-for 應(yīng)該避免與 v-if 在同一個(gè)元素（例如：<li>）上使用，因?yàn)?v-for 的優(yōu)先級(jí)比 v-if 更高，為了避免無(wú)效計(jì)算和渲染，應(yīng)該盡量將 v-if 放到容器的父元素之上。
示例：
// 反例
<ul>?
? ?<li v-for="item in list" :key="item.id" v-if="showList">?
? ? ? ? {{item.title}}?
? ? </li>
</ul>
// 正例
<ul v-if="showList">?
? ? ?<li v-for="item in list" :key="item.id">?
? ? ? ? ? {{item.title}}?
? ? ?</li>
</ul>
5.v-if / v-else-if / v-else
若同一組 v-if 邏輯控制中的元素邏輯相同，Vue 為了更高效的元素切換，會(huì)復(fù)用相同的部分，例如：value。為了避免復(fù)用帶來(lái)的不合理效果，應(yīng)該在同種元素上加上 key 做標(biāo)識(shí)。
示例：
// 反例
<div v-if="hasData">?
?<span>{{mazeyData}}</span>
</div>
<div v-else>?
?<span>無(wú)數(shù)據(jù)</span>
</div>
// 正例
<div v-if="hasData" key="mazey-data">?
? ?<span> {{ mazeyData }} </span>
</div>
<div v-else key="mazey-none">
? ?<span>無(wú)數(shù)據(jù)</span>
</div>
6.指令縮寫
為了統(tǒng)一規(guī)范始終使用指令縮寫，使用v-bind，v-on并沒有什么不好，這里僅為了統(tǒng)一規(guī)范。
示例：
<input :value="mazeyUser" @click="verifyUser">
7.樣式
為了避免樣式?jīng)_突，整個(gè)項(xiàng)目要么全都使用 scoped 特性，要么使用 BEM 約定。
示例：
// 反例
<template> <buttonclass="btn btn-sure">確認(rèn)</button></template>
<style>?
?.btn{
? ? ? ? border: 1px solid #F1F1F1;
? ? }
? ? .btn-sure{
? ? ? ? background-color: blue;
? ? }</style>
// 正例
<!--使用 scoped 特性-->
<template><buttonclass="btn btn-sure">確認(rèn)</button></template>
<style scoped>? ??
.btn{
? ? ? ? border: 1px solid #F1F1F1;
? ? }
? ? .btn-sure{
? ? ? ? background-color: blue;
? ? }
</style>
<!--使用BEM（Block Element Modifier） 特性-->
<template>? ??
? ?<buttonclass="menu-btn menu-btn-sure">確認(rèn)</button>
</template>
<style>?
? ?.menu-btn {
? ? ? ? border: 1px solid #F1F1F1;
? ? }
? ? .menu-btn-sure {
? ? ? ? background-color: blue;
? ? }
</style>
8.單文件組件的頂級(jí)元素順序
為了統(tǒng)一和便于閱讀，應(yīng)該按?<template>、<script>、<style>的順序放置。
示例：
// 反例
<style>/* CSS */</style>
<script>/* JavaScript */</script>
<template><!-- HTML --></template>
// 正例
<template><!-- HTML --></template>
<script>/* JavaScript */</script>
<style>/* CSS */</style>
二、JavaScript
1. var / let / const
建議不再使用 var，而使用 let / const，優(yōu)先使用 const。任何一個(gè)變量的使用都要提前申明，除了 function 定義的函數(shù)可以隨便放在任何位置。
2.引號(hào)
建議不再使用雙引號(hào)，靜態(tài)字符串使用單引號(hào)，動(dòng)態(tài)字符串使用反引號(hào)銜接。
示例：
// 反例
const foo="后除"
const bar=foo+"，前端工程師"
// 正例
const foo='后除'?
const bar=`${foo}，前端工程師`
3.函數(shù)
匿名函數(shù)統(tǒng)一使用箭頭函數(shù)，多個(gè)參數(shù)/返回值時(shí)優(yōu)先使用對(duì)象的結(jié)構(gòu)賦值。
示例：
// 反例
function getPersonInfo (name, sex) {
? ? ?// ...return [name, gender]
}
// 正例
function getPersonInfo ({ name, sex }) {
? ? ?// ...return { name, gender }
}
函數(shù)名統(tǒng)一使用駝峰命名，以大寫字母開頭申明的都是構(gòu)造函數(shù)，使用小寫字母開頭的都是普通函數(shù)，也不該使用 new 操作符去操作普通函數(shù)。
4.對(duì)象
建議使用擴(kuò)展運(yùn)算符拷貝對(duì)象而不是?Object.assign(target, ...sources)。
示例：
// 錯(cuò)誤
const? foo={a:0,b:1}
const? bar=Object.assign(foo,{c:2})
// 反例
const foo={a:0,b:1}
const? bar=Object.assign({},foo)
// 正例
const? foo={a:0,b:1}
const? bar=JSON.parse(JSON.stringify(foo))??
// 極好
const foo={a:0,b:1}
const bar={...foo,c:2}
對(duì)象盡量靜態(tài)化，添加新屬性使用?Object.assign(target, ...sources)。
示例：
// 反例
const? foo={a:3}
foo.b=4
// 正例
const foo={a:3}
Object.assign(foo,{b:4})
若有遍歷對(duì)象的需求，優(yōu)先使用 Map 結(jié)構(gòu)。
示例：
// 反例
const myMap={foo:0,bar:1}
for(let key in myMap){
? ? ? ? // ...
}
// 正例
const myMap=newMap([])
for( let [key,value] of myMap.entries() ){
? ? ? ? // ...
}
5.模塊
統(tǒng)一使用 import / export 的方式管理項(xiàng)目的模塊。
示例：
// lib.js
export default{}
// app.js
import app from './lib'
import 統(tǒng)一放在文件頂部。
如果模塊只有一個(gè)輸出值，使用?export default，否則不用。
6.循環(huán)
for (var i = 0; i < arr.length; i++) {}這樣的方式遍歷不是很好，尤其當(dāng) arr 是 Dom 對(duì)象的時(shí)候，這樣就會(huì)一直在訪問 Dom 層，訪問 Dom 層的代價(jià)是很大的。for (var i = 0, j=arr.length; i < j; i++) {}這樣的方式去用循環(huán)是比較好的，只會(huì)訪問一次 Dom 層（不適用于 Dom 節(jié)點(diǎn)會(huì)動(dòng)態(tài)更新的場(chǎng)景）。
7.eval
避免使用eval，如要進(jìn)行字符串轉(zhuǎn)化為對(duì)象，最好使用瀏覽器的內(nèi)置方法來(lái)解析 JSON 數(shù)據(jù)，以確保代碼的安全性和數(shù)據(jù)的合法性。如果瀏覽器不支持JSON.parse()，你可以使用 JSON.org 所提供的庫(kù)。如果不得不使用eval()，可以嘗試用new Function()來(lái)代替，在new Function()中運(yùn)行的代碼會(huì)在一個(gè)局部函數(shù)作用域內(nèi)執(zhí)行，因此源碼中定義的變量不會(huì)自動(dòng)變成全局變量。
三、HTML / CSS
1.標(biāo)簽
在引用外部 CSS 或 JavaScript 時(shí)不寫 type 屬性。HTML5 默認(rèn) type 為text/css和text/javascript屬性，所以沒必要指定。
示例：
// 反例<linkrel="stylesheet"></script>// 正例<linkrel="stylesheet"></script>
2.協(xié)議
省略協(xié)議頭部聲明，例如：http:、https:，且不加引號(hào)。
示例：
// 反例background:url("http://www.test.com/img/test.png");// 正例background:url(//www.test.com/img/test.png);
3.選擇器
選擇器盡可能簡(jiǎn)單，能使用.test別使用div.test。
每個(gè)選擇器和聲明都要獨(dú)立新行。
示例：
// 反例p.test{color:#000;}h1,h2,h3{font-size:12px;color:#666;}// 正例.test{color:#000;}h1,h2,h3{font-size:12px;color:#666;}
4.分號(hào)
每個(gè)聲明最后都要加分號(hào);，即使是最后一個(gè)。
示例：
// 反例h3{font-size:12px;color:#666}// 正例h3{font-size:12px;color:#666;}
5.命名
Class 和 ID 的命名應(yīng)該語(yǔ)義化，通過(guò)看名字就知道是干嘛的；多個(gè)單詞用連接線-連接。
示例：
// 反例.testheader{font-size:20px;}// 正例.test-header{font-size:20px;}
6.屬性縮寫
CSS 屬性盡量使用縮寫，提高代碼的效率和方便理解。
示例：
// 反例border-width:1px;border-style:solid;border-color:#ccc;// 正例border:1px solid #ccc;
7.文檔類型
應(yīng)該總是使用 HTML5 標(biāo)準(zhǔn)。
示例：
<!DOCTYPE html>
8.table
應(yīng)該避免使用 table 做頁(yè)面布局，因?yàn)橥瑯拥牟季质褂?table 要多幾倍的渲染時(shí)間；當(dāng)然使用 table 做表格是完全正確的。
9.注釋
應(yīng)該給一個(gè)模塊文件寫一個(gè)區(qū)塊注釋。
示例：
/**
* @module mazey/api
* @author Mazey <mazey@mazey.net>
* @description test.
* */
