Web前端開發代碼規範（基礎）

一、引言

對於一個多人團隊來說，制定一個統一的規範是必要的，因爲個性化的東西無法產生良好的聚合效果，規範化可以提高編碼工作效率，使代碼保持統一的風格，以便於代碼整合和後期維護。

二、 HTML/CSS規範

2.1 瀏覽器兼容

根據公司業務要求而定，一般：主流程測試：Chrome 30+、IE9+；完整測試： Chrome 21、IE8+、360瀏覽器、微信webview/QQ手機瀏覽器。

2.2 html代碼規範

2.2.1聲明與編碼

1、html頭部聲明統一：

<!DOCTYPE html>

2、頁面編碼統一：

2.2.2格式縮進

html編碼統一格式化顯示，使用一個Tab鍵進行分層縮進 (2個空格寬度)，使整個頁面結構層次清晰，方便閱讀和修改。

2.2.3 模塊註釋

html較大獨立模塊之間註釋格式統一使用：

…

或者：

…

2.2.4標籤與屬性

1、由於html標籤和屬性不區別大小寫，所有建議都採用小寫，尤其是自定義標籤和屬性名，否定js中取不到，如：

2、所有html屬性必須添加雙引號（非單引號）。

// 禁止

// 推薦

3、所有標籤必須採用合理嵌套。

// 禁止

// 推薦

// 禁止inline級標籤嵌套block級標籤

4、所有<、&、>等特殊符號（非標籤一部分）用編碼表示。< 編碼成< ，>編碼成>，&編碼成&

5、img標籤中必須添加alt屬性。如：<img src="…" alt="logo" />

6、標籤在運用時，應儘量使用語義化標籤，如:

在語義不明顯，既可用div也可用p時，應優先考慮p標籤。

2.3 CSS代碼規範

2.3.1 CSS引用規範

1、所有CSS均爲外部調用，不得在頁面書寫任何內部樣式或行內樣式；

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

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

2.3.2 CSS註釋規範

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

@charset "utf-8";

/**

* @created : 2017/09/15

* @author : Mr.Wang

* @version : v1.0

* @desc : XX模塊

關於"version"，如果對代碼有修改更新version版本號，並添加相關注釋。

2、內部模塊之間註釋（建議 @模塊英文名，好查找）：

/* @info 商品信息區

----------------------------------------------------------------*/

.infoArea{}

/* 單行註釋 */

.specArea{}

/* @price 商品價格區

----------------------------------------------------------------*/

.price{}

一、引言

二、 HTML/CSS規範

2.1 瀏覽器兼容

根據公司業務要求而定，一般：

主流程測試：Chrome 30+、IE9+；

完整測試： Chrome 21、IE8+、360瀏覽器、微信webview/QQ手機瀏覽器。

2.2 html代碼規範

2.2.1聲明與編碼

1、html頭部聲明統一：

<!DOCTYPE html>

2、頁面編碼統一：

2.2.2格式縮進

html編碼統一格式化顯示，使用一個Tab鍵進行分層縮進 (2個空格寬度)，使整個頁面結構層次清晰，方便閱讀和修改。

2.2.3 模塊註釋

html較大獨立模塊之間註釋格式統一使用：

…

或者：

…

2.2.4標籤與屬性

1、由於html標籤和屬性不區別大小寫，所有建議都採用小寫，尤其是自定義標籤和屬性名，否定js中取不到，如：

$('div').data('bgColor');

// 取不到，已自動被瀏覽器轉成了data-bgcolor

2、所有html屬性必須添加雙引號（非單引號）。

// 禁止

// 推薦

3、所有標籤必須採用合理嵌套。

// 禁止

// 推薦

// 禁止inline級標籤嵌套block級標籤

4、所有<、&、>等特殊符號（非標籤一部分）用編碼表示。< 編碼成< ，>編碼成>，&編碼成&

5、img標籤中必須添加alt屬性。如：<img src="…" alt="logo" />

6、標籤在運用時，應儘量使用語義化標籤，如:

在語義不明顯，既可用div也可用p時，應優先考慮p標籤。

2.3 CSS代碼規範

2.3.1 CSS引用規範

1、所有CSS均爲外部調用，不得在頁面書寫任何內部樣式或行內樣式；

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

2.3.2 CSS註釋規範

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

@charset "utf-8";

/**

* @created : 2017/09/15

* @author : Mr.Wang

* @version : v1.0

* @desc : XX模塊

關於"version"，如果對代碼有修改更新version版本號，並添加相關注釋。

2、內部模塊之間註釋（建議 @模塊英文名，好查找）：

/* @info 商品信息區

----------------------------------------------------------------*/

.infoArea{}

/* 單行註釋 */

.specArea{}

/* @price 商品價格區

----------------------------------------------------------------*/

.price{}

一、引言

二、 HTML/CSS規範

2.1 瀏覽器兼容

根據公司業務要求而定，一般：

主流程測試：Chrome 30+、IE9+；

完整測試： Chrome 21、IE8+、360瀏覽器、微信webview/QQ手機瀏覽器。

2.2 html代碼規範

2.2.1聲明與編碼

1、html頭部聲明統一：

<!DOCTYPE html>

2、頁面編碼統一：

2.2.2格式縮進

html編碼統一格式化顯示，使用一個Tab鍵進行分層縮進 (2個空格寬度)，使整個頁面結構層次清晰，方便閱讀和修改。

2.2.3 模塊註釋

html較大獨立模塊之間註釋格式統一使用：

…

或者：

…

2.2.4標籤與屬性

1、由於html標籤和屬性不區別大小寫，所有建議都採用小寫，尤其是自定義標籤和屬性名，否定js中取不到，如：

$('div').data('bgColor');

// 取不到，已自動被瀏覽器轉成了data-bgcolor

2、所有html屬性必須添加雙引號（非單引號）。

// 禁止

// 推薦

3、所有標籤必須採用合理嵌套。

// 禁止

// 推薦

// 禁止inline級標籤嵌套block級標籤

4、所有<、&、>等特殊符號（非標籤一部分）用編碼表示。< 編碼成< ，>編碼成>，&編碼成&

5、img標籤中必須添加alt屬性。如：<img src="…" alt="logo" />

6、標籤在運用時，應儘量使用語義化標籤，如:

在語義不明顯，既可用div也可用p時，應優先考慮p標籤。

2.3 CSS代碼規範

2.3.1 CSS引用規範

1、所有CSS均爲外部調用，不得在頁面書寫任何內部樣式或行內樣式；

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

2.3.2 CSS註釋規範

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

@charset "utf-8";

/**

* @created : 2017/09/15

* @author : Mr.Wang

* @version : v1.0

* @desc : XX模塊

關於"version"，如果對代碼有修改更新version版本號，並添加相關注釋。

2、內部模塊之間註釋（建議 @模塊英文名，好查找）：

/* @info 商品信息區

----------------------------------------------------------------*/

.infoArea{}

/* 單行註釋 */

.specArea{}

/* @price 商品價格區

----------------------------------------------------------------*/

.price{}

2.3.3 CSS書寫規範

1、樣式書寫不做強約，可分行或單行

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

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

2、所有CSS屬性和值必須採用小寫的形式。如：FONT-SIZE:12PX必須改爲font-size:12px；

3、關於css背景圖片(關鍵字：合併，縮寫，去引號), 引號不是必須的，而且在某些瀏覽器上加引號反而出錯：

// 不推薦

.canbox{

background-color: #ff6600;

}

// 推薦(合併、去除引號)

.canbox {

background: #f60 url(/img/xxx.png);

}

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

// 不推薦

.wrap{

margin: 0px 0px 5px 8px;

}

// 推薦

.wrap {

margin: 0 0 5px 8px;

}

5、所有CSS的命名應語義化，如：回覆框，.replyBox{…}，禁止用拼音縮寫命名，如.hfk{…}。

6、清除浮動時用.clearfix，禁止用無語義的清除。

7、用來顯示動態文本輸入的地方，樣式裏必須加上強制英文換行：

word-break: break-all; word-wrap: break-word; overflow-x: hidden;

如果要顯示省略號則不讓其換行：

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

8、上下相鄰的兩模塊儘量避免混用margin-bottom，margin-top，否則會產生重疊現象。

三、 JavaScript規範

3.1 JS文件引用

1、引入格式：

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

2、引入位置： body標籤內最後部（非body外面）, 減少因載入腳本而造成其他頁面內容阻塞的問題（js單線程）。

<html>

<body>

</body>

</html>

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

3.2 JS代碼縮進

3.2.1 整體層次

使用 Tab 鍵進行代碼縮進 (4個空格寬度) 。

(function() {

var i = 0;

function innerFun() {

var j = 0;

……

}

});

運算符（=、==，&&、+/-等）兩側應各空一個格，塊級{}左側也應該空出一格

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註釋規則

3.3.1 文件頭部註釋

/**

* @created : 2017/09/15

* @author : Mr.Wang

* @version : v1.0

* @desc : 當前js模塊功能描述

* @e.g. : 方法用例，如：$('.title').tip();

3.3.2 方法註釋及單行註釋

1、對於一個較複雜的方法和函數，可用採用多行註釋，以便作詳情的描述。

/**

* 此方法是用於解析tpl模塊

* 通過分析html中結構…

2、單行註釋

var funName = function(arg1, arg2) {

this.arg1 = arg1;

// 單行註釋說明(上面添加一空行, //與說明之間空一格)

this.arg2 = arg2;

};

3.4 命名規則

變量名應由 26 個大小寫字母（A..Z，a..z），10 個數字（0..9），和“_”（下劃線）組成。

1、通常, 使用”駝峯式”寫法，對象、函數和實例時尤其如此。

// 不推薦

var is_my_object = {};

var is-my-object = {};

// 推薦

var isMyObject = {};

2、構造函數或類時使用駝峯式大寫

// 不推薦

var bad = new user({

});

// 推薦

var good = new User({

});

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

3.5 編碼模式

爲了規範代碼嚴謹風格，推薦嚴格模式(Strict Mode)，即總是在模塊頂部聲明 'use strict';

(function(){

'use strict';

function innerFun(){

var j = 0;

……

}

});

嚴格模式的一大目標是顯性的拋出錯誤，讓你能更方便更快的調試一些隱性的錯誤。

1、防止意外的創建了全局變量。

非嚴格模式下，爲一個未申明的局部變量賦值時會自動創建一個同名的全局變量，這是Js程序中最容易出現的錯誤之一，在嚴格模式下這麼做會顯性的拋出異常。

// 嚴格模式下會拋出異常

(function() {

some = 'foo';

}());

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

非嚴格模式下，函數中未被定義或爲空( null or undefined)的this會默認指向全局環境(global)。

window.color = 'red';

function getColor() {

console.log(this.color);

}

// 在嚴格模式中會報錯, 非嚴格模式中則提示red

getColor();

3、防止重名。

當編寫大量代碼時，對象屬性和函數參數很容易一不小心被設置成一個重複的名字。嚴格模式在這種情況下會顯性的拋出錯誤

// 重複的變量名，在嚴格模式下會報錯。

function doSomething(value1, value2, value1) {

//code

}

// 重複的對象屬性名，在嚴格模式下會報錯。

var object = {

foo: 'bar',

foo: 'baz'

};

4、對只讀屬性修改/刪除時會拋出異常。

ES5中可爲對象特定屬性設爲只讀或讓整個對象不可修改。但在非嚴格模式中嘗試修改一個只讀屬性只會默不做聲的失敗。

var person = {};

Object.defineProperty(person, 'name' {

writable: false,

value: 'Nicholas'

});

// 在非嚴格模式時，沉默的失敗，在嚴格模式則拋出異常

person.name = 'John';

5、不要在全局環境下啓用嚴格模式。

爲了兼容第三方代碼可能沒有爲嚴格模式做好準備而引發的問題，最好把開啓嚴格模式的指令作用於自己獨立的模塊/函數裏。

3.6 推崇建議

—— 變量

聲明變量必須加上 var 關鍵字. 否則變量就會暴露在全局上下文中, 這樣很可能會和現有變量衝突（es6中let修復了這個問題）。

—— 逗號

不要加多餘的逗號，這可能會在IE下引起錯誤，同時如果多一個逗號某些ES3的實現會計算多數組的長度。

// 不推薦

var hero = {

firstName: 'Kevin',

lastName: 'Flynn',

};

// 推薦

var hero = {

firstName: 'Kevin',

lastName: 'Flynn'

};

—— 分號

如果僅依靠語句間的隱式分隔, 有時會很麻煩.而且有些情況下, 漏掉分號會很危險.

;(function(){

var i = 0;

function innerFun(){

var j = 0;

……

}

});

—— {},[]

// 不推薦

var item1 = new Object(), item2 = new Array();

// 推薦

var item1 = {}, item2 = [];

（解釋：new關鍵字的使用除了在需要實例化一個對象，或罕見的需要延時加載數據的情況外，基本上不需要使用new關鍵字。在Javascript裏分配大量的new變量地址是一項很慢的操作，爲了效率起見，應該始終使用對象符號。）

—— 字符串，統一用單引號

// 不推薦

var name = "Bob Parr";

// 推薦

var name = 'Bob Parr';

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

使用 === 和 !== 操作符會相對好點。== 和 != 操作符會進行類型強制轉換。特別是，不要將 == 用於與錯值比較（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 響應)

eval() 會讓程序執行的比較混亂, 當 eval() 裏面包含用戶輸入的話就更加危險.

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

當碰到一些需要解析序列化串的情況下(如, 計算 RPC 響應), 使用 eval 很容易實現.

—— js常見參數命名建議

元素：elem, 參數：arg，對象：obj，數組：arr, 指令：ret，長度：len

四、 jQuery性能優化

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

jQuery中最快的篩選器是ID篩選器，這是因爲它直接和JS原生方法getElementById()對應。

——在class前使用tag

第二快是tag選擇器，因爲它和JS原生方法getElementsByTagName() 對應。jQuery中class選擇器是最慢的，因爲在IE瀏覽器下它會遍歷所有的DOM節點。

綜上兩點：

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

2、#id 前面不要用tag來修飾。寫成$('div#id')會降低性能，因爲JS會遍歷所有的div元素來查找id爲'id'的哪一個節點:

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

——緩存JQuery對象

要養成將jquery對象緩存進變量的習慣，避免進行多次查找，另外爲了區分普通的JS對象和jQuery對象，建議在變量首字母前加上$符號。如:

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

$box.addClass('class');

$.ajax({

$box.html('text');

});

——合理使用鏈式操作

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

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

——使用子查詢

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

$('div p').click(function(){

……

});

// 上面替換成如下

$('div').find('p').click(function(){

……

});

——減少DOM操作

當要進行DOM插入時，將所有元素在內存中封裝成一個元素，一次性插入。

——自定義數據屬性

dom結構上添加自定義屬性：

// 取數據：

$('#wrap').data('foo');

// 存數據：

$('#wrap').data('foo', {a:1,b:2} );

附錄

命名規則

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

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

3、所有素材圖片應將文件名第一個單詞命名爲圖片分類，第二個單詞爲圖片名稱，第三個單詞可以是數字或其它內容，以下爲圖片命名細則：

icon_xxx.gif //圖標文件名

btn_xxx.gif //按鈕文件名

corner_xxx.gif //邊角文件名

banner_xxx.gif //廣告條文件名

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

flash_xxx.gif //flash文件名

需要的可以添加還可以領取2020年最新前端基礎精講視頻教程分享！我們的前端學習Q裙：（518672693）

Web前端開發代碼規範（基礎）

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

使用這些不太常用的 CSS 屬性，又提高了一個層次

如何理解JavaScript中的對象?

只看到了別人28歲退休，背後的期權知識你知道嗎？

"高效"程序員擁有的7個技能！

GitHub上最勵志的計算機自學教程：8個月，從中年Web前端到亞馬遜百萬年薪軟件工程師

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結