文章目錄
- 1. 文檔說明
- 1.1 編制說明
- 1.2 名詞解釋
- 2.前端研發規范
- 2.1 HTML編碼規范
- 2.1.1 文檔類型
- 2.1.2 語言
- 2.1.3 元數據
- 2.1.4 資源加載
- 2.1.5 頁面標題
- 2.1.6 編碼風格
- 2.1.7 標簽
- 2.1.8 屬性
- 2.1.9 語義化
- 2.2 CSS編碼規范
- 2.2.1 文件引用
- 2.2.2 命名-組成元素
- 知識點
1. 文檔說明
1.1 編制說明
軟件行業的高速發展，對軟件開發者的綜合素質要求越來越高，不僅僅是編程知識點，其他維度知識點也會影響最后的交付質量，本文檔以開發前端項目角度，詳細描寫了前端的代碼規范，分別從HTML、CSS、JavaScript、TypeScript、四個方面入手，并且每個章節進行了詳細劃分，方便讀者能快速定位，規范自己的代碼，提高項目質量。
1.2 名詞解釋
| 序號 | 名詞 | 釋義 |
|---|---|---|
| 1 | JavaScript | （通常編寫為JS）是一種高級的，解釋型的編程語言。支持面向對象設計，函數式編程，以及指令式編程。 |
| 2 | 圈復雜度 | 軟件源碼某部分發圈復雜度就是這部分代碼中線性無關路徑的數量 eg：如果一段源碼中不包含控制流語句（條件或決策點），那么這段代碼的圈復雜度為1，因為這段代碼中只會有一條路徑；如果一段代碼中僅包含一個if語句，且if語句僅有一個條件，那么這段代碼的圈復雜度為2；包含兩個嵌套的if語句，或是一個if語句有兩個條件的代碼塊的圈復雜度為3。 |
| 3 | 認知復雜度 | 認知復雜度分數根據三個基本規則進行評估： 忽略允許將多個語句易于理解地簡寫成一個的情況在代碼線性流程中的每一次中斷都增加（+1）（復雜度）斷流結構嵌套時增加（復雜度） |
2.前端研發規范
2.1 HTML編碼規范
2.1.1 文檔類型
1）【強制】使用HTML5 DOCTYPE。
//<!DOCTYPE html>
<html>
</html>
2.1.2 語言
1）【推薦】指定html標簽上的lang屬性。
<html lang="zh-CN"><!--...-->
</html>
2.1.3 元數據
1）【推薦】使用UTF-8字符編碼。
聲明一個明確的字符編碼，可以讓瀏覽器更快更高效地確定適合網頁內容的渲染方式。
由于歷史原因，不同瀏覽器采用了不同的字符編碼。但對于新業務，如無特殊要求，統一使用UTF-8字符編碼，以便統一。
在HTML中使用<meta charset="utf-8:/>聲明文檔
<head><meta charset="utf-8" />
</head>
2）【推薦】頁面提供給移動設備使用時，需設置viewport。
2.1.4 資源加載
1）【推薦】引入CSS和JavaScript時無需指定type。根據HTML5規范，引入CSS和JavaScript時通常不需要指明type，因為text/css和text/javascript分別是他們的默認值。
2）【推薦】在head標簽內引入CSS，在body結束標簽前引入JS。在<body></body>中指定外部樣式表和嵌入式樣式塊可能會導致頁面的重排和重繪，對頁面的渲染造成影響。因此，一般情況下，CSS應在<head></head>標簽里引入。
2.1.5 頁面標題
1）【強制】頁面需要指定title標簽，有且僅有1個。
2.1.6 編碼風格
1）【推薦】統一使用2個空格縮進，不要使用4個空格縮進或tab縮進。
2）【強制】在HTML注釋代碼中，不允許出現任何敏感信息。
3）【推薦】單行注釋，需在注釋內容和注釋符之間需留有一個空格，以增強可讀性。
4）【推薦】多行注釋，注釋符單獨占一行，注釋內容2個空格縮進。
2.1.7 標簽
1）【強制】標簽名統一使用小寫。
<!-- bad -->
<H1>Hello,world!</H1>
<!-- good -->
<h1>Hello,world!</h1>
2）【推薦】不要省略自閉合標簽結尾處的斜線，且斜線前需留有一個空格。
<!-- bad -->
<meta name = "viewport" content="width=device-width,initial-scale=1.0">
<img src="images/foo.png" alt="foo"><!-- good -->
<meta name = "viewport" content="width=device-width,initial-scale=1.0" />
<img src="images/foo.png" alt="foo" />
2.1.8 屬性
1）【強制】屬性值使用雙引號，不要使用單引號。
2）【推薦】不要為Boolean屬性添加取值。
XHTML需要每個屬性聲明取值，但是HTML5并不需要。一個元素中Boolean屬性存在即表示取值true，不存在則表示取值false。
3）【推薦】自定義屬性的命名：以data-為前綴。
2.1.9 語義化
1）【參考】盡量根據語義使用HTML標簽。
2.2 CSS編碼規范
2.2.1 文件引用
1）【強制】一律使用link的方式調用外部樣式。
2）【推薦】不要在<style>塊中使用@import；不要在頁面中使用<style>塊。
2.2.2 命名-組成元素
1）【強制】命名必須由字母、中劃線或數字組成且不能以數字或中劃線開頭。
2）【強制】不允許使用拼音與英文的混合命名，更不允許直接使用中文的方式；禁止同一個含義的內容，在同一個應用中出現多種不同的單詞與翻譯。
知識點
- map用于構建一個新數組，單純想遍歷數組應使用forEach
- 用
copy = {...original,c:3};取代copy = Object.assign(original,{c:3}); - 將類數組結構轉換為數組
const nodes = [...foo];const uniqueNodes = [...new Set(foo)]; //可以利用Set和...將數組去重
- ES5與ES6的相同點與不同點
 - platform設備)
