不論是前端還是後臺程式碼，編碼規範是尤其重要的，特別是大的專案中，在想開啟之初就規範考程式碼、格式、和要求，會減少很多工作量的，有利於程式碼的後期維護。
歡迎大家繼續整理。
| No |
範疇 |
驗證內容 |
| 1 |
頁面設計 |
列表標題居中顯示。 |
| 2 | 頁面設計 | 查詢資料區域資料展示的樣式： 1.不定長中文，不定長英文，不定長中英文，不定長英數字靠左 2.定長，定值資料居中，日期，時間，序號居中 3.金額：靠右 |
| 3 | 共通-書寫規範性 | 每個檔案頭是否有正確的註釋 |
| 4 | 共通-書寫規範性 | 每個function是否有正確註釋 |
| 5 | 共通-書寫規範性 | 每個配置檔案相關內容是否有註釋 |
| 6 | 共通-書寫規範性 | 每個邏輯塊是否有註釋 |
| 7 | 共通-書寫規範性 | 是否有未使用的變數及引用 |
| 8 | 共通-書寫規範性 | 縮排使用tab，設定tab為4個空格 |
| 9 | HTML-書寫規範性 | 標籤1： 1.標籤名必須使用小寫字母，如<p></p>； 2.對於無需自閉合的標籤，不允許自閉合，如 input、br、img、hr 等； 3.對 HTML5 中規定閉合標籤，不允許省略閉合標籤。 |
| 10 | HTML-書寫規範性 | 標籤2： 1 標籤使用必須符合標籤巢狀規則，如 div 不得置於 p 中，tbody 必須置於 table 中。 2.HTML 標籤的使用應該遵循標籤的語義。常見標籤語義 p – 段落 h1,h2,h3,h4,h5,h6 – 層級標題 strong,em – 強調 ins – 插入 del – 刪除 abbr – 縮寫 code – 程式碼標識 cite – 引述來源作品的標題 q – 引用 blockquote – 一段或長篇引用 ul – 無序列表 ol – 有序列表 dl,dt,dd – 定義表格 |
| 11 | HTML-書寫規範性 | 屬性： 1.屬性名必須使用小寫字母； 2.屬性值必須用雙引號包圍； 3.自定義屬性建議以 xxx- 為字首，推薦使用 data- ，如<ol data-ui-type=”Select”></ol>。 |
| 12 | HTML-書寫規範性 | 編碼1： 1.使用 HTML5 的 doctype 來啟用標準模式，建議使用大寫的 DOCTYPE。 2.頁面必須包含 title 標籤宣告標題。 3.title 必須作為 head 的直接子元素，並緊隨 charset 宣告之後。 例<head> <meta charset=”UTF-8″> <title>頁面標題</title> </head> |
| 13 | HTML-書寫規範性 |
編碼2： 如<link rel=”shortcut icon” href=”path/to/favicon.ico”>； 2.若專案為移動端或者為響應式佈局，必須指定頁面的 viewport。 |
| 14 | HTML-書寫規範性 | 引入： 1.引入 CSS 時必須指明 rel=”stylesheet”，如<link rel=”stylesheet” href=”page.css”>； 2.引入 CSS 和 JavaScript 時可以無須指明 type 屬性，（有預設值）； 3.在 head 中引入頁面需要的所有 CSS 資源，JavaScript 應當放在頁面末尾，或採用非同步載入。（將 script 放在頁面中間將阻斷頁面的渲染）。 |
| 15 | HTML-書寫規範性 |
圖片： 2.避免為 img 新增不必要的 title 屬性，(多餘的 title 影響看圖體驗，並且增加了頁面尺寸)； 3.為重要圖片新增 alt 屬性； 4.有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現。 |
| 16 | HTML-書寫規範性 | 表單： 1.有文字標題的控制元件必須使用 label 標籤將其與其標題相關聯； 2.使用 button 元素時必須指明 type 屬性值； 3.負責主要功能的按鈕在 DOM 中的順序應靠前，（建議如此，具體以設計為準）。 |
| 17 | HTML-書寫規範性 | 視訊與音訊： 1.在支援 HTML5 的瀏覽器中優先使用 audio 和 video 標籤來定義音視訊元素； 2.只在必要的時候開啟音視訊的自動播放； 3. 在 object 標籤內部提供指示瀏覽器不支援該標籤的說明，如<object width=”100″ height=”50″ data=”something.swf”>DO NOT SUPPORT THIS TAG</object>。 |
| 18 | CSS-書寫規範性 | 樣式行長度 每行不得超過 120 個字元，除非單行不可分割。 |
| 19 | CSS-書寫規範性 | 命名： 1.class、id必須單詞全字母小寫，單詞間以 – (中劃線)分隔； 2.class、id 必須代表相應模組或部件的內容或功能，不得以樣式資訊進行命名，如 left, right, center, red, black等單詞單獨出現在命名裡； 3.class必須加上相應字首（避免全域性汙染），如 g-代表全域性樣式、m- 代表模組的樣式、ui-代表元件的樣式等，具體以專案規定為準； 4.單個樣式不能允許出現 !important； 5.不允許 class 只用於讓 JavaScript 選擇某些元素，建立無樣式資訊的 class，（使用id）； 6.元素 id 必須保證頁面唯一； 7.同一頁面，不同的標籤，避免使用相同的 name 與 id（同一標籤可使用）。 |
| 20 | CSS-書寫規範性 | 當一個 rule 包含多個 selector 時，每個選擇器宣告必須獨佔一行。 |
| 21 | CSS-書寫規範性 | 屬性選擇器中的值必須用雙引號包圍。如input[name=”acd”] {……} |
| 22 | CSS-書寫規範性 | 當數值為 0 – 1 之間的小數時，省略整數部分的 0。如 opacity: .8 |
| 23 | CSS-書寫規範性 | url() 函式中的路徑不加引號。如 background: url(bg.png); |
| 24 | CSS-書寫規範性 | 長度為 0 時須省略單位。如 padding: 0 5px |
| 25 | CSS-書寫規範性 | 樣式程式碼應獨立儲存在字尾名為.css的檔案中，非特殊情況下不得寫行間樣式。 |
| 26 | CSS-書寫規範性 | RGB顏色值必須使用十六進位制記號形式 #rrggbb。不允許使用 rgb()。 |
| 27 | CSS-書寫規範性 | 顏色： 1.RGB顏色值必須使用十六進位制記號形式 #aabbcc，不允許使用 rgb(); 2.顏色值可以縮寫時，必須使用縮寫形式;如#fff,#000 3.顏色值不允許使用命名色值；如使用red green等不確定值 4.顏色值都統一使用小寫英文字母。 |
| 28 | CSS-書寫規範性 | 字型1： 1. font-family 屬性中的字型族名稱應使用字型的英文 Family Name，其中如有空格，須放置在引號中，嚴禁使用中文。例 font-family: “Microsoft YaHei”; 字型 作業系統 Family Name 宋體 (中易宋體) Windows SimSun 黑體 (中易黑體) Windows SimHei 微軟雅黑 Windows Microsoft YaHei 微軟正黑 Windows Microsoft JhengHei 華文黑體 Mac/iOS STHeiti 冬青黑體 Mac/iOS Hiragino Sans GB 文泉驛正黑 Linux WenQuanYi Zen Hei 文泉驛微米黑 Linux WenQuanYi Micro Hei |
| 29 | CSS-書寫規範性 | 字型2： 1.font-family 按「西文字型在前、中文字型在後」、「效果佳 (質量高/更能滿足需求) 的字型在前、效果一般的字型在後」的順序編寫，最後必須指定一個通用字型族( serif / sans-serif )； 例 font-family: Arial, sans-serif; |
| 30 | CSS-書寫規範性 | 字號： 1.需要在 Windows 平臺顯示的中文內容，其字號應不小於 12px； 2.需要在 Windows 平臺顯示的中文內容，不要使用除 normal 外的 font-style。 |
| 31 | JS-書寫規範性 | 命名： 常見的幾種命名：駝峰命名thisIsAnApple 、帕斯卡命名ThisIsAnApple、下劃線命名this_is_an_apple、中劃線命名this-is-an-apple 1.方法/屬性名、變數名、引數名、名稱空間、函式名，必須使用駝峰命名； 2.類名、列舉名、建構函式，必須使用帕斯卡命名； 3.常量名、列舉的屬性：必須使用全部大寫的下劃線命名法，如IS_DEBUG_ENABLED； 4.私有（保護）成員(屬性、函式等)：必須以下劃線_開頭； 5.boolean型別的應當使用is、has等起頭，表示其型別； 6.命名同時還需要關注語義，如 變數名應當使用名詞、函式名應當用動賓短語(getAccListData)、類名應當用名詞。 |
| 32 | JS-書寫規範性 | JavaScript程式應獨立儲存在字尾名為.js的檔案中。 |
| 33 | JS-書寫規範性 | 避免每行超過80個字元。 |
| 34 | JS-書寫規範性 | 儘量減少全域性變數的使用，不要讓區域性變數覆蓋全域性變數。 |
| 35 | JS-書寫規範性 | 可以使用共通函式的情況下，是否使用了共通函式。 |
| 36 | JS-書寫規範性 | 語句： 1.每一行最多隻包含一條語句，把;(分號)放到每條簡單語句的結尾處； 2.return 語句 一條有返回值的return語句不要使用( )(括號)來括住返回值。如果返回表示式,則表示式應與return 關鍵字在同一行,以避免誤加分號錯誤； 3.避免使用continue語句，它很容易使得程式的邏輯過程晦澀難懂； 4.eval是JavaScript中最容易被濫用的方法，避免使用。 |
| 37 | JS-書寫規範性 | ES5語法必須將程式碼包裹成一個 IIFE(Immediately-Invoked Function Expression)，用以建立獨立隔絕的定義域，防止全域性名稱空間被汙染。 |
| 38 | JS-書寫規範性 | 程式碼中加入js嚴格模式‘use strict` |
| 39 | JS-書寫規範性 | 變數宣告：使用var或let宣告變數，不指定變數將被隱式地宣告為全域性變數，這將對變數難以控制。 |
| 40 | JS-程式疏通性 | 明智地使用真假判斷，if(a == true) 是不同於 if(a) 的，這種判斷會通過特殊的操作將其轉換為 true 或 false，下列表示式統統返回 false：false, 0, undefined, null, NaN,（空字串）. |
| 41 | JS-程式疏通性 | 避免在迴圈中建立函式，在簡單的迴圈語句中加入函式是非常容易形成閉包而帶來隱患。 |
| 42 | JS-程式疏通性 | 避免在語句塊內宣告函式，嚴格模式下是會報語法錯誤。 |
| 43 | JS-程式疏通性 | 用陣列和物件字面量來代替陣列和物件構造器，陣列構造器很容易讓人在它的引數上犯錯。 |
| 44 | JS-程式疏通性 | 三元條件判斷（if 的快捷方法），用三元操作符分配或返回語句，避免在複雜的情況下使用。 |
| 45 | JS-程式疏通性 | 字串統一使用單引號(‘)，不使用雙引號(“)，這在建立 HTML 字串非常有好處：如 var msg = `This is some HTML <div class=”makes-sense”></div>`. |
| 46 | JS-程式疏通性 | 不要冗餘程式，以下的例子作為參考： ・存在未使用的子程式 ・重複初始化 ・定義未使用的變數 |
| 47 | JS-邏輯正確性 | 沒有奇怪的邏輯（空函式及未處理的分支等） |
| 48 | JS-邏輯正確性 | 文字輸入框字串長度以兩點為基礎做限制：1、業務上是否要求；2、資料庫欄位長度是否滿足 |
| 49 | JS-邏輯正確性 | 查詢完成後，查詢條件應該保留在對應的輸入框中 |
| 50 | JS-邏輯正確性 | 是否對查詢結果進行了排序。 |
| 51 | JS-邏輯正確性 | 查詢區域的共計條數應該為當前查詢的所有資料的總條數。而不是當前頁面的顯示條數 |
| 52 | JS-邏輯正確性 | 查詢條件輸入框應該去除前後空格後查詢 |