前端規範整理

時間 2019-11-19

標籤前端規範整理简体版

原文原文鏈接

前端開發規範----細則

1、前端開發規範目的

爲提升團隊協做效率，便於後臺人員添加功能及前端後期優化維護，輸出高質量的文檔，同時爲網站有一個更好的前端架構及網站的發展及將來打好一個基礎。css

2、基本準則

符合web標準，語義化html，結構表現行爲分離，兼容性優秀。
頁面性能良好，代碼要求簡潔明瞭有序，儘量的減少服務器負載，保證最快的解析速度。
頁面的可維護性強，後期維護起來簡單快捷
順應前端發展趨勢

3、前端規範整體內容

1. HTML前端規範

1.1 文檔模式（doctype）遵循規範html

前端網站遵循的文檔模式爲XHTML1.0 Transitional模式，參考最新改版的網站（taobao.com）及HTML發展趨勢，頁面所遵循的文檔模式應改成<!DOCTYPE html>。前端

1.2 語義化標籤（待測試）程序員

隨着HTML5語義化標籤的出現，HTML原來以DIV佈局的方式也慢慢的在改變；目前經常使用的語義化標籤有article nav aside section header footer hgroup；其使用方式大體以下web

注意：因語義化在低版本的瀏覽器中不識別，因此要作處理，目前處理的方法是用JS的Document.createElement的方式，把須要用到的標籤添加到window對象中。chrome

1.3 Css和Js引入順序數組

爲網站性能考慮，頁面的CSS都在head中引入，JS在底部引入瀏覽器

1.4 ID、Class命名緩存

ID採用駝峯式命名法，如：mainMenuNav、subContentList等服務器

Class採用下劃線命名法，如：name_list、main_menu_content等

經常使用的詞彙以下：

頁　眉：header
內　容：content
容　器：container
頁　腳：footer
版　權：copyright　
導　航：menu
主導航：mainMenu
子導航：subMenu
標　志：logo
標　語：banner
標　題：title
側邊欄：sidebar
圖　標：Icon
注　釋：note
搜　索：search
按　鈕：btn
登　錄：login
鏈　接：link
信息框：manage

1.5 meta 中name和http-equiv

這兩塊是頁面中的重要特性的設置，但全部頁面設置格式基本相同，因此可參考網站首頁。

1.6 產品圖片必須加上alt屬性；給重要的元素和截斷的元素加上title；能夠的話，儘可能給全部圖片都設定好高度和寬度；目的:有利於seo，搜索引擎的爬蟲。

1.7 給區塊代碼及重要功能(好比循環)加上註釋, 方便後臺程序員嵌套模版；

<div>sdddfdsss</div>

1.8 特殊符號使用: 儘量使用代碼替代: 好比 <(<) & >(>) & 空格( ) & ?(?) 等等；

經常使用特殊符號對照表：

￥ ¥

《 «

< <

> >

2. Css前端規範

2.1 Css中變量命名規範

Css中變量包括ID、CLASS、標籤，其中ID和CLASS在HTML規範1.4有規定

2.2 Css中背景圖片

Css中的背景圖片能夠合併的都合併成一張圖片，這樣能夠減小頁面的HTTP請求；涉及到應用到背景圖片的Css都放置Css文件中的頂部，這樣便於後期維護。

2.3 Css文件中，單獨的樣式定義，不要折行，這樣便於瀏覽和查看，頁易於維護

2.4 頁面中較爲公用的模塊（如：點評、POI、在線問答），其Css要獨立成單獨的Css文件，這樣便於不一樣類頁面之間直接引用和後期統一維護

2.5 Css3的使用規範

Css3新增的屬性有border-radius,box-shadow,transition,transform,animation,@font-face, gradient等，這些新的屬性雖然兼容性還有些問題，可是能夠在不破壞低版本瀏覽器頁面樣式的狀況下，豐富高版本瀏覽器的交互；因此建議適量的使用。

2.6 Font-family屬性值用英文，中/英文對照表以下

2.7 待新增

3. Js前端規範

3.1 縮進

4個tab

3.2 語句結尾

必需要有分號

3.3 命名

變量和方法名統一使用駝峯命名法（小）。
JS文件統一使用駝峯命名法（大）。
變量中禁止使用動詞開頭，好比禁止使用get/set等，須要以名詞開頭。方法命名需要以動詞開頭，文件名稱一概以名詞開頭；

好的變量命名 var userName = 「」;

很差的變量命名 var UserName = 「」;

好的方法命名 function getUserName(){…};

很差的方法命名 function getusername(){…};

常量一概使用大寫表示單詞和單詞之間使用(_)下劃線進行區分。

好的常量定義 var MAX_COUNT = 10;

構造函數的命名以大寫字母開始（大寫駝峯）

好的構造函數 function HotelList(){…}

直接量

字符串定義 var userName = 「」;

數字定義 var count = 0;

布爾定義 var flag = false;

預約義對象 var obj = null;

對象直接量 var book = {};

數組直接量： var books = [];

註釋

//單行註釋

重要的邏輯語句以前須要添加單行註釋

多行註釋

/**

*註釋

每一個方法以前須要添加多行註釋

文檔註釋

//////////////////////////////////////////////

// 這個文件是途牛 NGBOSS 系統項目的一部分

//////////////////////////////////////////////

/**

* 功能說明：…..

* @author: 做者姓名 (xxx@tuniu.com)

* @version: xxxx.js 2013-09-17 14:21:30

3.4 待定

4. 圖片前端規範

4.1 背景圖

a) 能夠合併的背景圖合併到統一張圖片中，即CSS Sprite

b) 合併後的圖片在CSS引用時，放在CSS文件的最頂部

c) Font-face，可使用的儘可能使用

4.2 產品圖

a) 首屏以外的產品圖片都異步加載

b) 產品圖片的尺寸肯定的，定義樣式時要把寬和高固定

4.3 訂單

5. 前端性能規範

5.1 網站前端優化 – DOM

DOM優化方法

目前對DOM優化採用的方法是不渲染，即將對SEO不重要的內容用textarea或者script包裹，這樣的話他們在渲染時就會被當作字符串而不會解析成節點。

5.2 網站前端優化 – JS

JS是除圖片外，對前端性能影響最大的一個方面，也是最難優化的。整體來講，JS對性能有影響體如今兩個階段，一個是JS的下載階段，一個是執行階段。

JS同步時，下載和執行階段解析器都會暫停，等待JS下載和執行；而jS異步時，JS下載不會暫停解析器，所以不會阻塞頁面，可是執行時，仍然會暫停解析器。因此，對JS處理方式通常是異步而且放在頁面底部。這樣能夠對頁面的影響降到最小。

JS另外一個難點就是頁面中的JS代碼的邏輯處理，能夠用dynaTrace AJAX跟蹤查看。

5.3 網站前端優化 – 重繪&迴流

當呈現樹中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(其實我以爲叫從新佈局更簡單明瞭些)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。

當呈現樹中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。

5.4 這塊內容是和瀏覽器渲染方式息息相關的，有興趣的童靴能夠在網站多找些資料；這裏只介紹些平時咱們可能使用的一些會形成重繪&迴流的方法，及改進意見

a) 不要一個個改變元素的樣式屬性，最好直接改變class_name，但class_name是預先定義好的樣式，不是動態的，若是你要動態改變一些樣式，則使用cssText來改變

b) 讓要操做的元素進行"離線處理"，處理完後一塊兒更新，這裏所謂的"離線處理"即讓元素不存在呈現樹中

c) 不要常常訪問會引發瀏覽器flush隊列的屬性，若是你確實要訪問，就先讀取到變量中進行緩存，之後用的時候直接讀取變量就能夠了

d) 考慮你的操做會影響到呈現樹中的多少節點以及影響的方式，影響越多，花費確定就越多

5.5 待定

6. SEO前端規範

6.1 可抓取性

a) 全部SEO內容中的連接採用文字而且包含關鍵詞，不得采用僅僅圖片、flash、iframe以及AJAX等特殊方式加載，保證連接可被搜索引擎爬蟲抓取。上線前採用Lynx瀏覽器或者採用在線版：http://lynx.itlearner.com/檢查連接的可抓取狀況。

b) 全部的SEO內容應當直接顯示在源代碼中，不要使用sessionID, DHTML, cookies, Javascript(textarea), Flash等技術所展示內容。採用Lynx瀏覽器或者採用在線版：http://lynx.itlearner.com/檢查內容的展現狀況。

c) 不要將文字隱藏在圖片以後，或者文字顏色與背景色相同，會被斷定爲隱藏內容。惟一可行的方法是使用text-indent屬性。

6.2 標準化

a) 遵循xhtml規則，全部標籤必須閉合，好比<img /> <br />不能忘記添加。全部頁面改版或上線前，必須使用工具驗證生成後的代碼，確保沒有未閉合的標籤。 https://chrome.google.com/webstore/detail/html-tag-checker/ohdllebchmmponnofchalfkegpjojcaf?hl=zh-CN

b) 使用語義化的標籤進行頁面的規劃，例如：分段使用<p>而不是<br />，列表使用<ul>，表格使用<table><th>等標籤，避免多餘嵌套，頁面正文內容必須處於最深的嵌套中。

c) 不要使用空的<a>標籤，例如<a href="www.tuniu.com"></a>，禁止出現空的<img src="">，。

d) 合理使用H1~H6標籤，使網頁文本具備層次性，H1標籤只容許出現1次，被H1標籤包裹的文字必須能歸納本頁面的內容，頁面上與之相關的一些標籤依次使用H2增強，不使用H3~H6標籤。不要經過css去修改h標籤的大小加粗的樣式。

6.3 簡潔化

a) 不使用行內樣式和<body>內的css樣式，防止形成頁面重渲染，下降效率。

b) 減小頁面上的無關信息，無心義的代碼、隱藏菜單和廣告等，使用js進行調用，提升頁面的信噪比。

c) 預先在<img>中定義好每一個圖片的大小，便於用戶加載的時候能夠預留足夠的空間，防止圖片加載不出來破壞頁面結構。頁面上的全部圖片必須加上alt屬性，對於除小圖標以外的照片，只使用jpg和png格式。不要使用html控制圖片大小進行縮放，若是產品圖片尺寸與咱們的須要不一致，在上傳的時候就自動裁剪壓縮好；若是須要縮略圖，使用兩個版本大小的圖片，而且經過存放不一樣目錄或者設置件名特徵，禁止搜索引擎爬行縮略圖。

d) 頁面整體積小於110K，共享CSS樣式和腳本樣式，相一樣式用戶只需下載一次，壓縮CSS文件中的空白。壓縮JS代碼，移除重複無用的JS代碼，對JS文件體積減肥,實現代碼簡潔化。合併JS、CSS文件以減小HTTP請求。壓縮HTML代碼中無心義的TAB、空白元素。

e) 小圖標不須要alt屬性，alt屬性的內容必須與圖片內容相符合，如沒法調用到相關的替代文字，則不寫alt屬性，不容許出現空的alt屬性。

f) 當錨文本內容沒法與頁面主題相關時，請增長title屬性幫助搜索引擎瞭解目標頁面的內容，除此以外不須要任何title屬性。

g) 頁面發佈前必須壓縮刪除代碼中的空白，註釋等無心義內容。如圖，大段空白。

6.4 須要商議的部分

a) 制定前端代碼元素命名標準，作到元素命名的語義化和統一。

b) 在輸出的html代碼中不要出現css和js代碼，此類代碼一概外置。

c) 頁面html代碼行數不超過1000行。把代碼壓縮換行。