Web前端開發標準規範

時間  2019-11-07
標籤 web 前端 開發 標準 規範 欄目 HTML 简体版
原文   原文鏈接

web前端開發規範的意義

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

1、命名規則

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

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規範

一、頁面頭部

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

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標籤

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

  6. 標籤中屬性必須添加雙引號（非單引號)，應該按照特定的順序出現以保證易讀性；屬性順序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更加具體且應該儘可能少使用，因此將它放在第二位。
  7. boolean屬性指不須要聲明取值的屬性，XHTML須要每一個屬性聲明取值，可是HTML5並不須要；boolean屬性的存在表示取值爲true，不存在則表示取值爲false。
  8. 在編寫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示例webpack

    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}
::-webkit-input-placeholder{color:#B0B0B0}
:-moz-placeholder{color:#B0B0B0}
::-moz-placeholder{color:#B0B0B0}
:-ms-input-placeholder{color:#B0B0B0}

  • 媒體查詢順序由大到小css3

    @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的內容要用引號；屬性選擇器中的屬性值須要引號。

  • 空格git

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

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

    如下幾種狀況須要空格：

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

  • 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;
}
  • 採用flex佈局
  • 項目上線前先添加兼容性前綴 Autoprefixer，而後壓縮代碼

二、CSS框架

4、Javascript規範

一、Javascript引入方式

  • 通常狀況使用外部js：統一使用<script>標籤，少用@import（原生import有加載性能問題）， 使用webpack等打包工具的項目使用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.並且這種方式在開發過程當中會致使產生不少的冗餘代碼

二、Javascript代碼編寫

  • 目前只在使用了webpack等打包工具的時候才能用ES6語法，因此通常項目仍是採用ES5。
  • 一條語句一般以分號做爲結束符。
  • 變量必須先聲明再使用，即在每一個做用域開始前聲明這些變量。

  • 函數聲明使用表達式方式

    // bad
  const fn= function () {
  };
// good
  function fn() {
  }

  • 除了三目運算，if,else等禁止簡寫

    console.log(name);
 // 不推薦的書寫
 if (true)
     alert(name);
 console.log(name);
 // 不推薦的書寫
 if (true)
 alert(name);
 console.log(name)

 // 正確的書寫
 if (true) {
     alert(name);
 }

    使用三元運算符，但不要濫用

    (type==1?(agagin==1?'再售':'已售'):'未售')
 // 再多就不要用三元運算符！

三、Javascript框架以及插件

  • 必須掌握jQuery和Vue；
  • 工做中jQuery通常用在維護老項目，新項目通常都採用Vue。其餘框架稍做了解，遇到了去查文檔。（業餘時間能夠自學angular和React以及你喜歡的框架）
  • 移動端：Mint UI
  • PC端官網、商城： Element
  • PC端後臺管理系統：layui或者 iView
  • 輪播圖：swiper
  • 滾動插件：iScroll 或 better-scroll
  • 響應式官網： 儘可能使用媒體查詢自定義樣式，不推薦使用bootstrap(由於我不喜歡記那一堆類名^_^)。
  • 將經常使用的功能封裝在util.js中，你們共同完善；方便之後使用。

參考
Code Guide by @AlloyTeam
頁面前端規範

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程