前端代碼規範

時間  2019-11-10
標籤 前端 代碼 規範 简体版
原文   原文鏈接
 

目  錄css

1.      通用.......................................................................................................................... 1html

1.1.     字符編碼............................................................................................................ 1express

1.2.     文件的命名........................................................................................................ 1c#

1.3.     縮進................................................................................................................... 1windows

1.4.     目錄結構............................................................................................................ 1瀏覽器

2.      HTML........................................................................................................................ 2服務器

2.1.     頁面文件命名..................................................................................................... 2app

2.2.     DOCTYPE............................................................................................................ 2ide

2.3.     標籤................................................................................................................... 3函數

2.4.     標籤的嵌套........................................................................................................ 3

2.5.     行內CSS............................................................................................................. 4

2.6.     自定義屬性........................................................................................................ 4

2.7.     圖片................................................................................................................... 4

2.8.     閉合浮動元素..................................................................................................... 4

3.      CSS............................................................................................................................ 5

3.1.     CSS Code Style..................................................................................................... 5

3.2.     選擇器的使用..................................................................................................... 6

3.3.     兼容問題............................................................................................................ 6

3.4.     !important.......................................................................................................... 6

3.5.     公用的一些css................................................................................................... 7

3.6.     字體規範............................................................................................................ 8

4.      JavaScript................................................................................................................... 8

4.1.     JavaScript Code Style............................................................................................ 8

4.2.     文檔註釋............................................................................................................ 9

4.3.     JavaScript文件引用在頁面中的位置.................................................................... 9

4.4.     避免在HTML中直接嵌入JavaScript................................................................... 10

4.5.     減小全局變量................................................................................................... 10

5.      附錄........................................................................................................................ 11

5.1.     CSS Sprites........................................................................................................ 11

5.2.     浮動元素的閉合............................................................................................... 11

5.3.     CSS Hack........................................................................................................... 12

5.4.     IE的條件註釋................................................................................................... 13

5.5.     JavaScript的阻塞.............................................................................................. 14

5.6.     無干擾的JavaScript........................................................................................... 15

 


1.   通用

1.1.   字符編碼

全部文件統一使用UTF-8編碼。

1.2.   文件的命名

文件名應該所有小寫，多個單詞如下劃線「_」分開。

1.3.   縮進

Tab字符縮進。

1.4.   目錄結構

下圖爲靜態資源的目錄結構。全部靜態資源放到一級目錄：爲項目名，例如（墨爾本）目錄下。

墨爾本 目錄下通常有三個文件夾。

  1. html：裏邊包含通用的樣式表文件、圖片、js、以及靜態頁面等文件。
  2. 效果圖：裏邊包含設計出的全部的效果圖（後綴爲.psd）。
  3. 原型。該文件夾用來存放交互設計出的原型文件。

 

 

2.   HTML

2.1.   頁面文件命名

 

列出幾種標準的命名：

l  建立：create.html

l  編輯：edit.html

l  顯示：show.html

l  列表：list.html

對於頁面中使用到的html片斷頁面，應以「_」隔開命名。若是爲某一頁面專用的片斷頁面，則在「_」以後加上專用頁面的名字例如商品顯示頁中的評價片斷頁面：/show_comments.html。其意義爲/show.html頁面的一部分。

2.2.   DOCTYPE

HTML頁面頁首必須填寫DOCTYPE。DOCTYPE使用XHTML 1.0 Transitional。以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.3.   標籤

按照XHTML規範，全部標籤名及屬性名必須全小寫，屬性值以雙引號包裹，屬性的等號兩邊禁止添加空格。全部標籤必須閉合。例如： 「<br>」必須寫做「<br />」。非替換元素禁止直接結束，例如：<div></div>禁止寫成<div />。

2.4.   標籤的嵌套

標籤的嵌套必須按照HTML規範嵌套，例如：<li>必須在<ol>或<ul>標籤中，不能脫離這兩個標籤。

2.5.   行內CSS

儘可能減小行內CSS的使用，除一些相似規定表格欄位寬度等比較具備特殊性的位置，禁止在元素內使用行內CSS。行內CSS示例：

<div style=」background: black;」></div>

2.6.   自定義屬性

全部自定義屬性建議以「data-」，多個單詞以「-」分隔，例如「data-valid-type」，「data-field-name」等。該目的是爲了兼容以後的HTML5，而且jQuery 1.6對此也有着更好的支持。

2.7.   圖片

對內容型的圖片和背景型的圖片進行區分。對於網站LOGO，按鈕圖片以及邊框樣式等均屬於背景型圖片，而商品的圖片，註冊用戶的頭像等則屬於內容型的圖片。背景型圖片應儘可能避免使用<img>標籤顯示在頁面中，而是應該採用CSS，背景型圖片應採用CSS Sprite技術，將零散的圖片合成爲一張圖片，以減小請求。關於CSS Sprit技術，請參考5.1

圖片的命名應該全小寫，多個單詞如下劃線「_」分隔。

2.8.   閉合浮動元素

對於設置了float的元素，必定要對float進行閉合。具體參考附錄5.2

3.   CSS

3.1.   CSS Code Style

3.1.1.    樣式命名

對於類的命名，採用全小寫，多個單詞以「_」分隔。例如：.nav，.panel_title等。命名採用英文單詞，禁止使用漢語拼音，儘可能避免使用數字。

3.1.2.    屬性

每條屬性獨佔一行，屬性名冒號後空一格。行結束以分號「;」結尾。

屬性順序建議按照一下順序書寫：

  1. 佈局屬性（position，display，float，clear，display等）
  2. 盒模型屬性（margin，padding，width，height，border等）
  3. 文本屬性（font，text-decoration，text-align，line-height等）
  4. 其餘屬性（background，color，opacity等）

3.1.3.    代碼示例

table.standard-table {

     width: 100%;

    border-spacing: 1px;

    background: black;

}

 

3.2.   選擇器的使用

儘可能縮小樣式的應用範圍。例若有個類樣式「.list-table」用於table標籤，若是該樣式不會應用在其餘標籤上的話，那麼該類樣式應寫做「table.list-table」，避免使用通配符。

避免使用ID選擇器，樣式應該儘可能選擇類選擇器，ID有可能綁定着頁面的業務邏輯，有可能發生改變，所以儘可能避免使用ID選擇器應用樣式。

避免使用IE6不兼容的選擇器，如子選擇器「>」以及屬性選擇器「[type=’checkbox’]」等。

3.3.   兼容問題

儘可能避免使用CSS Hack，對於IE系列的瀏覽器兼容性問題，採用條件註釋加載對應的CSS，覆蓋默認樣式的方式解決。有關CSS Hack技術及IE的條件註釋技術具體請參考附錄5.3和附錄5.4。

3.4.   !important

!important會使樣式屬性優先級變爲最高，在使用時須要必定的謹慎，建議通常狀況下不要使用該關鍵字。

3.5.   公用的一些css

*{

     margin:0;

     padding:0;

}

body{

     font-family:'宋體',宋體,'Microsoft Yahei','微軟雅黑',arial,'Hiragino Sans GB',Tahoma,Arial,Helvetica,STHeiti;

     font-size:12px;

     color:#706866;

}

img{

     border:0;

}

ul,li{

     list-style:none;

}

.f_left{

     float:left;

}

.f_right{

     float:right;

}

.clear{

     font-size:0px;

     clear:both;

}

a { blr:expression(this.onFocus=this.blur()) } /*針對 IE*/

a { outline:none; } /*針對firefox等*/

a :hover{ text-decoration: underline;}

以上這些css算是全部頁面都須要的一些屬性。

3.6.   字體規範 

1. 爲了保證不一樣瀏覽器上字號保持一致，字號建議用點數pt和像數px來定義，pt通常使用中文宋體的9pt和11pt，px通常使用中文宋體12px和14px，這是通過優化的字號，黑體字或者宋體字加粗時，通常選用 11pt 和 14.7px的字號比較合適。 

2. 大小爲9pt時，行距爲120%; 信息類最終頁面採用彈出方式，標題及正文字體規定爲11pt，行距爲140%，全部頁面字體大小建議不要超過11pt。

 3.考慮字體大小的兼容性，避免使用size=2的方式定義，儘可能使用 pt 或者 px 並用css 定義 。

4. 文字顏色與頁面配色協調，不使用與背景相近的顏色

    5. 非圖像設計的字體一概採用windows 標準宋體。（若是作特殊效果需作成圖）要加粗文字用 Blod，不要用strong。 

6. 頁面文字不使用下劃線方式，也儘可能少採用粗體顯示。 

4.   JavaScript

4.1.   JavaScript Code Style

l  變量與函數名採用駝峯式命名

l  常量使用全大寫，多個單詞如下劃線「_」分隔

l  關鍵字後空一格

l  等號兩邊各空一格

l  一行語句結束時必須添加「;」

l  if-else語句塊必須添加「{}」，即便只有一行語句。

l  類中的方法應寫入類的prototype中，私有方法如下劃線「_」開頭。

示例：

var foo = function (params) {

if (params.length > 0) {

    doSomthing(params);

}

};

 

function Student(name, gender) {

this.name = name;

this.gender = gender;

}

Student.prototype.study = function (course) {

    doSomething();

};

4.2.   文檔註釋

JavaScript的文檔註釋採用JSDoc文檔註釋，全部公共函數、類都應該添加文檔註釋。關於JSDoc，具體請參看http://code.google.com/p/jsdoc-toolkit/w/list。

JSDoc示例：

/**

 * @function 爲一個checkbox添加對一組checkbox的全選功能

 * @param {String|Element} checkbox 目標element對象或id

 * @param {String} checkBoxName 受控checkbox的name

 * @param {String} [form] 受控checkbox所在表單的name或id，可選

 */

function addCheckAllFunction(checkbox checkboxName, form) {

}

4.3.   JavaScript文件引用在頁面中的位置

儘量的將JS的引入位置放到body的結束標籤以前，以減小被JavaScript載入時阻塞頁面的狀況。有關JavaScript阻塞的問題，請參考附錄5.5。

4.4.   避免在HTML中直接嵌入JavaScript

儘可能避免在html中直接嵌入JavaScript。例如：

<button id=」okButton」 type=」button」 onclick=」ok();」>Button</button>

建議採起無干擾的JavaScript方式，在JavaScript中註冊該事件。有關無干擾的JavaScript技術，請參考附錄5.6。

4.5.   減小全局變量

儘可能不要在全局做用域下聲明變量或者函數。他們應該被組織在各自的業務命名空間下，或在一個匿名函數中。

對於必須使用的全局變量，變量名應以「$」開頭。

5.   附錄

5.1.   CSS Sprites

5.1.1.    原理

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

5.1.2.    優勢

利用CSS Sprites能很好地減小了網頁的http請求，從而大大的提升了頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由。

解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

5.2.   浮動元素的閉合

<div id=」f_left」></div>

<div id=」f_right」></div>

<div id=」NOTfloatC」></div>

這裏的NOTfloatC並不但願繼續平移，而是但願往下排 (其中f_left、f_right的屬性已經設置爲「float:left,float:right;」) 。緣由是NOTfloatC沒有設置float屬性，必須將float標籤閉合。在 <div class=」f_right」> <div class=」NOTfloatC」>之間加上 <div class=」clear」>這個div必定要注意位置，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。 而且將clear這種樣式定義以下便可：

 .clear{ clear:both;}   

做爲外部wrapper的div不要定死高度,爲了讓高度能自動適應，要在wrapper裏面加上「overflow:hidden;」。當包含float的div的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性「zoom: 1;」，能夠解決這個問題。這樣就達到了兼容。

例如某一個wrapper以下定義：

.colwrapper { overflow: hidden; zoom:1; margin:5px auto;}   

這裏還有另外一種方案添加閉合的方法，把須要閉合的div加上 class="clearfix" 便可,其定義以下：

.clearfix { display: inline-block; }

.clearfix:after {

content: ".";

display: block;

height :0px;

clear: both;

visibility: hidden;

}

/* Hide from IE Mac */

.clearfix {display: block;}

/* End hide from IE Mac */

/* end of clearfix */

或者這樣設置：

.hackbox{ display: table; /*將對象做爲塊元素級的表格顯示*/ }

5.3.   CSS Hack

CSS Hack是在標準CSS沒辦法兼容各瀏覽器顯示效果時纔會用上的補救方法，利用了各個瀏覽器對CSS的支持和解析結果不同的特色，例如： IE6能識別下劃線"_"和星號"*"，IE7能識別星號"*"，但不能識別下劃線"_"，而Firefox兩個都不能識別。書寫順序通常是將識別能力強的瀏覽器的CSS寫在後面。好比：

div{

background: green; /* for firefox */

*background: blue; /* for IE7 */

_background: red; /* for IE6 */

}

這樣在Firefox中看到的背景是綠色，在IE7中看到的是藍色，而IE6中看到的是紅色。

利用這種方式，能夠解決多種因爲IE獨特的文檔渲染方式形成的問題。

5.4.   IE的條件註釋

5.4.1.    介紹

條件註釋是微軟IE瀏覽器在HTML源代碼中被解釋的條件語句。最先出現於IE5，支持到IE8。條件註釋用於在IE瀏覽器中顯示或隱藏一段代碼。

5.4.2.    示例

<!--[if IE 6]>

<p>You are using Internet Explorer 6.</p>

<![endif]-->

<!--[if !IE]>-->

<p>You are not using Internet Explorer.</p>

<!--<![endif]-->

5.5.   JavaScript的阻塞

瀏覽器是按標籤來解析的，每解析一段標籤，就顯示這段標籤的內容。若是標籤引入了外部文件（如圖像），則會一邊繼續解析其餘標籤，一邊繼續下載該外部文件，直到載入完畢。

但瀏覽器在解析script標籤時，因爲JavaScript可能會改變瀏覽器內容，會中止全部頁面元素的載入，直到這段script代碼執行完畢。若是這個script標籤引入了一個來自外部服務器的js文件，而這個服務器訪問速度很慢，那麼頁面上其餘元素便都得等到這個js文件載入並執行完畢才能繼續載入。

5.6.   無干擾的JavaScript

無干擾的 JavaScript 的首要目標就是保持 JavaScript 代碼和 HTML 標記的分離。這種讓內容分離於形爲的方式，與將 CSS 放入樣式表而保持內容與表現分離的方式一模一樣。爲了實現這一目標，把全部的 JavaScript 代碼放到外部文件中。

無干擾的 JavaScript 的第二個目標是它必須下降優雅性。腳本應該基於增長 HTML 的內容來構思和設計，可是，即便沒有這些 JavaScript 代碼，內容也應該能用。

無干擾的 JavaScript 的第三個目標是，它不能下降一個 HTML 頁面的可訪問性。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程