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

来源:https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/03/8183876.html
-Advertisement-
Play Games

對於一個多人團隊來說，制定一個統一的規範是必要的，因為個性化的東西無法產生良好的聚合效果，規範化可以提高編碼工作效率，使代碼保持統一的風格，以便於代碼整合和後期維護。 2.1 瀏覽器相容 根據公司業務要求而定，一般： 主流程測試：Chrome 30+、IE9+； 完整測試： Chrome 21、IE ...


一、 引言

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

二、 HTML/CSS規範

2.1 瀏覽器相容

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

  • 主流程測試：Chrome 30+、IE9+；
  • 完整測試： Chrome 21、IE8+、360瀏覽器、微信webview/QQ手機瀏覽器。

2.2 html代碼規範

2.2.1聲明與編碼

1、html頭部聲明統一：

<!DOCTYPE html>

2、頁面編碼統一：

<meta charset="UTF-8"> <!-- ie6也支持，無須擔心 -->

2.2.2格式縮進

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

2.2.3 模塊註釋

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

<!-- start: XXX模塊 -->
 …
<!-- end: XXX模塊 -->

或者：

<!-- XXX模塊 -->
 …
<!-- /XXX模塊 -->

2.2.4標簽與屬性

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

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

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

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

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

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

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

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

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

// 禁止inline級標簽嵌套block級標簽
<span><div></div></span>

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

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

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

<h1>標題<h1>
<lable for="user">用戶名：</lable>
<input name="username" id="user">

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

2.3 CSS代碼規範

2.3.1 CSS引用規範

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

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

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

<link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略，清爽 -->

2.3.2 CSS註釋規範

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

@charset "utf-8";

/**
* @created :   2017/09/15
* @author  :   Mr.Wang
* @version :   v1.0
* @desc    :   XX模塊
*/
（web前端學習交流群：328058344 禁止閑聊，非喜勿進！）

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

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

/* @info 商品信息區
----------------------------------------------------------------*/
.infoArea{}

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

/* @price 商品價格區
----------------------------------------------------------------*/
.price{}

2.3.3 CSS書寫規範

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

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

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

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

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

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

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

  E.）生成內容的屬性（content, list-style, quotes等）

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

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

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

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

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

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

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

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

7、清除浮動時用.clearfix，禁止用無語義的 <pstyle="clear:both"></p>清除。

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

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

如果要顯示省略號加上：text-overflow: ellipsis;

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

三、 JavaScript規範

3.1 JS文件引用

1、引入格式：

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

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

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

<html>
<body>
<div>頁面內容….</div>
<script src="model.js"></script>
</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…
} 
（web前端學習交流群：328058344 禁止閑聊，非喜勿進！）

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({
    name: 'nope'
});
// 推薦
var good = new User({
    name: 'nope'
});

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

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;
}
（web前端學習交流群：328058344 禁止閑聊，非喜勿進！）

—— 不要使用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結構上添加自定義屬性：

<div id="wrap" data-foo="123"></div> 
// 取數據：
$('#wrap').data('foo'); 
// 存數據：
$('#wrap').data('foo', {a:1,b:2} );

附錄

命名規則：

  1. 所有文件夾命名，如需要兩個單詞表示的，使用"-"中劃線連接（如：img-plug）。
  2. 所有文件（.html、.css、.js、圖片）命名，如需要兩個單詞表示的，使用""下劃線連接符（如：indexinfo.html）。
  3. 所有素材圖片應將文件名第一個單詞命名為圖片分類，第二個單詞為圖片名稱，第三個單詞可以是數字或其它內容，以下為圖片命名細則：
icon_xxx.gif   //圖標文件名 
btn_xxx.gif    //按鈕文件名 
corner_xxx.gif  //邊角文件名 
banner_xxx.gif  //廣告條文件名 
bg_xxx.gif      //背景圖片文件名 
flash_xxx.gif     //flash文件名 
temp_xxx.gif  //臨時測試用文件名

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js 中prototype運用（數組）
    轉自：http://www.cnblogs.com/chiname/articles/216517.html（侵刪） /* * 方法:Array.removeAt(Index) * 功能:刪除數組元素. * 參數:Index刪除元素的下標. * 返回:在原數組上修改數組 */ /* * 方法:Arr ...
  • 開發筆記 - 解決font-awesome等圖標在瀏覽器中的相容問題
    今天在寫前端頁面的時候，覺得font-awesome簡單實用就上手試了一下，因為font-awesome圖標庫甚為強大，我就在其css上多做了一些嘗試，這一嘗試發現了一個致命的問題，當我對i標簽進行統一字體大小以及統一字體樣式的時候，發現了我的網頁在不同瀏覽器上的顯示問題，顯示如下： QQ瀏覽器： ...
  • React學習筆記 - Hello World
    React 可被靈活地運用在各種項目中。你可以用它創建新的應用程式，也可以逐漸地將其加入到現有的代碼庫中而無需重寫。 ...
  • 讀Ghost博客源碼與自定義Ghost博客主題
    我使用的Ghost博客一直使用者預設的Casper主題。我向來沒怎麼打理過自己博客，一方面認為自己不夠專業，很難寫出質量比較高的文字；另一方面認為博客太耗時間，很容易影響正常的工作內容。最近公司即將搬遷，我的開發工作也告一段落，因此抽點時間自定義一個自己的博客主頁。 備註：上圖來自GhostChin ...
  • 文檔對象模型（DOM），你只需知道這些就夠了！
    文檔對象模型是用於HTML和XML文檔的應用程式編程介面，它定義文檔的邏輯結構，以及訪問和操作文檔的方式。 ...
  • 前端經典面試題 不經典不要star！
    前言 (以下內容為一個朋友所述)今天我想跟大家分享幾個前端經典的面試題,為什麼我突然想寫這麼一篇文章呢?今天我應公司要求去面試了下幾位招聘者,然後又現場整不出幾個難題,就搜了一下前端變態面試題! HAHA，前提我並不是一個變態,欺負人的面試官.只是我希望看看對方的邏輯能力！ 從而又拿這些面試題進行了 ...
  • 前端學數據結構之字典和散列表
    前面的話 集合、字典和散列表可以存儲不重覆的值。在集合中，我們感興趣的是每個值本身，並把它當作主要元素。在字典中，我們用[鍵，值]的形式來存儲數據。在散列表中也是一樣（也是以[鍵，值]對的形式來存儲數據）。但是兩種數據結構的實現方式略有不同，本文將詳細介紹字典和散列表這兩種數據結構 字典 集合表示一 ...
  • 轉載：jsonp詳解
    json相信大家都用的多，jsonp我就一直沒有機會用到，但也經常看到，只知道是“用來跨域的”，一直不知道具體是個什麼東西。今天總算搞明白了。下麵一步步來搞清楚jsonp是個什麼玩意。 同源策略 首先基於安全的原因，瀏覽器是存在同源策略這個機制的，同源策略阻止從一個源載入的文檔或腳本獲取或設置另一個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類