前端經常使用規範

時間 2019-11-10

標籤前端經常使用規範简体版

原文原文鏈接

1、規範目的

概述

爲提升團隊協做效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規範文檔一經確認, 前端開發人員必須按本文檔規範進行前臺頁面開發. 本文檔若有不對或者不合適的地方請及時提出, 經討論決定後能夠更改此文檔.javascript

全部必須、禁止等詞表示強調，不表示必須，若是能遵照最好css

Tab鍵統一約定用4個空格代替（避免有的工具Tab鍵位2個空格）
每一個樣式屬性或js語句後要加分號，方便壓縮工具「斷句」html

註釋
代碼是寫給人看的，只是機器偶爾執行一下。
註釋永遠不閒多的，必定要寫註釋前端

html 註釋

這裏是內容
html5

css 註釋
/* header /
這裏是css內容
/ end header */java

2、文件規範

文件命名規則

文件名稱統一用小寫的英文字母、數字和中劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你本身和工做組的每個成員可以方便的理解每個文件的意義。（每一個規範前面都有各自的命名規則）jquery

fe      前端開發目錄
    src 開發環境
    dist    生產環境
    H5  移動端頁面
    pc  Pc端頁面
    html    存放html文件
    images  存放圖片
    css 存放css文件
    js  存放js文件

經常使用命名規則

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
左右中：left right center
登陸條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情連接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標籤頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
註冊：regsiter
狀態：status
投票：vote
合做夥伴：partner
(二)註釋的寫法:
/* footer /
內容區
/ end footer */
(三)id的命名:
(1)頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
左右中：left right centerweb

(2)導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summaryjson

(3)功能
標誌：logo
廣告：banner
登錄：login
登陸條：loginbar
註冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
註釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合做夥伴：partner
友情連接：link
版權：copyright數組

HTML 規範

html5 doctype，字符編碼統一使用使用utf-8
統一的文檔類型，保證每一個頁面的表現形式統一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

</body>
</html>

兼容IE meta 寫法(在web頁面中使用)
使IE瀏覽器解析頁面使用IE最高版本解析

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

資源規範
css 放到head中
javascript 放置到body內，主題內容後
style 默認type爲text/css ,能夠省去
script 默認 type 爲 text/javascript ，能夠省去

實用爲王
儘可能使用語義標籤，減小使用div、span 無語義標籤

圖片背景圖
修飾圖片儘可能使用背景圖片來展現
切圖請保存爲最優格式，透明圖片保存爲 PNG24 格式

屬性順序
HTML屬性應該按照一下順序排列，確保易讀性

class
id,name
data-*
src,for,type,href
title,alt
aria-*,role

class用於標識高度可複用組件，所以應該排在首位。id用於標識具體組件，應當謹慎使用（例如，頁面內的書籤），所以排在第二位。

javascript 生成的標籤
經過js生成的標籤內容，不易查找和修改，性能也會下降，減小使用。若是使用請分析它的利和弊

CSS 規範

id 和 class 命名約定

1， id 和 class命名只能使用字符、數字、中劃線 - ，一概使用小寫字符
2， id 和 class 根據內容來命名
3，使用js操做的id或者class，一概使用J_ 開頭，後面的命名使用大駝峯的寫法，例如J_Header

每一個屬性後必須加分號 ;

方便壓縮工具「斷句」

空格的使用

.header {
    color: red;
}

選擇器 { 以前要有空格
屬性名 : 後要有空格
屬性名 : 前禁止加空格
一個緣由是美觀，其次IE 6存在一個bug，IE6bug

多選擇器規則之間換行

當樣式針對多個選擇器時，每一個選擇器佔一行

/* 推薦的寫法 */
a.btn,
input.btn,
input[type="button"] {
    ......
}

（禁止）將樣式寫爲單行，如

.header { color: red;}

單行顯示很差備註，這應該是壓縮工具的活

（禁止）向0後添加單位，只爲了格式統一如

.hader { 
    margin: 0px;
}

（禁止）使用 css 原生 import

css 原生import 有不少弊端，好比會增長請求數，我沒有驗證過
推薦文章：Don't use @import

（推薦）屬性的書寫順序，舉個例子：

.header {
    /*定位*/
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /*盒模型*/
    width: 50px;
    height: 50px;
    padding: 10px;
    border: 1px solid red;
    margin: 10px;
    /*文字系列*/
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    /*背景*/
    background: red;
    /*其餘*/
}

定位相關, 常見的有：display position left top float 等
盒模型相關, 常見的有：width height margin padding border 等
文字系列，font, line-height, letter-spacing, color- text-align等
背景，background 等
其餘 animation，transition，z-index 等

按照這樣的順序書寫可見提高瀏覽器渲染dom的性能

簡單舉個例子，網頁中的圖片，若是沒有設置width和height，在圖片載入以前，他所佔的空間爲0，可是當他加載完畢以後，那塊爲0的空間忽然被撐開了，這樣會致使，他下面的元素從新排列和渲染，形成重繪（repaint）和迴流（reflow）。咱們在寫css的時候，把元素的定位放在前頭，首先讓瀏覽器知道該元素是在文本流內仍是外，具體在頁面的哪一個部位，接着讓瀏覽器知道他們的寬度和高度，border等這些佔用空間的屬性，其餘的屬性都是在這個固定的區域內渲染的，差很少就是這個意思吧~

小圖片須要生成css sprite 圖片

IE Hack 使用

/* 針對ie的hack */
 selector {
     property: value;     /* 全部瀏覽器 */ 
     property: value\9;   /* 全部IE瀏覽器 */ 
     property: value\0;   /* IE8 */
     +property: value;    /* IE7 */
     _property: value;    /* IE6 */
     *property: value;    /* IE6-7 */
 }

禁止使用行內樣式

<p style="font-size:12px;">我是一段文字</p>

儘可能作個樣式和結構分離，否則維護成本比較高

css reset（重置）樣式

推薦網址：http://www.cssreset.com/

連接的樣式，按照這個順序來寫

a:link -> a:visited ->a:hover a:active

css 選擇器禁止標籤名，也稱爲禁止使用子元素選擇器，例如：

.header span {
    color: red;
}

使用標籤名，讓結構和樣式耦合度高，不利於後期修改

javascript 代碼規範

一個代碼段不超過15行，特殊的例子除外

每句代碼後（必須）加分號「;」

變量、常量、類的命名

（1）變量使用小駝峯命名法，以首字母小寫開始，例如：headFirst
（2）常量採用全大寫命名，例如：FEEL_NAME
（3）類採用大駝峯的命名法，例如：HeadFirst

左大括號「{」能夠居行尾，右大括號「}」能夠居行首

if (a == b) {
    // 這裏是內容
}

if,for,switch,do 老是用大括號來包裹，即時結構體內只有一個語句

if (a == b) {
    return a;
}

函數或者類都要添加類描述

/**      
     * * 簡述      
     *       
     * 功能詳細描述    
     *       
     * @param <String> arg1 參數1      
     * @param <Number> arg2 參數2，默認爲0     
     * @return <Boolean> 看xxx是否成功
     */
    function fooFunction (arg1, arg2) {

    }

字符串拼接

字符串拼接，應使用數組保存字符串片斷，使用時調用join方法。避免使用+或+=的方式拼接較長的字符串，每一個字符串都會使用一個小的內存片斷，過多的內存片斷會影響性能。如

很差的拼接方式，+=      
var str = '';   
for (var i = 0, len = list.length; i < len; i++) {      
    str+= '<div>' + list[i] + '</div>';     
}   
dom.innerHTML = str;    

正確拼接方式，Array的push+join      
var str = [];   
for (var i = 0, len = list.length; i < len; i++) {      
    str.push('<div>'+ list[i] + '</div>');      
}   
dom.innerHTML = str.join('');

在局部函數內定義變量，必須置於頂部

由於變量聲明提早的原則，不管你定義到哪裏，在解析的時候都會聲明提早

（推薦）在須要以{}閉合的代碼段前增長換行

// 沒有換行，小的代碼段沒法區分
 if (wl && wl.length) {
     for (i = 0, l = wl.length; i < l; ++i) {
         p = wl[i];
         type = Y.Lang.type(r[p]);
         if (s.hasOwnProperty(p)) {
             if (merge && type == 'object') {
                 Y.mix(r[p], s[p]);
             } else if (ov || !(p in r)) {
                 r[p] = s[p];
             }
         }
     }
 }
 // 有了換行，邏輯清楚多了
 if (wl && wl.length) {

     for (i = 0, l = wl.length; i < l; ++i) {
         p = wl[i];
         type = Y.Lang.type(r[p]);

         if (s.hasOwnProperty(p)) {
             // 處理merge邏輯
             if (merge && type == 'object') {
                 Y.mix(r[p], s[p]);
             } else if (ov || !(p in r)) {
                 r[p] = s[p];
             }
         }
     }
 }

（推薦）使用局部變量緩存反覆查找的對象（包括但不限於全局變量、dom查詢結果、做用域較深的對象）

// 緩存對象
 var getComment = function() {
     var dom = $("#common-container"),               // 緩存dom
         appendTo = $.appendTo,                      // 緩存全局變量
         data = this.json.data;                      // 緩存做用域鏈較深的對象

 }

## 當須要使用this時，建議使用_this 來緩存
```
// 緩存this
function Row(name) {
var _this = this;

_this.name = name;
$(".row").click(function() {
_this.getName();
});
}
```
在緩存this時，有使用self的、that、_this ，這裏咱們統一下，使用this

獲取元素

獲取單個元素
一般，咱們使用document.getElementById來獲取dom元素，避免使用document.all。document.getElementById是標準方法，兼容全部瀏覽器
IE8使用document.getElementsByClassName來獲取dom元素會出現報錯狀況，儘可能避免使用getElementsByClassName獲取dom元素。若是使用JQ來獲取DOM元素也儘可能避免使用etElementsByClassName獲取dom元素，提升性能

jquery規範

1.同一的對象的操做不超過三個動做能夠寫入一行（代碼的可讀性）
2.對於同一對象的多個操做，建議每行寫一個操做。
3.若是閒代碼塊太多，能夠以代碼塊來換行；
4.若是獲取的對象是jQuery 對象，建議以$ 符號開頭例如：$nav = $(「#nav」); 以區分javascript對象和jQuery對象