摘要：頁面名稱月影功能模塊，請在模塊之間加入注釋，中英文不做要求活動規則開始活動規則活動規則結束自定義函數。參考頁面前端規范

提高團隊的協作能力

提高代碼的復用利用率

可以寫出質量更高，效率更好的代碼

為后期維護提供更好的支持

命名使用英文語義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！

項目、目錄、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

常量采用全大寫方式， 以下劃線分隔；eg：MAX_COUNT

函數名采用駝峰命名，以動詞開始。 getName(), 返回類型是布爾類型，一般以is開頭，eg: isEnable();

變量和函數命名，不要擔心長度，一定要語義化合乎邏輯。eg: saveImageToPhotosAlbum()

變量和函數名不能以數字開始，不能使用保留字；jQuery對象以"$"符號開頭，私有變量以"_"開頭。

頁面頭部需要添加制作時間等信息。

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

... 
 


    
活動規則
    

        

            
{{index+1}}
            
{{item}}
        
    


 ... 

/* 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);

});

文檔類型統一使用html5的doctype：

lang屬性統一使用en，特殊場景特殊處理

字符編碼統一指定為"UTF-8"

頁面標題(Title)： 頁面名稱-產品中文全稱-官方網站-騰訊游戲-產品slogan，28個漢字以內

頁面關鍵字(Keywords)： Keywords為產品名、專題名、專題相關名詞，之間用英文半角逗號隔開

頁面描述(Description) ：不超過150個字符，描述內容要和頁面內容相關。

IE兼容模式

移動端禁止縮放

PC端頭部示范：

移動端頭部示范：

標簽必須合法且閉合、嵌套正確，標簽名需小寫，不要使用HTML5已經廢棄的標簽。eg：b、 em

自定義標簽需要符合語義化，必須小寫

標簽的自定義屬性以data-開頭，后面跟小寫單詞，多單詞使用下劃線連接如：

縮進使用Tab鍵不要使用空格鍵，webstorm中使用快捷鍵command+option+L（Ctrl+Alt+L）對齊

引入CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。css放在上面head中，JavaScript放在body下面緊臨

標簽中屬性必須添加雙引號（非單引號)，應該按照特定的順序出現以保證易讀性；屬性順序

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變得更少。刪除無意義的空標簽，不要用標簽名來設置樣式

一般情況使用外部樣式表：統一使用link標簽，少用@import（原生import有加載性能問題），sass、less、vue.js等文件使用import命令除外（因為最終前端構建工具會將引入文件編譯成一個css文件）。

個別情況使用內部樣式表：頁面非常簡單且樣式非常少的多帶帶頁面，如：純圖片海報頁面，純文字協議頁面

特殊情況才使用行內樣式：如：js動態獲取滾動高度：

style="height:{{scroll_height}}px;"

css頭部統一加上@charset聲明，如下： @charset "utf-8";

禁止使用ID選擇器來定義元素樣式

禁止使用層級過深的選擇器，最多3級。eg: ul.pro_list > li > p

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

PC端和移動端通用reset示例
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}

媒體查詢順序由大到小

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

空格

以下幾種情況不需要空格：
屬性名后
多個規則的分隔符","前
!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，然后壓縮代碼

阿里圖標庫

css3 動畫庫

Sass和Compass

一般情況使用外部js：統一使用

優點：
1.頁面代碼跟js代碼實現有效分離，降低耦合度
2.便于代碼的維護和擴展
3.有利于代碼的復用

內部js: 在直接在頁面的標簽內寫js代碼，vue項目多用此方式

優點：內部js代碼較為集中，與頁面結構的實現代碼耦合度較低，比較便于維護
缺點：js代碼僅限于當前頁面的使用，代碼無法被多個頁面重復使用，導致代碼冗余度較高

行內js: 直接嵌套在html的語句

開發中不推薦這種方式
1.因為這種方式跟頁面結構代碼耦合性太強了，后期維護很不方便，
2.而且這種方式在開發過程中會導致產生很多的冗余代碼

目前只在使用了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?"再售":"已售"):"未售")
 // 再多就不要用三元運算符！

必須掌握jQuery和Vue；

工作中jQuery一般用在維護老項目，新項目一般都采用Vue。其他框架稍作了解，遇到了去查文檔。（業余時間可以自學angular和React以及你喜歡的框架）

移動端：Mint UI

PC端官網、商城： Element

PC端后臺管理系統：layui或者 iView

輪播圖：swiper

滾動插件：iScroll 或 better-scroll

響應式官網： 盡量使用媒體查詢自定義樣式，不推薦使用bootstrap(因為我不喜歡記那一堆類名^_^)。

將常用的功能封裝在util.js中，大家共同完善；方便以后使用。

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