一、框架 / Vue

1.組件名

組件名為多個(gè)單詞炸卑，并且用連接線（-）連接亡蓉，避免與 HTML 標(biāo)簽沖突，并且結(jié)構(gòu)更加清晰瞳浦。

示例：

// 反例
export default {
    name: 'item'
}

// 正例
export default {
    name: 'page-article-item'
}

2.組件文件

組件的名字應(yīng)該始終是以連接線（-）連接的單詞担映，一方面可與組件名一致，使項(xiàng)目更加清晰叫潦，另一方面這樣的寫(xiě)法對(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è)特定的前綴開(kāi)頭矗蕊，區(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ì)大小寫(xiě)是不敏感的，使用連接線更加友好没龙；而在 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.指令縮寫(xiě)

為了統(tǒng)一規(guī)范始終使用指令縮寫(xiě)迹缀，使用v-bind使碾，v-on并沒(méi)有什么不好，這里僅為了統(tǒng)一規(guī)范祝懂。

示例：

<input :value="mazeyUser" @click="verifyUser">

7.樣式

為了避免樣式?jīng)_突票摇，整個(gè)項(xiàng)目要么全都使用 scoped 特性，要么使用 BEM 約定砚蓬。

示例：

// 反例
<template>
    <button class="btn btn-sure">確認(rèn)</button>
</template>
<style>
    .btn{
        border: 1px solid #F1F1F1;
    }
    .btn-sure{
        background-color: blue;
    }
</style>

// 正例
<!-- 使用 scoped 特性 -->
<template>
    <button class="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>
    <button class="menu-btn menu-btn-sure">確認(rèn)</button>
</template>
<style>
    .menu-btn{
        border: 1px solid #F1F1F1;
    }
    .menu-btn-sure{
        background-color: blue;
    }
</style>

注意

不建議使用類似于 font-size-20矢门，color-666，margin-top-20這樣的類怜械，此時(shí)如果想把全局的color-666顏色改成 #ccc颅和，不管是直接把 .color-666{color: #666;} 改成 .color-666{color: #ccc;}，還是 全局搜索修改 class 名都很麻煩缕允。本質(zhì)上我認(rèn)為 color-666 和直接寫(xiě) style="color: #666;" 并沒(méi)有區(qū)別峡扩。

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)一使用駝峰命名拉馋，以大寫(xiě)字母開(kāi)頭申明的都是構(gòu)造函數(shù)榨为，使用小寫(xiě)字母開(kāi)頭的都是普通函數(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 = new Map([])
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ì)一直在訪問(wèn) Dom 層，訪問(wèn) Dom 層的代價(jià)是很大的繁调。for (var i = 0, j=arr.length; i < j; i++) {} 這樣的方式去用循環(huán)是比較好的萨蚕，只會(huì)訪問(wèn)一次 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í)不寫(xiě) type 屬性。HTML5 默認(rèn) type 為 text/css 和 text/javascript 屬性月培，所以沒(méi)必要指定嘁字。

示例：

// 反例
<link rel="stylesheet"  type="text/css">
<script src="http://www.test.com/js/test.js" type="text/javascript"></script>

// 正例
<link rel="stylesheet" >
<script src="http://www.test.com/js/test.js"></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.屬性縮寫(xiě)

CSS 屬性盡量使用縮寫(xiě)烤芦，提高代碼的效率和方便理解。

示例：

// 反例
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è)模塊文件寫(xiě)一個(gè)區(qū)塊注釋遂唧。

示例：

/**
* @module mazey/api
* @author Mazey <mazey@mazey.net>
* @description test.
* */