前端編碼規範

引言

“無規矩不成方圓”，HTML、CSS、JavaScript作爲前端開發的主要語言，也有一定的編碼規範。本文參考了各個網站的編碼規範，經過加工提煉，總結出了一套前端編碼規範，規範的基本準則如下：

• 符合web標準，結構表現行爲分離，兼容性優良。頁面性能方面，代碼要求簡潔明瞭有序， 儘可能的減小服務器負載，保證最快的解析速度
• 項目的維護和二次開發可能是直接或間接的團隊合作，所以創建易維護的代碼是一個項目成功與否的關鍵,易維護的代碼意味着具有如下特性：
  
  • 閱讀性好：如良好的註釋和命名規範，有文檔
  • 具有一致性：看起來如同一個人編寫
  • 代碼的鬆耦合，高度模塊化：將頁面內的元素視爲一個個模塊，相互獨立，儘量避免耦合過高的代碼，從html,css,js三個層面都要考慮模塊化

html 規範

• img標籤要寫alt屬性

<img src="user-head.jpg" alt="Bolynga Team">

• 單標籤不要寫閉合標籤

<img src="test.jpg"><br>
<input type="email" value="">

• 自定義屬性要以data-開頭

<div data-count="5"></div>

• 使用section標籤增強SEO
• html要保持簡潔，不要套太多層
• 樣式要寫在head標籤裏
• 要在head標籤靠前位置寫上charset的meta標籤
• 特殊符號使用html實體

©

• img空src的問題

<img src="about:blank" alt>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

• 不要在https的鏈接裏寫http的圖片

<img src=”//static.chimeroi.com/hello-world.jpg”>

• 屬性值必須用雙引號包圍
• 在 head 中引入頁面需要的所有 CSS 資源
• JavaScript 應當放在頁面末尾，或採用異步加載
• 有文本標題的控件必須使用 label 標籤將其與其標題相關聯

<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>

• 使用 button 元素時必須指明 type 屬性值
• 當在現代瀏覽器中使用 audio 以及 video 標籤來播放音頻、視頻時，應當注意格式

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <object width="100" height="50" data="audio.mp3">
        <embed width="100" height="50" src="audio.swf">
    </object>
</audio>

<video width="100" height="50" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <object width="100" height="50" data="video.mp4">
        <embed width="100" height="50" src="video.swf">
    </object>
</video>

css 規範

• 文件名規範

文件名建議用小寫字母加中橫線的方式

• 屬性書寫順序

佈局定位屬性–>自身屬性–>文本屬性–>其他屬性. 此條可根據自身習慣書寫, 但儘量保證同類屬性寫在一起. 屬性列舉: 佈局定位屬性主要包括: margin、padding、float(包括clear)、position(相應的 top,right,bottom,left)、display、visibility、overflow等;自身屬性主要包括: width &; height &; background &; border; 文本屬性主要包括:font、color、text-align、text-decoration、text-indent等;其他屬性包括: list-style(列表樣式)、vertical-vlign、cursor、z-index(層疊順序) 、zoom等

• 類的命名應當使用它所表示的邏輯意義，如signup-success-toast、request-demo、agent-portrait、 company-logo等等
• 不要使用hack
• 選擇器一般不要寫超過3個
• 減少覆蓋
• 少用!important
• 屬性值規範

如果值是0，通常都不用帶單位
色值用十六進制，少用rgb

• 不要設置太大的z-index
• 合併屬性

.banner{
    background: url(test.jpg) 0 0 no-repeat;
}

• 注意float/absolute/fixed定位會強制設置成block
• CSS動畫規範

不要使用all屬性做動畫
使用transform替代position做動畫
偏向於使用CSS動畫替代JS動畫

• 不要設置圖標字體font-family
• 正確使用background和img

顯示一張圖片有兩種方式，可以通過設置CSS的background-image，或者是使用img標籤，究竟什麼時候用哪種呢？
如果是頭圖等直接展示的圖片還是要img標籤，如果是做爲背景圖就使用background，因爲使用img可以寫個alt屬性增強SEO，而背景圖那種本身不需要SEO。雖然background有一個一個background-position: center center很好，但是頭圖那種還是使用img吧，自己去居中吧，不然做不了SEO。

• 響應式的規範

響應式開發最不好不要雜合使用rem，文字字號要麼全部使用rem，要麼不要用，也不要使用transform: scale去縮小，因爲被縮小的字號看起來會有點奇怪，別人都是14px，而你變成了13.231px，小了一點。響應式的原則一般是保持中間或者兩邊間距不變，然後縮小主體內容的寬度。

• 少用absolute定位
• 適當使用:before/:after
• 少用inline-block佈局
• 移動端提高可點區域範圍
• 不要設置input的line-height
• 移動端彈框要禁止body滑動

因爲IOS Safari切換輸入框的時候會頁面會彈閃得很厲害，因爲你在切的時候它會先把鍵盤收起來，然後再彈出來，這個時間很短，給人感覺頁面彈閃了一下，但如果把body禁止滑動了就不會有這個問題，這有兩個解決辦法，第一種是把body fixed住，第二種設置body overflow: hidden，相對來說第二種比較簡單一點。IOS10完全不會閃，IOS9以下還是會閃。

• 對於漸變的處理

有時候UI裏面會有一些漸變的效果，無法複製CSS出來，這個時候可以用一個在線的工具，生成漸變的CSS：www.cssmatic.com/gradient-ge…，但是這個需要自己手動調一個和UI一模一樣的效果，或者可以直接給UI調一個它理想的效果，它會生成兼容性很強的CSS

• 行內元素可以直接設置margin-left/margin-right

js編碼規範

• 變量命名

首字母小寫，駝峯式命名，匈牙利命名

• 聲明變量時要賦值
• 函數的返回值類型要確定
• 不要給變量賦值undefined
• 使用===代替==
• 不要讓代碼暴露在全局作用域下運行
• 使用箭頭函數取代簡單的函數
• 注意避免執行過長時間的JS代碼
• 函數的註釋

@namespace：這裏用於命名包含以上對象的全局引用的名稱

@class：這裏有些命名不當，他實際意思是指對象或者構造函數

@method：定義對象中的方法和方法名

@param：列舉函數所使用的參數。其中將參數類型用大括號括起來，並在其後註釋參數名及描述。

@return：類似於@param，這裏用於描述返回值的，並且該方法沒有名稱。

@constructor：表明這個“類”實際上是一個構造函數

@property和@type描述了對象的屬性。

• 代碼不要嵌套太深
• on事件之前需要的時候才off
• 對DOM節點較少的不要使用委託
• 對於常用的屬性進行緩存
• 儘量不要在JS裏面寫CSS
• 在必要的地方添加非空判斷
• 分號規範
• 使用location跳轉需要先轉義

let searchContent = encodeURIComponent(form.search.value.trim());
window.location.href = `/search?key=${searchContent}`;

• 不要直接使用localStorage

Data.hasLocalStorage = true;
try{
    window.localStorage.trySetData = 1;
}catch(e){
    Data.hasLocalStorage = false;
}
setLocalData: function(key, value){ 
    if(Data.hasLocalStorage){
        window.localStorage[key] = value;
    }
    else{   
        util.setCookie("_LOCAL_DATA_" + key, value, 1000);
    }
},
getLocalData: function(key){
    if(Data.hasLocalStorage){
        return window.localStorage[key];
    }
    else{
        return util.getCookie("_LOCAL_DATA_" + key);
    }
}

• 使用簡便的轉換

把字符串轉整型可以使用+號
把小數去掉尾數轉成整型，可以使用 >> 0
轉成boolean值用!!

• 使用Object.assgin簡化數據賦值
• 調試完去掉無關的console
• 使用正則表達式做字符串處理
• 保持複用模塊的觀念
• 注意label事件會觸發兩次
• 在需要以{}閉合的代碼段前增加換行，如：for if
• 使用Function進行類的定義，不推薦繼承，如需繼承採用成熟的類庫實現繼承
• 使用空格

在分開for循環的各個部分的分號之後：例如，for (var i = 0; i < 10; i +=1){…}
在for循環中初始化多個變量（i和最大值等）：for (var i = 0, max = 10; i < max; i += 1){…}
在限定數組項的逗號後面：var a = [1, 2, 3];
對象屬性的逗號之後和將屬性名和屬性值分開的冒號之後：var o = {a: 1, b: 2};
分隔開函數中各個參數的逗號之後：myFunc(a, b, c)
在函數聲明的大括號之前：function myFunc() {}
在匿名函數表達式之後：var myFunc = function () {};

• 空格的另外一個很好的用途是用來分隔所有的操作符和操作，這也就是意味着在 +, -, *, =, <, >, <=, >=, ===, !==, &&, ||, += 等之後使用空格

//大量空格，並且使用一致，是的代碼可讀性更好
//允許在閱讀的時候不用一口氣讀下去
var d = 0,
    a = b +1;
if ( a && b && c) {
    d = a % c;
    a += d;
}

//反模式
//缺少空格或空格使用不一致，使得代碼比較混亂
var d= 0;
    a =b+1;
if (a&& b&& c) {
d=a %c;
    a+= d;
}

文件

• 文件命名規則

圖片的名稱分爲頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質例如:廣告、標誌、菜單、按鈕等等。放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名: banner標誌性的圖片取名爲: logo在頁面上位置不固定並且帶有鏈接的小圖片我們取名爲 button 在頁面上某一個位置連續出現,性質相同的鏈接欄目的圖片我們取名: menu 裝飾用的照片我們取名: pic不帶鏈接表示標題的圖片我們取名: title 範例:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg鼠標感應效果圖片命名規範爲”圖片名+_+on/off”。例如:menu1_on.gif menu1_off.gifc

• 文件存放位置規範

    cn        存放中文HTML文件 
    en        存放英文HTML文件 
    flash        存放Flash文件 
    images        存放圖片文件 
    imagestudio        存放PSD源文件 
    flashstudio        存放flash源文件 
    inc        存放include文件 
    library        存放DW庫文件 
    media        存放多媒體文件 
    project        存放工程項目資料 
    temp        存放客戶原始資料 
    js        存放JavaScript腳本 

• 文件常用命名

命名規則:
頭: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 center
(2)導航
導航:nav
主導航:mainbav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(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/

-常用動詞

get 獲取/set 設置,
add 增加/remove 刪除
create 創建/destory 移除
start 啓動/stop 停止
open 打開/close 關閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創建/destroy 銷燬
begin 開始/end 結束,
backup 備份/restore 恢復
import 導入/export 導出,
split 分割/merge 合併
inject 注入/extract 提取,
attach 附着/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標記
copy 複製/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啓動/run 運行
compile 編譯/execute 執行,
debug 調試/trace 跟蹤
observe 觀察/listen 監聽,
build 構建/publish 發佈
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect 斷開,
send 發送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize 同步
update 更新/revert 復原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 摺疊
begin 起始/end 結束,
start 開始/finish 完成
enter 進入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集

參考文獻

https://www.cnblogs.com/lvhw/p/7451351.html
https://blog.csdn.net/xllily_11/article/details/51249029
http://xuanfengge.com/fedoc/index.html
https://www.aliyun.com/jiaocheng/676792.html