[轉(zhuǎn)]Web前端開發(fā)代碼規(guī)范（基礎(chǔ)）

一、 引言

對(duì)于一個(gè)多人團(tuán)隊(duì)來說，制定一個(gè)統(tǒng)一的規(guī)范是必要的，因?yàn)閭€(gè)性化的東西無法產(chǎn)生良好的聚合效果，
規(guī)范化可以提高編碼工作效率，使代碼保持統(tǒng)一的風(fēng)格，以便于代碼整合和后期維護(hù)。

二、 HTML/CSS規(guī)范

2.1 瀏覽器兼容
根據(jù)公司業(yè)務(wù)要求而定，一般：
主流程測(cè)試：Chrome 30+、IE9+；
完整測(cè)試： Chrome 21、IE8+、360瀏覽器、微信webview/QQ手機(jī)瀏覽器。
2.2 html代碼規(guī)范
2.2.1聲明與編碼

1、html頭部聲明統(tǒng)一：

<!DOCTYPE html>

2、頁面編碼統(tǒng)一：

<meta charset="UTF-8"> <!-- ie6也支持，無須擔(dān)心 -->
2.2.2格式縮進(jìn)

html編碼統(tǒng)一格式化顯示，使用一個(gè)Tab鍵進(jìn)行分層縮進(jìn) (2個(gè)空格寬度)，使整個(gè)頁面結(jié)構(gòu)層次清晰，方便閱讀和修改。

2.2.3 模塊注釋

html較大獨(dú)立模塊之間注釋格式統(tǒng)一使用：


<!-- start: XXX模塊 -->
  …
<!-- end: XXX模塊 -->
或者：
<!-- XXX模塊 -->
  …
<!-- /XXX模塊 -->
2.2.4標(biāo)簽與屬性

1、由于html標(biāo)簽和屬性不區(qū)別大小寫，所有建議都采用小寫，尤其是自定義標(biāo)簽和屬性名，否定js中取不到，如：

<div data-bgColor="red"></div>

$('div').data('bgColor');  // 取不到，已自動(dòng)被瀏覽器轉(zhuǎn)成了data-bgcolor

2、所有html屬性必須添加雙引號(hào)（非單引號(hào)）。

// 禁止
<div id=mainframe> 或 <div id='mainframe'>

// 推薦
<div id="mainframe">

3、所有標(biāo)簽必須采用合理嵌套。

// 禁止
<p><b></p></b>

// 推薦
<p><b></b></p>

// 禁止inline級(jí)標(biāo)簽嵌套block級(jí)標(biāo)簽
<span><div></div></span>

4、所有<、&、>等特殊符號(hào)（非標(biāo)簽一部分）用編碼表示。< 編碼成< ，>編碼成>，&編碼成&

5、img標(biāo)簽中必須添加alt屬性。如：

6、標(biāo)簽在運(yùn)用時(shí)，應(yīng)盡量使用語義化標(biāo)簽，如:

<h1>標(biāo)題<h1>
<lable for="user">用戶名：</lable>
<input name="username" id="user">
在語義不明顯，既可用div也可用p時(shí)，應(yīng)優(yōu)先考慮p標(biāo)簽。
2.3 CSS代碼規(guī)范
2.3.1 CSS引用規(guī)范

1、所有CSS均為外部調(diào)用，不得在頁面書寫任何內(nèi)部樣式或行內(nèi)樣式；

2、html頁面引入樣式文件：

統(tǒng)一使用link標(biāo)簽，少用@import（原生import有加載性能問題），sass、less、vue.js等文件使用import命令除外（因?yàn)樽罱K前端構(gòu)建工具會(huì)將引入文件編譯成一個(gè)css文件）。

<link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略，清爽 -->
2.3.2 CSS注釋規(guī)范

1、css頭部文檔注釋( 統(tǒng)一加上@charset聲明 )，如下：

@charset "utf-8";

/**
 * @created :   2017/09/15
 * @author  :   Mr.Wang
 * @version :   v1.0
 * @desc    :   XX模塊
 */
關(guān)于"version"，如果對(duì)代碼有修改更新version版本號(hào)，并添加相關(guān)注釋。

2、內(nèi)部模塊之間注釋（建議 @模塊英文名，好查找）：

/* @info 商品信息區(qū)
----------------------------------------------------------------*/
.infoArea{}

/* 單行注釋 */
.specArea{}

/* @price 商品價(jià)格區(qū)
----------------------------------------------------------------*/
.price{}
2.3.3 CSS書寫規(guī)范

1、樣式書寫不做強(qiáng)約，可分行或單行

推薦單行，理由：直觀、模塊之間分隔鮮明，有全局感。

2、樣式中屬性排序規(guī)則：先外部 > 再自身 > 后內(nèi)部，推薦工具( CSScomb )

A.）影響文檔流的屬性（display, position, float, clear, visibility, table-layout等）

B.）自身盒模型的屬性（width, height, margin, padding, border等）

C.）排版相關(guān)屬性（font, line-height, text-align, text-indent, vertical-align等）

D.）裝飾性屬性（color, background, opacity, cursor等）

E.）生成內(nèi)容的屬性（content, list-style, quotes等）
2、所有CSS屬性和值必須采用小寫的形式。如：FONT-SIZE:12PX必須改為font-size:12px；

3、關(guān)于css背景圖片(關(guān)鍵字：合并，縮寫，去引號(hào)), 引號(hào)不是必須的，而且在某些瀏覽器上加引號(hào)反而出錯(cuò)：

// 不推薦
.canbox{
    background-color: #ff6600;
    background-image: url("/img/xxx.png");
}

// 推薦(合并、去除引號(hào))
.canbox {
    background: #f60 url(/img/xxx.png); 
}

4、屬性為0值，去除單位。

// 不推薦
.wrap{
    margin: 0px 0px 5px 8px;
}

// 推薦
.wrap {
    margin: 0 0 5px 8px;
}

5、所有CSS的命名應(yīng)語義化，如：回復(fù)框，.replyBox{…}，禁止用拼音縮寫命名，如.hfk{…}。

6、清除浮動(dòng)時(shí)用.clearfix，禁止用無語義的<p style="clear:both"></p>清除。

7、用來顯示動(dòng)態(tài)文本輸入的地方，樣式里必須加上強(qiáng)制英文換行：

word-break: break-all; word-wrap: break-word; overflow-x: hidden;
如果要顯示省略號(hào)加上：text-overflow: ellipsis;

8、上下相鄰的兩模塊盡量避免混用margin-bottom，margin-top，否則會(huì)產(chǎn)生重疊現(xiàn)象。

三、 JavaScript規(guī)范

3.1 JS文件引用

1、引入格式：

腳本語言發(fā)展至今，也只有js混的最好了，所以type="text/javascript"類型指定可以省去。

<script src="model.js"></script>

2、引入位置： body標(biāo)簽內(nèi)最后部（非body外面）, 減少因載入腳本而造成其他頁面內(nèi)容阻塞的問題（js單線程）。

<html>
<body>
    <div>頁面內(nèi)容….</div>
    <script src="model.js"></script>
</body>
</html>

3、引入方式：html頁面中禁止直接編寫js代碼，統(tǒng)一使用<script>外部引用方式，以便打包壓縮和緩存。

3.2 JS代碼縮進(jìn)
3.2.1 整體層次

使用 Tab 鍵進(jìn)行代碼縮進(jìn) (4個(gè)空格寬度) 。

(function() {
    var i = 0;
    function innerFun() {
        var j = 0;
        ……
    }
});

運(yùn)算符（=、==，&&、+/-等）兩側(cè)應(yīng)各空一個(gè)格，塊級(jí){}左側(cè)也應(yīng)該空出一格

3.2.2 局部間隔
// 不推薦
var arr=[1,2],str='hello'+'Lucy';

var myfun=function(arg){
   //todo…
}

// 推薦
var arr = [1,2], 
    str = 'hello' + 'Lucy';

var myfun = function(arg) {
   //todo…
}
3.3 JS注釋規(guī)則
3.3.1 文件頭部注釋
/**
 * @created :  2017/09/21
 * @author  :  datura_lj
 * @version :  v1.0
 * @desc    :  當(dāng)前js模塊功能描述
 * @e.g.    :  方法用例，如：$('.title').tip();
 */
3.3.2 方法注釋及單行注釋

1、對(duì)于一個(gè)較復(fù)雜的方法和函數(shù)，可用采用多行注釋，以便作詳情的描述。

/**
* 此方法是用于解析tpl模塊
* 通過分析html中結(jié)構(gòu)…
*/

2、單行注釋

var funName = function(arg1, arg2) {
    this.arg1 = arg1;

    // 單行注釋說明(上面添加一空行, //與說明之間空一格)
    this.arg2 = arg2;
};

3.4 命名規(guī)則

變量名應(yīng)由 26 個(gè)大小寫字母（A..Z，a..z），10 個(gè)數(shù)字（0..9），和“_”（下劃線）組成。

1、通常, 使用”駝峰式”寫法，對(duì)象、函數(shù)和實(shí)例時(shí)尤其如此。

// 不推薦
var is_my_object = {};
var is-my-object = {};

// 推薦
var isMyObject = {};

2、構(gòu)造函數(shù)或類時(shí)使用駝峰式大寫

// 不推薦
var bad = new user({
    name: 'nope'
});

// 推薦
var good = new User({
    name: 'nope'
});

3、常量大寫，并用下劃線分隔，形式如：NAMES_LIKE_THIS

3.5 編碼模式

為了規(guī)范代碼嚴(yán)謹(jǐn)風(fēng)格，推薦嚴(yán)格模式(Strict Mode)，即總是在模塊頂部聲明 'use strict';

(function(){
    'use strict';
    function innerFun(){
        var j = 0;
        ……
    }
});

嚴(yán)格模式的一大目標(biāo)是顯性的拋出錯(cuò)誤，讓你能更方便更快的調(diào)試一些隱性的錯(cuò)誤。

1、防止意外的創(chuàng)建了全局變量。

非嚴(yán)格模式下，為一個(gè)未申明的局部變量賦值時(shí)會(huì)自動(dòng)創(chuàng)建一個(gè)同名的全局變量，這是Js程序中最容易出現(xiàn)的錯(cuò)誤之一，在嚴(yán)格模式下這么做會(huì)顯性的拋出異常。

// 嚴(yán)格模式下會(huì)拋出異常
(function() {
    some = 'foo';
}());

2、防止函數(shù)中的this指針意外指向全局。

非嚴(yán)格模式下，函數(shù)中未被定義或?yàn)榭? null or undefined)的this會(huì)默認(rèn)指向全局環(huán)境(global)。

window.color = 'red';

function getColor() {
    console.log(this.color);
}

// 在嚴(yán)格模式中會(huì)報(bào)錯(cuò), 非嚴(yán)格模式中則提示red
getColor();

3、防止重名。

當(dāng)編寫大量代碼時(shí)，對(duì)象屬性和函數(shù)參數(shù)很容易一不小心被設(shè)置成一個(gè)重復(fù)的名字。嚴(yán)格模式在這種情況下會(huì)顯性的拋出錯(cuò)誤

// 重復(fù)的變量名，在嚴(yán)格模式下會(huì)報(bào)錯(cuò)。
function doSomething(value1, value2, value1) {
   //code
}

// 重復(fù)的對(duì)象屬性名，在嚴(yán)格模式下會(huì)報(bào)錯(cuò)。
var object = {
    foo: 'bar',
    foo: 'baz'
};

4、對(duì)只讀屬性修改/刪除時(shí)會(huì)拋出異常。

ES5中可為對(duì)象特定屬性設(shè)為只讀或讓整個(gè)對(duì)象不可修改。 但在非嚴(yán)格模式中嘗試修改一個(gè)只讀屬性只會(huì)默不做聲的失敗。

var person = {};

Object.defineProperty(person, 'name' {
    writable: false,
    value: 'Nicholas'
});

// 在非嚴(yán)格模式時(shí)，沉默的失敗，在嚴(yán)格模式則拋出異常
person.name = 'John';

5、不要在全局環(huán)境下啟用嚴(yán)格模式。

為了兼容第三方代碼可能沒有為嚴(yán)格模式做好準(zhǔn)備而引發(fā)的問題，最好把開啟嚴(yán)格模式的指令作用于自己獨(dú)立的模塊/函數(shù)里。

3.6 推崇建議

—— 變量

聲明變量必須加上 var 關(guān)鍵字. 否則變量就會(huì)暴露在全局上下文中, 這樣很可能會(huì)和現(xiàn)有變量沖突（es6中l(wèi)et修復(fù)了這個(gè)問題）。

—— 逗號(hào)

不要加多余的逗號(hào)，這可能會(huì)在IE下引起錯(cuò)誤，同時(shí)如果多一個(gè)逗號(hào)某些ES3的實(shí)現(xiàn)會(huì)計(jì)算多數(shù)組的長(zhǎng)度。

// 不推薦
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
};

// 推薦
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn'
};

—— 分號(hào)
如果僅依靠語句間的隱式分隔, 有時(shí)會(huì)很麻煩.而且有些情況下, 漏掉分號(hào)會(huì)很危險(xiǎn).

;(function(){
   var i = 0;
   function innerFun(){
     var j = 0;
     ……
   }
});

—— {},[]

// 不推薦
var item1 = new Object(),  item2 = new Array();

// 推薦
var item1 = {},  item2 = [];
（解釋：new關(guān)鍵字的使用 除了在需要實(shí)例化一個(gè)對(duì)象，或罕見的需要延時(shí)加載數(shù)據(jù)的情況外，基本上不需要使用new關(guān)鍵字。
在Javascript里分配大量的new變量地址是一項(xiàng)很慢的操作，為了效率起見，應(yīng)該始終使用對(duì)象符號(hào)。）

—— 字符串，統(tǒng)一用單引號(hào)

// 不推薦
var name = "Bob Parr";

// 推薦
var name = 'Bob Parr';

—— === 和 !== 操作符

使用 === 和 !== 操作符會(huì)相對(duì)好點(diǎn)。== 和 != 操作符會(huì)進(jìn)行類型強(qiáng)制轉(zhuǎn)換。 特別是， 不要將 == 用于與錯(cuò)值比較（false，null，undefined，“”，0，NaN）。

—— 塊

// 不推薦
if (test)
  return false;

// 推薦
if (test) return false;

// 或
if (test) {
  return false;
}

// 不推薦
function() { return false; }

// 推薦
function() {
  return false;
}

—— 不要使用eval()


只用于解析序列化串 (如: 解析 RPC 響應(yīng))

eval() 會(huì)讓程序執(zhí)行的比較混亂, 當(dāng) eval() 里面包含用戶輸入的話就更加危險(xiǎn).

可以用其他更佳的, 更清晰, 更安全的方式寫你的代碼, 所以一般情況下請(qǐng)不要使用 eval().

當(dāng)碰到一些需要解析序列化串的情況下(如, 計(jì)算 RPC 響應(yīng)), 使用 eval 很容易實(shí)現(xiàn).

—— js常見參數(shù)命名建議

元素：elem, 參數(shù)：arg，對(duì)象：obj，數(shù)組：arr, 指令：ret，長(zhǎng)度：len

四、 jQuery性能優(yōu)化

——總是從ID選擇器開始繼承

jQuery中最快的篩選器是ID篩選器，這是因?yàn)樗苯雍蚃S原生方法getElementById()對(duì)應(yīng)。

——在class前使用tag

第二快是tag選擇器， 因?yàn)樗蚃S原生方法getElementsByTagName() 對(duì)應(yīng)。jQuery中class選擇器是最慢的，因?yàn)樵贗E瀏覽器下它會(huì)遍歷所有的DOM節(jié)點(diǎn)。

綜上兩點(diǎn)：

1、如果查找$('. class')，應(yīng)使用$('#id > tag. class')來縮小DOM Tree的搜索范圍。

2、#id 前面不要用tag來修飾。寫成$('div#id')會(huì)降低性能，因?yàn)镴S會(huì)遍歷所有的div元素來查找id為'id'的哪一個(gè)節(jié)點(diǎn):

3、#id1也不需要由#id2來修飾。寫成$('#id2 #id1') 是畫蛇添足，降低性能。

——緩存JQuery對(duì)象

要養(yǎng)成將jquery對(duì)象緩存進(jìn)變量的習(xí)慣，避免進(jìn)行多次查找，另外為了區(qū)分普通的JS對(duì)象和jQuery對(duì)象，建議在變量首字母前加上$符號(hào)。如:

var $box = $('#wrap').find('.box');
$box.addClass('class');

$.ajax({
    $box.html('text');
});

——合理使用鏈?zhǔn)讲僮?/strong>

可以減少對(duì)DOM Tree的訪問以及代碼量。如代碼:

$('div').addClass('className').html('html code').click(function(){
   alert(1);
});

——使用子查詢

使用children(), find(), filter()來進(jìn)行子查詢。如代碼:

$('div p').click(function(){
   ……
});

// 上面替換成如下
$('div').find('p').click(function(){
   ……
});

——減少DOM操作

當(dāng)要進(jìn)行DOM插入時(shí)，將所有元素在內(nèi)存中封裝成一個(gè)元素，一次性插入。

——自定義數(shù)據(jù)屬性

dom結(jié)構(gòu)上添加自定義屬性：

<div id="wrap" data-foo="123"></div>

// 取數(shù)據(jù)：
$('#wrap').data('foo');

// 存數(shù)據(jù)：
$('#wrap').data('foo', {a:1,b:2} );

附錄

命名規(guī)則

1、所有文件夾命名，如需要兩個(gè)單詞表示的，使用"-"中劃線連接（如：img-plug）。

2、所有文件（.html、.css、.js、圖片）命名，如需要兩個(gè)單詞表示的，使用"_"下劃線連接符（如：index_info.html）。

3、所有素材圖片應(yīng)將文件名第一個(gè)單詞命名為圖片分類，第二個(gè)單詞為圖片名稱，第三個(gè)單詞可以是數(shù)字或其它內(nèi)容，以下為圖片命名細(xì)則：

icon_xxx.gif   //圖標(biāo)文件名

btn_xxx.gif    //按鈕文件名

corner_xxx.gif  //邊角文件名

banner_xxx.gif  //廣告條文件名

bg_xxx.gif      //背景圖片文件名

flash_xxx.gif     //flash文件名

temp_xxx.gif  //臨時(shí)測(cè)試用文件名

本文引自segmentfault

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,090評(píng)論 1贊 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,502評(píng)論 19贊 139
  • 冗長(zhǎng)的黑暗中，你是我唯一的光。 ——題記 每個(gè)人都會(huì)死，但...
    不會(huì)飛的章魚閱讀 843評(píng)論 0贊 2
  • 2017.7.26晚 得知能有機(jī)會(huì)參加林瘋狂的明星賽，還意外知道杰倫會(huì)來參加，當(dāng)時(shí)的那個(gè)心情簡(jiǎn)直可以飛起來！我覺得...
    大君吃小菌閱讀 396評(píng)論 0贊 1
  • 天下了一天的雨了。秋天的雨是綿綿中帶有一絲絲的涼意，淋在身上心中也會(huì)有一種剛過夏日的愜意。經(jīng)歷了春雨的滋潤(rùn)，遭受了...
    我是朝朝爸閱讀 273評(píng)論 1贊 0

友情鏈接更多精彩內(nèi)容