前端單體編碼有哪些規範

這次帶給大家前端單體編碼有哪些規範，使用前端單體編碼規範的注意事項有哪些，下面就是實戰案例，一起來看一下。

  不論是前端還是後台代碼，編碼規範是尤其重要的，特別是大的項目中，在想開啟之初就規範考代碼、格式、和要求，會減少很多工作量的，有利於程式碼的後期維護。

1.使用HTML5 的doctype 來啟用標準模式，建議使用大寫的DOCTYPE。 #29

前端單體編碼規格整理表

#No
	##範疇 ############驗證內容##################1############ #####頁面設計######	清單標題會居中顯示。
2	# 頁面設計	查詢資料區域資料展示的樣式： 1.不定長中文，不定長英文，不定長中英文，不定長英數字靠左 2.定長，定值數據居中，日期，時間，序號居中 3.金額：靠右
3	共通-書寫規範性	每個檔案頭是否有正確的註解
4	共通-書寫規範性	每個function是否有正確註解
5	共通-書寫規範性	# 每個設定檔相關內容是否有註解
6	共通-書寫規範性	每個邏輯區塊是否有註解
7	#共通-書寫規範性	是否有未使用的變數及引用
8	#共通-書寫規範性	# 縮排使用tab，設定tab為4個空格
#9	HTML -書寫規範性	標籤1： #1.標籤名稱必須使用小寫字母，如 ; 2.對於無需自閉合的標籤，不允許自閉合，如input、br、img、hr 等； 3.對HTML5 中規定閉合標籤，不允許省略閉合標籤。
10	# HTML-書寫規範性	標籤2 ： 1 標籤使用必須符合標籤嵌套規則，如p 不得置於p 中，tbody 必須置於table 中。 2.HTML 標籤的使用應該遵循標籤的語意。常見標籤語意     p - 段落     h1,h2,h3,h4,h5,h6 - 層級標題     strong,em - 強調 #    strong,em - 強調為 #    strong,em - 強調為 #    strong,em - 強調為     ins - 插入     del - 刪除#########    abbr - 縮寫#########    code - 代碼標識#​​####### #    cite - 引述來源作品的標題#########    q - 引用#######    blockquote - 一段或長篇引用     ul - 無序列表     ol - 有序清單     dl,dt, dd - 定義表格
11	# HTML-書寫規範性
		## 屬性： 1.屬性名稱必須使用小寫字母； #2.屬性值必須用雙引號包圍； 3.自訂屬性建議以xxx- 為前綴，建議使用data- ，如 。 12 # HTML-書寫規範性  編碼1 ：
2.頁面必須包含 title 標籤宣告標題。	3.title 必須作為 head 的直接子元素，並且緊接在 charset 宣告之後。	範例     #    13 ############################################################################### HTML-書寫規範性###############編碼2：##########1.保證favicon 可訪問，（根目錄放置favicon.ico 文件，使用link指定favicon）############如；   ############# #2.若項目為行動端或為###響應式佈局###，必須指定頁面的viewport。 ######
14	HTML-書寫規範性	引入： 1.引入CSS 時必須指明rel="stylesheet"，如; ##2.引入CSS 和JavaScript 時可以無須指明type 屬性，（有預設值）； 3.在head 中引入頁面所需的所有CSS 資源，JavaScript 應放在頁面末尾，或採用非同步載入。 （將 script 放在頁面中間將阻斷頁面的渲染）。
15	# HTML-書寫規範性	圖片： 1.禁止img 的src 取值為空。延遲載入的圖片也要增加預設的src（src為空會導致頁面重載)；                                                         12.看圖體驗，並且增加了頁面尺寸); 3.為重要圖片添加alt 屬性； 4.有下載需求的圖片採用img 標籤實現，無下載需求的圖片採用CSS 背景圖實現。
16	HTML-書寫規格	表單： 1.有文字標題的控制項必須使用label 標籤將其與其標題相關聯； 2.使用button 元素時必須指明type 屬性值; 3.負責主要功能的按鈕在DOM 中的順序應靠前，（建議如此，具體以設計為準）。
17	# HTML-書寫規範性	影片與音訊： 1.在支援HTML5 的瀏覽器中優先使用audio 和video 標籤來定義音訊視訊元素； ##2.只在必要的時候開啟音影片的自動播放； 3. 在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       SimHei 微軟雅黑         Windows     Microsoft YaHei 華文黑體         Mac/iOS     STHeiti 冬青黑體              WenQuanYi Zen Hei 文泉驛微米黑     Linux       WenQuanYi Micro Hei
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 '.
#46	## JS-程式疏通性	不要冗餘程序，以下的例子作為參考： ・存在未使用的子程序 ・重複初始化・定義未使用的變數
47	JS-邏輯正確性	# 沒有奇怪的邏輯（空函數及未處理的分支等）
#48	JS-邏輯正確性	文字輸入框字串長度以兩點為基礎做限制：1、業務上是否要求；2、資料庫欄位長度是否符合
49	JS-邏輯正確性	查詢完成後，查詢條件應該保留在對應的輸入框中
50	JS-邏輯正確性	是否對查詢結果進行了排序。
51	# JS-邏輯正確性	## 查詢區域的共計條數應該為目前查詢的所有資料的總條數。而不是目前頁面的顯示條數
52	JS-邏輯正確性	查詢條件輸入方塊應該去除前後空格後查詢

################################# ########################################################### ########################################################### ########################################相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########Safari瀏覽器select下拉清單文字太長不換行的解決方法###############HTML與CCS結合#########

以上是前端單體編碼有哪些規範的詳細內容。更多資訊請關注PHP中文網其他相關文章！