前端代碼規範1.0

時間 2019-11-12

標籤前端代碼規範 1.0 简体版

原文原文鏈接

意義：該規範旨在統一前端代碼書寫，規範前端代碼標準，爲共同協做打下良好基礎，提升工做效率。javascript

文件夾/文件命名css

圖片文件夾：image，images，imghtml

Js代碼文件夾：js前端

Css文件夾：cssjava

首頁：index。web

其餘頁面根據具體狀況來定，能夠是中文名，英文名，拼音等，以方面認識爲主。瀏覽器

頁面框架佈局緩存

樣式名稱服務器

樣式名稱的規則爲根據對應位置的英文來命名。如：app

頭部：header

導航：nav

頁尾：footer

消息：news，message

分頁：page，

下拉：select

複選框：checked，

單選：radio，

返回：back，

按鈕：btn

登陸：login

註冊：reg

選擇：choose

時間:time

星星：start

圖標：ico

列表：list

高度：height，

寬度：width

邊線：border,borderTop, borderRight,borderBottom,BorderLeft

外邊距：margin，marginTop,marginRight,marginBottom,marginLeft

內邊距：padding, paddingTop，paddingRight，PaddingBottom，paddingLeft

清除：clear，clearfix

浮動:floatLeft，floatRight

內容：content/container

尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制總體佈局寬度：wrapper

左右中：left right center

登陸條：loginbar

標誌：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情連接：friendlink

版權：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\

Header區域代碼規範

head區是指HTML代碼的<head>和</head>之間的內容。

必須加入的標籤

公司版權註釋

網頁顯示字符集

中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

萬國碼：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

英語：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

網頁製做者信息 <META name="author" content="webmaster@maketown.com">

網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">

搜索關鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

網頁的css規範 <LINK href="../css/style.css" rel="stylesheet" type="text/css">

網頁標題 <title>xxxxxxxxxxxxxxxxxx</title>

能夠選擇加入的標籤

設定網頁的到期時間。一旦網頁過時，必須到服務器上從新調閱。

禁止瀏覽器從本地機的緩存中調閱頁面內容。

用來防止別人在框架裏調用你的頁面。

自動跳轉。

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.****.com"> 5指時間停留5秒

網頁搜索機器人嚮導。用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。

CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。

/*********移動端mate代碼*********/

收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico">

全部的javascript的調用盡可能採起外部調用.

附<body>標籤：

<body>標籤不屬於head區，這裏強調一下，爲了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor="#FFFFFF">

樣式定義規則：

儘可能使用樣式拼接，使用多個樣式進行定義。如：按鈕樣式，主樣式btn{}定義高度，行高，居中，圓角等。用寬度樣式定義按鈕的寬度，有背景樣式定義按鈕的背景，用內邊距定義內邊距。等等。

.btn{

Height:30px;

Line-height:30px;

Text-align:center;

Font-size:14px;

Border-radius:4px;

Border:none;

}

.btn_big{

Width:100px;

Background-color:#f00;

Color:#fff;

}

定義樣式是儘可能的用具體的樣式屬性來定義。如：背景圖片：background-image,背景顏色：background-color,左側外邊距：margin-left,右側內邊距：padding-right,等等。
佈局儘可能用相同的樣式來定義，經過模塊來展現不一樣。儘可能考慮通用性。減小重複代碼編寫。
屬性的書寫順序，佈局定位屬性-->自身屬性-->文本屬性-->其餘屬性如：position，top，left，z-index，width，height，font-size，color，cursor等等。

佈局屬性主要包括：display、list-style、position（相應的top、right、bottom、left）、float、clear、visibility、overflow；

自身屬性主要包括：width、height、margin、padding、border、background；

文本屬性主要包括：color、font、text-decoration、text-align、vertical-align、white-space。 \其餘：content。

相關的屬性聲明應當歸爲一組，並按照下面的順序排列：

Positioning

Box model

Typographic

Visual

因爲定位（positioning）能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型（box

model）相關的樣式，所以排在首位。盒模型排在第二位，由於它決定了組件的尺寸和位置。

其餘屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，所以排在後面。

.declaration-order {

/* Positioning */

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 100;

/* Box-model */

display: block;

float: right;

width: 100px;

height: 100px;

/* Typography */

font: normal 13px "Helvetica Neue", sans-serif;

line-height: 1.5;

color: #333;

text-align: center;

/* Visual */

background-color: #f5f5f5;

border: 1px solid #e5e5e5;

border-radius: 3px;

/* Misc */

opacity: 1;

}

代碼縮進。Css樣式，html，js代碼都書寫是都必須注意縮進。整齊統一，既方便本身查閱，也方便同事查閱。
全部的標記都必須合理嵌套。

說明：XHTML要求有嚴謹的結構，全部的嵌套都必須按順序。下面是一些標記的禁止嵌套：

a：不能包含其餘的a元素；

pre：不能包含其餘img、object、big、small、sub或者sup元素。

button：不能包含其餘input、select、textarea、label、button、form、fieldset、iframe或者isindex元素。

label：不能包含其餘的label元素。 form：不能包含其餘的form元素。

全部的特殊符號用轉義編碼表示說明：如下是一些經常使用的特殊符號以及對應的轉義編碼，注意轉義字符之間無空格。

css和Javascript儘可能經過外部引用，不要在XHTML中出現表現形式的代碼

說明：將樣式寫在一個獨立的.css文件中，之後不用修改每一個頁面，只須要修改.css

文件而改變頁面的樣式。

css樣式定義的邊距方向，勁量一致。如：爲了進行頁面區塊分隔，設置上下邊距，要麼都設置爲上邊距，要麼都設置爲下邊距，不要混合使用。
頁面通用的一些樣式屬性能夠單獨定義。拼接使用。如：margin-left，padding-left，clear，position，font-size，font-family等等。
樣式書寫前，須要清除默認樣式，統同樣式基本設置。
對頁面的一些基本樣式須要統一設置，如最小字號，默認文字顏色，基本字體，基礎行高等等。
注意樣式的兼容性，在須要兼容的地方使用兼容性寫法，在需求要求的瀏覽器兼容考慮範圍內進行兼容性設置。

從後往前，依次是，firefox,ie9 ,ie8,ie7,ie6.

selector{

background-color:#f00; /*all*/

background-color:#0ff\0; /* ie 8/9 */

background-color:#0f0\9\0; /* ie9 */

*background-color:#00f; /*ie7*/

_background-color:#ff0; /*ie6*/

background-color//:#090; /*非IE*/

background-color:#900\9; /*全部ie*/

}

HTML 屬性應當按照如下給出的順序依次排列，確保代碼的易讀性。

Class,id, name,data-*,src, for, type, href,title, alt,aria-*, role

class 用於標識高度可複用組件，所以應該排在首位。id 用於標識具體組件，應當謹慎

使用（例如，頁面內的書籤），所以排在第二位。

將媒體查詢放在儘量相關規則的附近。不要將他們打包放在一個單同樣式文件中或者

放在文檔底部。若是你把他們分開了，未來只會被你們遺忘。下面給出一個典型的實例。

.element { ... }

.element-avatar { ... }

.element-selected { ... }

@media (min-width: 480px) {

.element { ...}

.element-avatar { ... }

.element-selected { ... }

}

注意爲樣式寫註釋，能夠爲某一模塊，用註釋標註出來；也能夠是某一功能的樣式用註釋標註出來。以方便查看，和方便選擇爲前提。

html註釋: 註釋格式 , '--'只能在註釋的始末位置,不可置入註釋文字區域;

css註釋: 註釋格式 /*這兒是註釋*/;

JavaScript註釋, 單行註釋使用'//這兒是單行註釋' ,多行註釋使用 /* 這兒有多行註釋 */;

17. LOGO的國際標準規範

爲了便於INTERNET上信息的傳播，一個統一的國際標準是須要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO，目前有三種規格：

88*31 這是互聯網上最廣泛的LOGO規格。

120*60 這種規格用於通常大小的LOGO。

120*90 這種規格用於大型LOGO。

這一條能夠根據各自的實際狀況來訂，可是儘可能的合乎標準。

Js代碼規範

書寫過程當中, 每行代碼結束必須有分號; 原則上全部功能均根據項目需求進行原生開發, 以免網上down下來的代碼形成的代碼污染(沉冗代碼 || 與現有代碼衝突 || ...);
庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其餘人員討論決定;
變量命名: 駝峯式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符爲'_', 其餘與原生JavaScript 規則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.
類命名: 首字母大寫, 駝峯式命名. 如 ITaoLun;
函數命名: 首字母小寫駝峯式命名. 如iTaoLun();
命名語義化, 儘量利用英文單詞或其縮寫;
儘可能避免使用存在兼容性及消耗資源的方法或屬性, 好比eval() & innerText;
後期優化中, JavaScript非註釋類中文字符須轉換成unicode編碼使用, 以免編碼錯誤時亂碼顯示;
代碼結構明瞭, 加適量註釋. 提升函數重用率;

10.注重與html分離, 減少reflow, 注重性能.