简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  前端單體編碼有哪些規範

前端單體編碼有哪些規範

php中世界最好的语言
php中世界最好的语言原創
2018-03-19 10:42:511644瀏覽

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

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

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 標籤內部提供指示瀏覽器不支援該標籤的說明，如DO NOT SUPPORT THIS TAG。
    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中文網其他相關文章！

    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：Vue動態建立和刪除資料的方法分享下一篇：Vue動態建立和刪除資料的方法分享

    相關文章

    看更多