這次帶給大家前端單體編碼有哪些規範，使用前端單體編碼規範的注意事項有哪些，下面就是實戰案例，一起來看一下。
不論是前端還是後台代碼，編碼規範是尤其重要的，特別是大的項目中，在想開啟之初就規範考代碼、格式、和要求，會減少很多工作量的，有利於程式碼的後期維護。
| #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 宣告之後。 | 範例 ############################################################################### 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-書寫規範性 |
圖片： 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中文網其他相關文章！
