Web前端開發標準規範

時間 2019-11-14

標籤 web 前端開發標準規範欄目 HTML 简体版

原文原文鏈接

web前端開發規範的意義

提升團隊的協做能力
提升代碼的複用利用率
能夠寫出質量更高，效率更好的代碼
爲後期維護提供更好的支持

1、命名規則

命名使用英文語義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！
項目、目錄、html/css/js等文件命名所有采用小寫方式，如下劃線分隔。eg：my_project_name
html/css/js文件名一一對應參考微信小程序.eg: login.html、login.css、login.js
class、圖片、視頻、音頻採用小寫方式，如下劃線或中劃線分隔；eg：btn-play或btn_play
id可採用駝峯命名;eg：play或playGame
變量名採用小寫方式，如下劃線分隔；應爲名詞,eg： product,product_detail
函數名採用駝峯命名，以動詞開始。 getName(), 返回類型是布爾類型，通常以is開頭，eg: isEnable();
變量和函數命名，不要擔憂長度，必定要語義化合乎邏輯。eg: saveImageToPhotosAlbum()

2、註釋

頁面頭部須要添加製做時間等信息。

<head>    
    <title>頁面名稱</title>
     <!-- 月影 2019-02-19  -->
</head>

功能模塊，請在模塊之間加入註釋，中英文不作要求：

... 
 
<!-- 活動規則 開始  -->
<div class="rules-wrapper">
    <div class="rules-title">活動規則</div>
    <div class="rules-list">
        <div class="rules-item" v-for='item,index in rules_list'>
            <div class="rules-num">{{index+1}}</div>
            <div class="rules-text">{{item}}</div>
        </div>
    </div>
</div>
<!-- 活動規則 結束  -->
 ...

/* rules start*/
.rules-wrapper{...}
.rules-title{...}
.rules-list{...}
.rules-item{...}
.rules-num{...}
.rules-text{...}
/* rules end*/

自定義函數。請註明函數的調用方式，包括函數的用途、參數類型等。

/* JQ公告滾動 封裝函數
* 參數說明
* obj : 動畫的節點，本例中是ul
* top : 動畫的高度，本例中是-35px;注意向上滾動是負數
* time : 動畫的速度，即完成動畫所用時間，本例中是500毫秒，即marginTop從0到-35px耗時500毫秒
* function : 回調函數，每次動畫完成，marginTop歸零，並把此時第一條信息添加到列表最後;
* 
*/
function noticeUp(obj,top,time) {
    $(obj).animate({
        marginTop: top
    }, time, function () {
        $(this).css({marginTop: "0"}).find(":first").appendTo(this);
    })
}
$(function () {
    // 調用 公告滾動函數
    setInterval("noticeUp('.notice ul','-35px',500)", 2000);

});

3、HTML規範

一、頁面頭部

文檔類型統一使用html5的doctype：
lang屬性統一使用en，特殊場景特殊處理
字符編碼統一指定爲'UTF-8'
頁面標題(Title)：頁面名稱-產品中文全稱-官方網站-騰訊遊戲-產品slogan，28個漢字之內
頁面關鍵字(Keywords)： Keywords爲產品名、專題名、專題相關名詞，之間用英文半角逗號隔開
頁面描述(Description) ：不超過150個字符，描述內容要和頁面內容相關。
IE兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
移動端禁止縮放

PC端頭部示範：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 月影 2019-02-19  -->
    <title>抓金角銀角大王每週末放送裝備 - 地下城與勇士官方網站 - 騰訊遊戲</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="keywords"
          content="英雄聯盟,lol,lol新手禮包,lol攻略,lol視頻,lol視頻攻略,英雄資料,英雄聯盟戰爭學院,明星解說視頻,101戰爭學院,英雄,攻略,WCG,點亮圖標,賽事"/>
    <meta name="description"
          content="英雄聯盟官方網站，海量風格各異的英雄，豐富、便捷的物品合成系統，遊戲內置的匹配、排行和競技系統，首創的「召喚師」系統及技能、符文、天賦等系統組合，必將帶你進入一個嶄新而又豐富多彩的遊戲世界。"/>
</head>
<body>
</body>
</html>

移動端頭部示範：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 月影 2019-02-19  -->
    <title>頁面名稱-產品中文全稱-官方網站-騰訊遊戲-產品slogan</title>
    <!-- 禁止縮放 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 爲了防止頁面數字被識別爲電話號碼，可根據實際須要添加： -->
    <meta name="format-detection" content="telephone=no">
    <!-- 讓添加到主屏幕的網頁再次打開時全屏展現，可添加： 刪除默認的蘋果工具欄和菜單欄  -->
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="Description" content="頁面的描述內容"/>
    <meta name="Keywords" content="頁面關鍵字"/>
    <!-- External CSS -->
    <link rel="stylesheet" href="demo.css">
    <!-- In-document CSS -->
    <style>

    </style>
</head>
<body>

<!-- External JS -->
<script src="demo.js"></script>

<!-- In-document JS -->
<script>

</script>
</body>
</html>

二、HTML標籤

標籤必須合法且閉合、嵌套正確，標籤名需小寫，不要使用HTML5已經廢棄的標籤。eg：b、 em
自定義標籤須要符合語義化，必須小寫
標籤的自定義屬性以data-開頭，後面跟小寫單詞，多單詞使用下劃線鏈接如：<a data-goods_num='18' href="javascript:;" ></a>
縮進使用Tab鍵不要使用空格鍵，webstorm中使用快捷鍵command+option+L（Ctrl+Alt+L）對齊
引入CSS 和 JavaScript 文件時通常不須要指定 type 屬性，由於 text/css 和 text/javascript 分別是它們的默認值。css放在上面head中，JavaScript放在下面緊臨</body>
標籤中屬性必須添加雙引號（非單引號)，應該按照特定的順序出現以保證易讀性；屬性順序html

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是爲高可複用組件設計的，因此應處在第一位；
id更加具體且應該儘可能少使用，因此將它放在第二位。
boolean屬性指不須要聲明取值的屬性，XHTML須要每一個屬性聲明取值，可是HTML5並不須要；boolean屬性的存在表示取值爲true，不存在則表示取值爲false。
在編寫HTML代碼時，須要儘可能避免多餘的父節點；不少時候，須要經過迭代和重構來使HTML變得更少。刪除無心義的空標籤，不要用標籤名來設置樣式

3、CSS規範

一、CSS引入方式

通常狀況使用外部樣式表：統一使用link標籤，少用@import（原生import有加載性能問題），sass、less、vue.js等文件使用import命令除外（由於最終前端構建工具會將引入文件編譯成一個css文件）。前端
```
<link rel="stylesheet" href="xxx.css">
```
個別狀況使用內部樣式表：頁面很是簡單且樣式很是少的單獨頁面，如：純圖片海報頁面，純文字協議頁面vue
```
<style>
...
</style>
```
特殊狀況才使用行內樣式：如：js動態獲取滾動高度：html5
```
style="height:{{scroll_height}}px;"
```

二、CSS代碼風格

css頭部統一加上@charset聲明，以下： @charset "utf-8";
禁止使用ID選擇器來定義元素樣式
禁止使用層級過深的選擇器，最多3級。eg: ul.pro_list > li > p

除非是樣式reset須要，禁止對純元素選擇器設置特定樣式，避免樣式污染java

PC端和移動端通用reset示例git

body,html{width:100%;min-height:100%;/*移動端*/-webkit-user-select:none;user-select:none/*
禁止選中文本（如無文本選中需求，此爲必選項） */}
body{background-color:#fff;color:#333;font-size:16px;font-family:PingFangSC-Regular}
a,body,button,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,select,table,td,textarea,th,tr,ul{box-sizing:border-box;margin:0;padding:0;border:0}
button,input,select,textarea{outline:0;font-size:100%}
h1,h2,h3,h4,h5,h6{font-size:100%} 
li,ol,ul{list-style:none}
a{cursor:pointer} 
a,a:hover{text-decoration:none}

媒體查詢順序由大到小github

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {} 
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) { }

縮進使用soft tab（4個空格）
分號每一個屬性聲明末尾都要加分號。
引號最外層統一使用雙引號；url的內容要用引號；屬性選擇器中的屬性值須要引號。

空格web

如下幾種狀況不須要空格：

屬性名後
多個規則的分隔符','前
!important '!'後
屬性值中'('後和')'前
行末不要有多餘的空格

如下幾種狀況須要空格：

屬性值前
選擇器'>', '+', '~'先後
'{'前
!important '!'前
@else 先後
屬性值中的','後
註釋'/*'後和'*/'前

CSS屬性的聲明順序與性能無關，可是爲了易於閱讀統一規範按以下順序css在線整理

.declaration-order {
    /* 定位 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    float: right;
    /* 盒模型 */
    display: block;
    width: 100px;
    height: 100px;
    /* 外觀 */
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background-color: #f5f5f5;
    /* 排版 */
    color: #333;
    text-align: center;
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    /*透明度*/
    opacity: 1;
}

4、Javascript規範

一、Javascript引入方式

通常狀況使用外部js：統一使用<script>標籤，少用@import（原生import有加載性能問題），vue.js等文件使用import命令除外。js在body底部緊貼</body>引用，先引框架js的再引工具類js而後私有js的最後寫內部的js。以下
```
<script src="./plugins/layui/layui.js"></script>
 <script src="./plugins/vue/vue.min.js"></script>
 <script src="./plugins/js/util.js"></script>
 <script src="./js/index.js"></script>
 <script> ... </script>
```
優勢：
1.頁面代碼跟js代碼實現有效分離，下降耦合度
2.便於代碼的維護和擴展
3.有利於代碼的複用
內部js: 在直接在頁面的<script></script>標籤內寫js代碼，vue項目多用此方式
```
<script>
    layui.use('console', layui.factory('console'));
</script>
```
優勢：內部js代碼較爲集中，與頁面結構的實現代碼耦合度較低，比較便於維護
缺點：js代碼僅限於當前頁面的使用，代碼沒法被多個頁面重複使用，致使代碼冗餘度較高
行內js: 直接嵌套在html的語句
```
<input type="button" onclick="alert('行內引入')" value="button" name="button">
```
開發中不推薦這種方式
1.由於這種方式跟頁面結構代碼耦合性太強了，後期維護很不方便，
2.並且這種方式在開發過程當中會致使產生不少的冗餘代碼