Web前端開(kāi)發(fā)規(guī)范文檔

付倫發(fā)布于2019-08-28 18:16 / 1163人閱讀

摘要：前端開(kāi)發(fā)規(guī)范文檔規(guī)范目的使開(kāi)發(fā)流程更加規(guī)范化。中的非注釋類中文字符須轉(zhuǎn)換成編碼使用，以避免編碼錯(cuò)誤時(shí)亂碼顯示。文件規(guī)范文件名用英文單詞，多個(gè)單詞用駝峰命名法。書寫規(guī)范命名規(guī)范。圖片規(guī)范命名應(yīng)用小寫英文數(shù)字組合，便于團(tuán)隊(duì)其他成員理解。

Web前端開(kāi)發(fā)規(guī)范文檔 規(guī)范目的：


使開(kāi)發(fā)流程更加規(guī)范化。

通用規(guī)范：


TAB鍵用兩個(gè)空格代替（WINDOWS下TAB鍵占四個(gè)空格，LINUX下TAB鍵占八個(gè)空格）。

CSS樣式屬性或者JAVASCRIPT代碼后加“;”方便壓縮工具“斷句”。

文件內(nèi)容編碼均統(tǒng)一為UTF-8。

CSS、JAVASCRIPT中的非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用，以避免編碼錯(cuò)誤時(shí)亂碼顯示。

文件規(guī)范：

文件名用英文單詞，多個(gè)單詞用駝峰命名法。

一些瀏覽器會(huì)將含有這些詞的作為廣告攔截，文件命名、ID、CLASS等所有命名避免以上詞匯。

`ad`、`ads`、`adv`、`banner`、`sponsor`、`gg`、`guangg`、`guanggao`等

html書寫規(guī)范：


為每個(gè)HTML頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。

文檔類型聲明統(tǒng)一為HTML5聲明類型，編碼統(tǒng)一為UTF-8。

中添加信息。

 //作者
 //網(wǎng)頁(yè)描述
 //關(guān)鍵字,“，”分隔
 //設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新調(diào)閱
 //禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容
 //用來(lái)防止別人在框架里調(diào)用你的頁(yè)面
 //跳轉(zhuǎn)頁(yè)面，5指時(shí)間停留5秒 網(wǎng)頁(yè)搜索機(jī)器人向?qū)?。用?lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引
 //content的參數(shù)有all,none,index,noindex,follow,nofollow，默認(rèn)是all
 //收藏圖標(biāo)
 //網(wǎng)頁(yè)不會(huì)被緩存

IE支持通過(guò)特定標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的IE版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為edge mode ，從而通知IE采用其所支持的最新的模式。

非特殊情況下CSS樣式文件外鏈至HEAD之間，JAVASCRIPT文件外鏈至頁(yè)面底部。

引入JAVASCRIPT庫(kù)文件，文件名須包含庫(kù)名稱及版本號(hào)及是否為壓縮版。

jQuery-1.8.3.min.js

引入JAVASCRIPT插件, 文件名格式為庫(kù)名稱+.+插件名稱。

jQuery.cookie.js


HTML屬性應(yīng)當(dāng)按照以下給出的順序依次排列，來(lái)確保代碼的易讀性。

class
id 、 name
data-*
src、for、 type、 href
title、alt
aria-*、 role

編碼均遵循XHTML標(biāo)準(zhǔn),
  標(biāo)簽、屬性、屬性命名由小寫英文、數(shù)字和_組成，且所有標(biāo)簽必須閉合，屬性值必須用雙引號(hào)"",
  避免使用中文拼音盡量簡(jiǎn)易并要求語(yǔ)義化。

CLASS --> nHeadTitle --> CLASS遵循小駝峰命名法（little camel-case）
ID --> n_head_title --> ID遵循名稱+_
NAME --> N_Head_Title --> NAME屬性命名遵循首個(gè)字母大寫+_

當(dāng)JAVASCRIPT獲取單個(gè)元素時(shí)，通常使用document.getElementById來(lái)獲取dom元素，document.getElementById兼容所有瀏覽器，但I(xiàn)E瀏覽器會(huì)混淆元素的ID和NAME屬性，所以要區(qū)分ID和NAME命名。


特殊符號(hào)應(yīng)使用轉(zhuǎn)意符。

<    -->    <
>    -->    >
空格  -->

含有描述性表單元素（INPUT，TEXTAREA）添加LABEL。


    測(cè)試


多用無(wú)兼容性問(wèn)題的HTML內(nèi)置標(biāo)簽,
  比如SPAN、EM、STRONG、OPTGROUP、LABEL等,需要自定義HTML標(biāo)簽屬性時(shí)，首先考慮是否存在已有的合適標(biāo)簽可替換，如果沒(méi)有,

可使用須以“data-”為前綴來(lái)添加自定義屬性，避免使用其他命名方式。

語(yǔ)義化HTML。

盡可能減少
嵌套。

書寫鏈接地址時(shí)避免重定向。

 //即在URL地址后面加“/”


HTML中對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)

css書寫規(guī)范：


為了欺騙W3C的驗(yàn)證工具,可將代碼分為兩個(gè)文件，一個(gè)是針對(duì)所有瀏覽器,一個(gè)只針對(duì)IE。即將所有符合W3C的代碼寫到一個(gè)文件中,而一些IE中必須而又不能通過(guò)W3C驗(yàn)證的代碼（如:
cursor:hand;）放到另一個(gè)文件中，再用下面的方法導(dǎo)入。

CSS樣式新建或修改盡量遵循以下原則。

根據(jù)新建樣式的適用范圍分為三級(jí)：全站級(jí)、產(chǎn)品級(jí)、頁(yè)面級(jí)。
盡量通過(guò)繼承和層疊重用已有樣式。
不要輕易改動(dòng)全站級(jí)CSS。改動(dòng)后，要經(jīng)過(guò)全面測(cè)試。

CSS屬性顯示順序。

顯示屬性
元素位置
元素屬性
元素內(nèi)容屬性

CSS書寫順序。

.header {
/* 顯示屬性 */
    display || visibility
    list-style
    position top || right || bottom || left
    z-index
    clear
    float
/* 自身屬性 */
    width max-width || min-width
    height max-height || min-height
    overflow || clip
    margin
    padding
    outline
    border
    background
/* 文本屬性 */
    color
    font
    text-overflow
    text-align
    text-indent
    line-height
    white-space
    vertical-align
    cursor
    content
    };

兼容多個(gè)瀏覽器時(shí)，將標(biāo)準(zhǔn)屬性寫在底部。

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
-o-border-radius: 15px; /* Opera 10.5+

使用選擇器時(shí)，命名比較短的詞匯或者縮寫的不允許直接定義樣式。

.hd,.bd,.td{};//如這些命名

可用上級(jí)節(jié)點(diǎn)進(jìn)行限定。

.recommend-mod .hd

多選擇器規(guī)則之間換行，即當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行。

button.btn,
input.btn,
input[type="button"] {…};

優(yōu)化CSS選擇器。

#header a { color: #444; };/*CSS選擇器是從右邊到左邊進(jìn)行匹配*/

瀏覽器將檢查整個(gè)文檔中的所有鏈接和每個(gè)鏈接的父元素，并遍歷文檔樹(shù)去查找ID為header的祖先元素，如果找不到header將追溯到文檔的根節(jié)點(diǎn)，解決方法如下。

避免使用通配規(guī)則和相鄰兄弟選擇符、子選擇符,、后代選擇符、屬性選擇符等選擇器
不要限定id選擇符，如div#header（提權(quán)的除外）
不要限定類選擇器，如ul.recommend（提權(quán)的除外）
不要使用 ul li a 這樣長(zhǎng)的選擇符
避免使用標(biāo)簽子選擇符，如#header > li > a


使用z-index屬性盡量z-index的值不要超過(guò)150（通用組的除外），頁(yè)面中的元素內(nèi)容的z-index不能超過(guò)10（提示框等模塊除外但維持在150以下），不允許直接使用（999~9999）之間大值。

盡量避免使用CSS Hack。

property:value; /* 所有瀏覽器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
*property:value; /* IE6/7 */
property:value9; /* IE6/7/8/9，即所有IE瀏覽器 */

* html selector { … }; /* IE6 */
*:first-child+html selector { … }; /* IE7 */
html>body selector { … }; /* 非IE6 */
@-moz-document url-prefix() { … }; /* firefox */
@media all and (-webkit-min-device-pixel-ratio:0) { … }; /* saf3+/chrome1+ */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }; /* opera */
@media screen and (max-device-width: 480px) { … }; /* iPhone/mobile webkit */

避免使用低效的選擇器。

body > * {…};
ul > li > a {…};
#footer > h3 {…};
ul#top_blue_nav {…};
#searbar span.submit a { … }; /* 反面示例 */


六個(gè)不要三個(gè)避免一個(gè)使用。

不要在標(biāo)簽上直接寫樣式
不要在CSS中使用expression
不要在CSS中使用@import
不要在CSS中使用!important
不要在CSS中使用“*”選擇符
不要將CSS樣式寫為單行
避免使用filter
避免使用行內(nèi)（inline）樣式
避免使用“*”設(shè)置{margin: 0; padding: 0;}
使用after或overflow的方式清浮動(dòng)

減少使用影響性能的屬性。

position:absolute;
float:left;//如這些定位或浮動(dòng)屬性

減少在CSS中使用濾鏡表達(dá)式和圖片repeat,尤其在body當(dāng)中,渲染性能極差, 如果需要用repeat的話,圖片的寬或高不能少于8px。

javaScript書寫規(guī)范：


命名規(guī)范。

常量名
    全部大寫并單詞間用下劃線分隔
    如：CSS_BTN_CLOSE、TXT_LOADING
對(duì)象的屬性或方法名
    小駝峰式（little camel-case）
    如：init、bindEvent、updatePosition
    示例：Dialog.prototype = {
                init: function () {},
                bindEvent: function () {},
                updatePosition: function () {}
                …
                };
類名（構(gòu)造器）
    -->小駝峰式但首字母大寫
    -->如：Current、DefaultConfig
函數(shù)名
    -->小駝峰式
    -->如：current()、defaultConfig()
變量名
    -->小駝峰式
    -->如：current、defaultConfig
私有變量名
    -->小駝峰式但需要用_開(kāi)頭
    -->如：_current、_defaultConfig
變量名的前綴
    -->續(xù)

代碼格式。

"()"前后需要跟空格
"="前后需要跟空格
","后面需要跟空格
JSON對(duì)象需格式化對(duì)象參數(shù)
if、while、for、do語(yǔ)句的執(zhí)行體用"{}"括起來(lái)

"{}"格式如下。

if (a==1) {
    //代碼
};

避免額外的逗號(hào)。

var arr = [1,2,3,];

for-in循環(huán)體中必須用hasOwnProperty方法檢查成員是否為自身成員，避免來(lái)自原型鏈上的污染。
長(zhǎng)語(yǔ)句可考慮斷行。

TEMPL_SONGLIST.replace("{TABLE}", da["results"])
    .replace("{PREV_NUM}", prev)
    .replace("{NEXT_NUM}", next)
    .replace("{CURRENT_NUM}", current)
    .replace("{TOTAL_NUM}", da.page_total);

為了避免和JSLint的檢驗(yàn)機(jī)制沖突，“.”或“+”這類操作符放在行尾。

TEMPL_SONGLIST.replace("{TABLE}", da["results"]).
    replace("{PREV_NUM}", prev).
    replace("{NEXT_NUM}", next).
    replace("{CURRENT_NUM}", current).
    replace("{TOTAL_NUM}", da.page_total);

如果模塊代碼中，使用其它全局變量想跳過(guò)JSLint的檢查，可以在該文件中加入/*global*/聲明。

/*global alert: true, console: true, top: true, setTimeout: true */


使用嚴(yán)格的條件判斷符。用===代替==，用!==代替!=，避免掉入==造成的陷阱,在條件判斷時(shí)，這樣的一些值表示false。

null
undefined與null相等
字符串""
數(shù)字0
NaN

在==時(shí)，則會(huì)有一些讓人難以理解的陷阱。

(function () {
    var undefined;
    undefined == null; // true
    1 == true; //true
    2 == true; // false
    0 == false; // true
    0 == ""; // true
    NaN == NaN;// false
    [] == false; // true
    [] == ![]; // true
})();

對(duì)于不同類型的 == 判斷，有這樣一些規(guī)則，順序自上而下：

undefined與null相等
一個(gè)是number一個(gè)是string時(shí)，會(huì)嘗試將string轉(zhuǎn)換為number
嘗試將boolean轉(zhuǎn)換為number
0或1
嘗試將Object轉(zhuǎn)換成number或string

而這些取決于另外一個(gè)對(duì)比量，即值的類型，所以對(duì)于0、空字符串的判斷，建議使用===
  。===會(huì)先判斷兩邊的值類型，類型不匹配時(shí)為false。
下面類型的對(duì)象不建議用new構(gòu)造。

new Number
new String
new Boolean
new Object //用{}代替
new Array //用[]代替

引用對(duì)象成員用obj.prop代替obj["prop"]，除非屬性名是變量。
從number到string的轉(zhuǎn)換。

/** 推薦寫法*/
var a = 1;
typeof(a); //"number"
console.log(a); //1
var aa=a+"";
typeof(aa); //"string"
console.log(aa); //"1"
/** 不推薦寫法*/
new String(a)或a.toString()

從string到number的轉(zhuǎn)換，使用parseInt，必須顯式指定第二個(gè)參數(shù)的進(jìn)制。

/** 推薦寫法*/
var a = "1";
var aa = parseInt(a,10);
typeof(a); //"string"
console.log(a); //"1"
typeof(aa); //"number"
console.log(aa); //1

從float到integer的轉(zhuǎn)換。

/** 推薦寫法*/
Math.floor/Math.round/Math.ceil
/** 不推薦寫法*/
parseInt

字符串拼接應(yīng)使用數(shù)組保存字符串片段，使用時(shí)調(diào)用join方法。避免使用+或+=的方式拼接較長(zhǎng)的字符串，每個(gè)字符串都會(huì)使用一個(gè)小的內(nèi)存片段，過(guò)多的內(nèi)存片段會(huì)影響性能。

/**推薦的拼接方式array的push、join*/
var str=[],
    list=["測(cè)試A","測(cè)試B"];
for (var i=0 , len=list.length; i < len; i++) {
    str.push( ""+ list[i] + "");
};
console.log(str.join("")); //測(cè)試A
測(cè)試B
/** 不推薦的拼接方式+=*/
var str = "",
    list=["測(cè)試A","測(cè)試B"];
for (var i = 0, len = list.length; i< len; i++) {
    str+="" + list[i] + "";
};
console.log(str); //測(cè)試A
測(cè)試B


盡量避免使用存在兼容性及消耗資源的方法或?qū)傩浴?/p>

不要使用with，void，evil，eval_r，innerText

注重HTML分離, 減小reflow, 注重性能。

圖片規(guī)范：


命名應(yīng)用小寫英文、數(shù)字、_組合，便于團(tuán)隊(duì)其他成員理解。

header_btn.gif
header_btn2.gif


頁(yè)面元素類圖片均放入img文件夾,
  測(cè)試用圖片放于img/testimg文件夾，psd源圖放入img/psdimg文件夾。

圖片格式僅限于gif、png、jpg等。

用png圖片做圖片時(shí),要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果,請(qǐng)為ie-6多帶帶定義背景，并盡量避免使用半透明的png圖片。

背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求。

注釋規(guī)范：


JAVASCRIPT、CSS文件注釋需要標(biāo)明作者、文件版本、創(chuàng)建/修改時(shí)間、重大版本修改記錄、函數(shù)描述、文件版本、創(chuàng)建或者修改時(shí)間、功能、作者等信息。

/* * 注釋塊 */

中間可添加如下信息。

@file 文件名
@addon 把一個(gè)函數(shù)標(biāo)記為另一個(gè)函數(shù)的擴(kuò)張，另一個(gè)函數(shù)的定義不在源文件中
@argument 用大括號(hào)中的自變量類型描述一個(gè)自變量
@author 函數(shù)/類作者的姓名
@base 如果類是繼承得來(lái)，定義提供的類名稱
@class 用來(lái)給一個(gè)類提供描述，不能用于構(gòu)造器的文檔中
@constructor 描述一個(gè)類的構(gòu)造器
@deprecated 表示函數(shù)/類已被忽略
@exception 描述函數(shù)/類產(chǎn)生的一個(gè)錯(cuò)誤
@exec @extends 表示派生出當(dāng)前類的另一個(gè)類
@fileoverview 表示文檔塊將用于描述當(dāng)前文件，這個(gè)標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前
@final 指出函數(shù)/類
@ignore 讓jsdoc忽視隨后的代碼
@link 類似于@link標(biāo)簽，用于連接許多其它頁(yè)面
@member 定義隨后的函數(shù)為提供的類名稱的一個(gè)成員
@param 用大括號(hào)中的參數(shù)類型描述一個(gè)參數(shù)
@private 表示函數(shù)/類為私有，不應(yīng)包含在生成的文檔中
@requires 表示需要另一個(gè)函數(shù)/類
@return 描述一個(gè)函數(shù)的返回值
@see 連接到另一個(gè)函數(shù)/類
@throws 描述函數(shù)/類可能產(chǎn)生的錯(cuò)誤
@type 指定函數(shù)/成員的返回類型
@version 函數(shù)/類的版本號(hào)

開(kāi)發(fā)及測(cè)試工具約定：


編碼格式化，三碼統(tǒng)一。

測(cè)試工具: 前期開(kāi)發(fā)僅測(cè)試FireFox & IE6 & IE7 & IE8 & IE9 & Opera & Chrome & Safari

參考和借鑒了大家的經(jīng)驗(yàn)，收集整理了這一篇開(kāi)發(fā)規(guī)范，感謝所有的原作者，眾人拾柴火焰高，技術(shù)無(wú)國(guó)界，持續(xù)更新中。 GITHUB地址：Web前端開(kāi)發(fā)規(guī)范文檔

云服務(wù)器 GPU云服務(wù)器前端規(guī)范文檔阿里開(kāi)發(fā)規(guī)范文檔 web前端前端開(kāi)發(fā) 前端web前端開(kāi)發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111133.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

付倫

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

金勝維固態(tài)硬盤MK8115主控開(kāi)卡成功教程

閱讀 4950·2021-10-13 09:39
「Mobi.css」輕量，靈活的移動(dòng)端 css library， built with love

閱讀 1973·2019-08-29 11:12
Web前端開(kāi)發(fā)規(guī)范文檔

閱讀 1164·2019-08-28 18:16
js知識(shí)梳理5：關(guān)于函數(shù)的要點(diǎn)梳理(1)

閱讀 1876·2019-08-26 12:16
JavaScript面向?qū)ο缶幊獭?/a>

閱讀 1263·2019-08-26 12:13

前端面試每日3+1（周匯總2019.08.25）

閱讀 3008·2019-08-26 10:59
防止按鈕在短時(shí)間內(nèi)被多次點(diǎn)擊多次觸發(fā)事件

閱讀 2316·2019-08-23 18:27
Git常用命令小結(jié)

閱讀 3007·2019-08-23 18:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Web前端開(kāi)發(fā)規(guī)范文檔

相關(guān)文章

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

構(gòu)建前端項(xiàng)目

**前端開(kāi)發(fā)者手冊(cè)2019**

**前端開(kāi)發(fā)者手冊(cè)2019**

**前端開(kāi)發(fā)者手冊(cè)2019**

發(fā)表評(píng)論

0條評(píng)論

付倫

男|高級(jí)講師

TA的文章

金勝維固態(tài)硬盤MK8115主控開(kāi)卡成功教程

「Mobi.css」輕量，靈活的移動(dòng)端 css library， built with love