[[319100]]

 代碼并不是寫完了就寫完了，因為代碼是寫給未來的自己和他人看的。那如何保證別人懂你代碼的意思呢?要是有一套合適的規(guī)范以后維護代碼效率豈不是很高呢！

常見的命名規(guī)則

1.大駝峰命名法,首字母都大寫 

FirstOne 

2.小駝峰命名法，第一個單詞首字母小寫，其他跟大駝峰一樣 

firstOne 

3.蛇形命名法，單詞之間用下劃線拼接 

first_one 

4.減號命名法,單詞之間用減號分割 

first-one 

這些命名法最大的好處就是可以輕易區(qū)分單詞跟單詞

代碼規(guī)范中的那些潛規(guī)則

html 代碼中的潛規(guī)則

1.html 是不區(qū)分大小寫的

瀏覽器解析標(biāo)簽是不區(qū)分大小寫的。 

<DIV></DIV> 
// 編譯出來是這樣的 
<div></div> 

雖然里面的 class ，id 或者其他的自定義屬性支持大寫。但是基本上沒有用大寫的，因此建議 html 中的代碼統(tǒng)一采用蛇行命名法和減號姓名法(好像是因為早期的 xhtml 不支持大寫)

2.語義化標(biāo)簽

說實在的語義很好掌握，但是了解這些語義標(biāo)簽的默認屬性并且重置是很不容易的。(要想知道如何重置屬性歡迎觀看我的文章 《開發(fā)效率創(chuàng)新高，只因收下了這波 CSS 操作》)

個人感覺語義化標(biāo)簽主要有倆個優(yōu)勢

1. 支持 seo 搜索
2. 閱讀起來很舒服，不會被別人噴 div 仔。

語義化標(biāo)簽就那么多，掌握了就是掌握了。實打?qū)嵉暮锰?，建議大家還是要掌握一下的。

JS 代碼中的潛規(guī)則

JS 是區(qū)分大小寫的所以常見的命名法都是大小駝峰命名法。但是花樣要多得多：

1.構(gòu)造函數(shù)采用大駝峰命名法(或者 es6 的 class 類) 

// 構(gòu)造函數(shù)簡單說就是需要 new 出來的 
function FistOne() {} 
new FirstOne() 
// class 就是符合下面這種語法糖的 
class FirstOne () {} 

2.常量采用全大寫的蛇形命名法

常量就是不能更改的變量，為了醒目所以都遵循著全大寫的蛇形命名法則 

const FIRST_ONE = 3 

3.其他變量采用小駝峰命名法

4.類型名字簡寫

JS 是一門弱類型語言，寫起來特別方便。但是下面這種情況我想你肯定遇到過 

// 情況 1, 名為 true 的字符串 
let a = true 
let b = 'true' 
// 情況 2, 全部是數(shù)字的字符串 
let c = '123' 
let d = 123 

c 和 d 這種還好說，因為 js 存在隱式轉(zhuǎn)換。你去比較還是相等的，但是 a 和 b 是不相等的。我在跟后端聯(lián)調(diào)的時候就碰到過這種情況，他跟我說返回的是 boolean 類型的值結(jié)果返回了個字符串。我就直接把他作為判斷條件了 

let a = 'false' // 假設(shè)這是后端給我返回的 boolean 值 
if (a) { 
    // XXXXX 一些列操作 
} 

結(jié)果可想而知，值明明是 false 確一直執(zhí)行。當(dāng)時我都快懷疑人生了，所以看到這篇文章你是幸運的。這里有一個細節(jié)：谷歌控制臺在打印值的時候是有顏色變化的，字符串是純黑色，其他類型的值是深藍色

這部分說了這么多足以可見類型的重要性，那么有哪些好的命名方式呢?

當(dāng)然了這部分仁者見仁智者見智，如果你有更好的命名方式歡迎評論交流

5.函數(shù)專有的那些動詞

這一部分帶擴充，歡迎萬能的同學(xué)們評論擴充

6.合理的注釋

只要你寫注釋了，后面維護代碼的人第一眼肯定是先看注釋。要是你說你第一反應(yīng)是看源碼好吧，我也拿你沒轍。。。

場景一：函數(shù)注釋

/** 
 * @param date { Date | timestamp } 需要格式化的時間 
 * @param format { string } 支持的關(guān)鍵字 yyyy MM dd hh mm ss 
 * @return { string } 
 * @author MrXu 
 * @date 2019年10月13日 
 * @example 
 * 1570929141012 -> 2019年10月15 
 * dateFormat(1570929141012, 'yyyy年MM月dd') 
 */ 
function dateFormat (date, format) { 
    // XXXXXXX 
} 

上面這種寫一串也是蠻累的，所以弄個代碼片段快速生成就很有必要了(有興趣的同學(xué)可以看我之前的文章 《如何讓 vscode 變成你的開發(fā)神器?》)

CSS 代碼中的潛規(guī)則

1.不能出現(xiàn)大寫

前面已經(jīng)說過了 html 標(biāo)簽是不能區(qū)分大小寫的，雖然屬性值支持大寫。但是并不建議用大寫。

減號命名方式有一個問題就是無法雙擊選中，不過我恰巧從別人的文章評論中找到了一個方法能夠設(shè)置雙擊選中減號命名方式的問題： 

// vscode 或者 sublime 設(shè)置加上這個正則匹配就可以選中 
wordSeparators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", 

2.樣式也是能夠分類的

建議先寫顯示屬性 -> 自身屬性(盒模型屬性) -> 文本屬性和其他修飾

3. BEM布局

• block：模塊，名字單詞間用 - 連接
• element：元素，模塊的子元素，以 __ 與 block 連接
• modifier：修飾，模塊的變體，定義特殊模塊，以 -- 與 block 連接 

// 舉個例子 
.person {} 
.person__header {} 
.person__main {} 
.person__footer {} 
.person--cap {} 
.person--clothing {} 
.person--shoe {} 
 
// 現(xiàn)在 css 預(yù)編譯器也很火，所以貼個 css 預(yù)編譯器的。編譯出來效果跟上面一樣 
.person { 
    &__header {} 
    &__main {} 
    &__footer {} 
    &--cap {} 
    &--clothing {} 
    &--shoe {} 
} 

個人感覺 css 命名是這里面最復(fù)雜的。因為樣式代碼特別多，而且有一條潛規(guī)則是 html、css、js 代碼分離。但是 html 和 css 代碼分離還真的挺困難的，我在剛開始寫代碼的時候 html 和 css 代碼是分離的。后來 UI 讓調(diào)節(jié)樣式，就只是簡單的一些字體、間距我要定位到對應(yīng)的位置就特別麻煩，就會忍不住直接在行內(nèi)寫入樣式去進行樣式重置。因為只有一倆個屬性，所以一個合格的名字是特別重要的。

遺憾的是因為篇幅原因這篇文章就不詳細講解 BEM 了，因為這是一個大話題，但是我需要讓你保證你要知道這個東西。不過我找了倆篇質(zhì)量很高的文章，感興趣的可以看這倆篇文章：

[譯] 這些 CSS 命名規(guī)范將省下你大把調(diào)試時間

CSS 命名規(guī)范總結(jié)

總結(jié)

html，js，css 常見的應(yīng)該都已經(jīng)覆蓋到了。有一些很細致的就不展開討論了，比如 js 中的隱藏變量，css 盡量使用簡寫屬性等等。