前端單體編碼規範整理

時間 2019-11-16

原文原文鏈接

不管是前端仍是後臺代碼，編碼規範是尤爲重要的，特別是大的項目中，在想開啓之初就規範考代碼、格式、和要求，會減小不少工做量的，有利於代碼的後期維護。
歡迎你們繼續整理。
前端單體編碼規範整理表 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：
1.保證 favicon 可訪問，（根目錄放置 favicon.ico 文件，使用 link 指定 favicon）
如<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-書寫規範性圖片：
1.禁止 img 的 src 取值爲空。延遲加載的圖片也要增長默認的 src（src爲空會致使頁面重加載)；
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.只在必要的時候開啓音視頻的自動播放；php

在 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：css

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-邏輯正確性文本輸入框字符串長度以兩點爲基礎作限制：一、業務上是否要求；二、數據庫字段長度是否知足 49 JS-邏輯正確性查詢完成後，查詢條件應該保留在對應的輸入框中 50 JS-邏輯正確性是否對查詢結果進行了排序。 51 JS-邏輯正確性查詢區域的共計條數應該爲當前查詢的全部數據的總條數。而不是當前頁面的顯示條數 52 JS-邏輯正確性查詢條件輸入框應該去除先後空格後查詢轉載於猿2048:➧《前端單體編碼規範整理》前端