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