提升開發效率之html，js，css 代碼規範的潛規則

代碼並非寫完了就寫完了，由於代碼是寫給將來的本身和他人看的。那如何保證別人懂你代碼的意思呢？要是有一套合適的規範之後維護代碼效率豈不是很高呢

常見的命名規則

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 確一直執行。當時我都快懷疑人生了，因此看到這篇文章你是幸運的。這裏有一個細節：谷歌控制檯在打印值的時候是有顏色變化的，字符串是純黑色，其餘類型的值是深藍色

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

類型	簡寫	舉例	說明
array	a	aApple	一組蘋果
number	n	nApple	蘋果的數量
string	s	sApple	額，反正是個字符串
object	o	oApple	一個蘋果對象
function	fn	fnApple	關於蘋果的函數
boolean	b	bApple	有沒有蘋果

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

5.函數專有的那些動詞

動詞	含義	類型值
has	有沒有某個東西	boolean
is	是否是	boolean
get	獲取某個東東	非布爾值
set	設置某個東東	無返回值

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

6.合理的註釋

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

場景一：函數註釋

關鍵詞	含義
@param{TYPE}	傳入的參數，應該說明支持什麼類型
@return{TYPE}	返回的類型，應該說明支持什麼類型。無返回值是 void
@author	做者信息
@date	創做時間
@example	舉個例子

/**
 * @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.樣式也是可以分類的

顯示屬性	自身屬性	文本屬性和其餘修飾
display	width	font
visibility	height	text-align
position	margin	text-decoration
float	padding	vertical-align
clear	border	white-space
list-style	overflow	color
top	min-width	background

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

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 儘可能使用簡寫屬性等等。

最後的最後給你們安利一波福利，只看不交流是不容易記憶的。所以我建立了效率提升交流羣，歡迎你們入羣交流討論。

相關文章：

前端開發規範：命名規範、html規範、css規範、js規範

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