web前端開發(fā)規(guī)范文檔(2014年版本)

規(guī)范說明
此為前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護(hù)性。
基本準(zhǔn)則
符合web標(biāo)準(zhǔn), 語義化html, 結(jié)構(gòu)表現(xiàn)行為分離, 兼容性優(yōu)良. 頁面性能方面, 代碼要求簡潔明了有序, 盡可能的減小服務(wù)器負(fù)載, 保證最快的解析速度。
總規(guī)范
1.忽略(Omit)協(xié)議:如 background: url(http://www.google.com/images/example); 應(yīng)該寫background: url(//www.google.com/images/example);以方便http與https協(xié)議切換,除非必須使用某個(gè)協(xié)議
2.書寫時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn)。tab鍵用四個(gè)空格代替。
因?yàn)樵诓煌到y(tǒng)的編輯工具對tab解析不一樣,windows下的tab鍵是占四個(gè)空格的位置,而在linux下會變成占八個(gè)空格的位置(除非你自己設(shè)定了tab鍵所占的位置長度)。
如sublime text,在這個(gè)工具中可以對tab鍵進(jìn)行設(shè)置。
3.標(biāo)簽屬性使用小寫
4.尾部不要留有空格,以防diff
5.使用 UTF-8 (no BOM),文檔中也加入 <meta charset=”utf-8″>
6.文件命名統(tǒng)一使用小寫”.js”,同時(shí)推薦”-”而不是”_”
7.TODO(contact) 以及TODO: action item,不要使用@@
HTML 細(xì)化規(guī)范
1.使用html5的規(guī)范<!DOCTYPE html>
2.<img>標(biāo)簽?zāi)J(rèn)缺省格式:<img src="xxx.png" alt="缺省時(shí)文字" /> 避免出現(xiàn)src="" 問題
3.<a>標(biāo)簽缺省格式:<a href="###" title="鏈接名稱">xxx</> 注:target="_blank" 根據(jù)需求決定
4.<a>標(biāo)簽預(yù)留鏈接占位符使用###,參見:a標(biāo)簽占位符問題
5.書寫鏈接地址時(shí), 必須避免重定向,例如:href=”http://itaolun.com/”, 即須在URL地址后面加上“/”
6.所有標(biāo)簽需要符合XHTML標(biāo)準(zhǔn)閉合
7.一律統(tǒng)一標(biāo)簽結(jié)尾斜杠的書寫形式:<br /> <hr /> 注意之間空格
8.避免使用已過時(shí)標(biāo)簽,如:<b> <u> <i> 而用 <strong> <em>等代替
9.使用data-xxx來添加自定義數(shù)據(jù),如:<input data-xxx="yyy"/>
10.避免使用style="xxx:xxx;"的內(nèi)聯(lián)樣式表
特殊符號使用參考HTML 符號實(shí)體
11.必須為含有描述性表單元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>須寫成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
CSS 細(xì)化規(guī)范
1. 每個(gè)樣式屬性后加 ";"
方便壓縮工具"斷句"。
2. Class命名,采用” - “[減號連接符] 對class中的字母分隔:
用"-"隔開比使用駝峰是更加清晰。
產(chǎn)品線-產(chǎn)品-模塊-子模塊,命名的時(shí)候也可以使用這種方式
ID: 小駝峰式命名法 如:
firstName topBoxList footerCopyright
3. 空格的使用,以下規(guī)則執(zhí)行:
.hotel-content { font-weight: bold; }
選擇器與 { 之前要有空格
屬性名的 : 后要有空格
屬性名的 : 前(禁止)加空格
一個(gè)原因是美觀,其次IE 6存在一個(gè)bug, 戳bug
4. (推薦)屬性的書寫順序, 舉個(gè)例子:
.hotel-content { /* 定位 */ display: block; position: absolute; left: 0; top: 0; /* 盒模型 */ width: 50px; height: 50px; margin: 10px; border: 1px solid black; / *其他* / color: #efefef; }
定位相關(guān), 常見的有:display position left top float 等
盒模型相關(guān), 常見的有:width height margin padding border 等
其他屬性
按照這樣的順序書寫可見提升瀏覽器渲染dom的性能
簡單舉個(gè)例子,網(wǎng)頁中的圖片,如果沒有設(shè)置width和height,在圖片載入之前,他所占的空間為0,但是當(dāng)他加載完畢之后,那塊為0的空間突然被撐開了,這樣會導(dǎo)致,他下面的元素重新排列和渲染,造成重繪(repaint)和回流(reflow)。我們在寫css的時(shí)候,把元素的定位放在前頭,首先讓瀏覽器知道該元素是在文本流內(nèi)還是外,具體在頁面的哪個(gè)部位,接著讓瀏覽器知道他們的寬度和高度,border等這些占用空間的屬性,其他的屬性都是在這個(gè)固定的區(qū)域內(nèi)渲染的,差不多就是這個(gè)意思吧~
推薦文章:
Poll Results: How do you order your CSS properties?
http://www.mozilla.org/css/base/content.css
5. (推薦)當(dāng)編寫針對特定html結(jié)構(gòu)的樣式時(shí),使用元素名 + 類名
/* 所有的nav都是針對ul編寫的 */ ul.nav { ...... }
".a div"和".a div.b",為什么后者好?如果需求有所變化,在".a"下有多加了一個(gè)div,試問,開始的樣式是不是會影響后來的div啊~
6. (不推薦)ie使用filter,( 禁止)使用expression
這里主要是效率問題,應(yīng)該當(dāng)格外注意,要少用燒CPU的東西~
7. CSS注釋用“/* */”表示,單行注釋時(shí),被注釋對象與前后注釋符各保留一個(gè)空格,且單獨(dú)占一行;多行注釋時(shí),開始注釋符和結(jié)束注釋符各占一行。例如:
/* 注釋CSS */ /* table { border-collapse: collapse; } */
JS細(xì)化規(guī)范
1.換行
每行代碼應(yīng)少于120個(gè)字符,多于這個(gè)數(shù)量時(shí),可以考慮換行,“.”或“+”這類操作符應(yīng)放在行尾,換行后的代碼必須在換行前多一層縮進(jìn)。
如果函數(shù)或方法中的參數(shù)較長,要進(jìn)行適當(dāng)?shù)膭澐帧?
禁止在return關(guān)鍵字及要返回的表達(dá)式之間換行。例如:
// 實(shí)際是返回的是undefined,不是1 function test() { return 1; }
2.代碼行
禁止把多個(gè)短語句寫在一行中,即一行只寫一條語句。
if、for、do、while、switch、case、default、break、continue等語句自占一行。
if、for、do、while等所有的循環(huán)體和判斷體的執(zhí)行語句部分都需要用"{}"括起來,禁止省略花括號。例如:
// 錯(cuò)誤的 if (i < 5) i += 1; // 正確的 if (i < 5) { i += 1 }
3.對齊
代碼塊的分界符{},“{”跟隨在上一行,并且前邊有一空格隔開,“}”應(yīng)獨(dú)占一行并且位于同一列,同時(shí)與引用它們的語句左對齊。
在函數(shù)體的開始、類的定義以及if、for、do、while、switch、case語句中的程序都要采用如上的縮進(jìn)方式。
4.空格
關(guān)鍵字之后必須有空格,以突出關(guān)鍵字。
函數(shù)名、方法名與左括號“(”之間不能保留空格,例如:
// 錯(cuò)誤的 function getInfo () { // code } // 正確的 function getInfo() { // code }
在聲明函數(shù)表達(dá)式時(shí),function與左括號“(”之間不能保留空格,例如:
// 錯(cuò)誤的 var user = function () { // code } // 正確的 var user = function() { // code }
逗號后面加空格。
賦值操作符、比較操作符、算術(shù)操作符、邏輯操作符、位域操作符,如“=”、“+=” “>=”、“<=”、“+”、“*”、“%”、“&&”、“||”等二元操作符的前后應(yīng)當(dāng)加空格。
"!"、"~"、"++"、"--"、"&"(地址運(yùn)算符)等單目操作符前后不加空格。
"."、"[]"前后不加空格。
5.空行
在每個(gè)類聲明之后、每個(gè)函數(shù)定義結(jié)束之后都要加空行。
在一個(gè)函數(shù)體內(nèi),邏揖上密切相關(guān)的語句之間不加空行,其它地方應(yīng)加空行分隔。
6.使用嚴(yán)格的條件判斷符。用===代替==,用!==代替!=
7.避免額外的逗號。如:var arr = [1,2,3,]
8.語句必須都有分號結(jié)尾,除了for,function,if,switch,try,while。
9.左花括號置于行末,右花括號置于行首。
10.下面類型的對象不建議用new構(gòu)造:new Number,new String,new Boolean,new Object(用{}代替),new Array(用[]代替)。
11.數(shù)組成員間的“,”后面需要保留一個(gè)空格。
12.禁止在js/json中使用javascript保留關(guān)鍵字詞命名,在IE中容易造成錯(cuò)誤。關(guān)鍵字(break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with),關(guān)鍵詞(abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile)。
13.建議使用“+”作為換行連接符,而不是使用“\”。
14.提示信息禁止使用概括籠統(tǒng)的語言描述,應(yīng)該簡潔明了,看到信息立即能定位到錯(cuò)誤,如提示用戶信息報(bào)錯(cuò)用“該用戶不存在”,而不是用“后臺返回?cái)?shù)據(jù)有誤”、“網(wǎng)絡(luò)超時(shí)”。
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化,要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細(xì)內(nèi)容2022-02-23- 這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23
- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道,當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少,在安裝過程中總會出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29