[[319100]]

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

常見的命名規則

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

FirstOne 

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

firstOne 

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

first_one 

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

first-one 

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

代碼規范中的那些潛規則

html 代碼中的潛規則

1.html 是不區分大小寫的

瀏覽器解析標簽是不區分大小寫的。 

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

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

2.語義化標簽

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

個人感覺語義化標簽主要有倆個優勢

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

語義化標簽就那么多，掌握了就是掌握了。實打實的好處，建議大家還是要掌握一下的。

JS 代碼中的潛規則

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

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

// 構造函數簡單說就是需要 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, 全部是數字的字符串 
let c = '123' 
let d = 123 

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

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

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

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

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

5.函數專有的那些動詞

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

6.合理的注釋

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

場景一：函數注釋

/** 
 * @param date { Date | timestamp } 需要格式化的時間 
 * @param format { string } 支持的關鍵字 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 
} 

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

CSS 代碼中的潛規則

1.不能出現大寫

前面已經說過了 html 標簽是不能區分大小寫的，雖然屬性值支持大寫。但是并不建議用大寫。

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

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

2.樣式也是能夠分類的

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

3. BEM布局

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

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

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

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

[譯] 這些 CSS 命名規范將省下你大把調試時間

CSS 命名規范總結

總結

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