小編給大家分享一下web前端開(kāi)發(fā)規(guī)范的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比福貢網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式福貢網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋福貢地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。
規(guī)范說(shuō)明
此為前端開(kāi)發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范，意在提高代碼的規(guī)范性和可維護(hù)性。
基本準(zhǔn)則
符合web標(biāo)準(zhǔn), 語(yǔ)義化html, 結(jié)構(gòu)表現(xiàn)行為分離, 兼容性優(yōu)良. 頁(yè)面性能方面, 代碼要求簡(jiǎn)潔明了有序, 盡可能的減小服務(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)的編輯工具對(duì)tab解析不一樣，windows下的tab鍵是占四個(gè)空格的位置，而在linux下會(huì)變成占八個(gè)空格的位置（除非你自己設(shè)定了tab鍵所占的位置長(zhǎng)度）。
如sublime text，在這個(gè)工具中可以對(duì)tab鍵進(jìn)行設(shè)置。
3.標(biāo)簽屬性使用小寫
4.尾部不要留有空格，以防diff
5.使用 UTF-8 (no BOM)，文檔中也加入
6.文件命名統(tǒng)一使用小寫”.js”，同時(shí)推薦”-”而不是”_”
7.TODO(contact) 以及TODO: action item，不要使用@@
HTML 細(xì)化規(guī)范 姓名:
1.使用html5的規(guī)范
2.標(biāo)簽?zāi)J(rèn)缺省格式：
避免出現(xiàn)src="" 問(wèn)題
3.標(biāo)簽缺省格式：xxx 注：target="_blank" 根據(jù)需求決定
4.標(biāo)簽預(yù)留鏈接占位符使用###，參見(jiàn)：a標(biāo)簽占位符問(wèn)題
5.書寫鏈接地址時(shí), 必須避免重定向，例如：href=”http://itaolun.com/”, 即須在URL地址后面加上“/”
6.所有標(biāo)簽需要符合XHTML標(biāo)準(zhǔn)閉合
7.一律統(tǒng)一標(biāo)簽結(jié)尾斜杠的書寫形式：
注意之間空格
8.避免使用已過(guò)時(shí)標(biāo)簽，如： 而用 等代替
9.使用data-xxx來(lái)添加自定義數(shù)據(jù)，如：
10.避免使用style="xxx:xxx;"的內(nèi)聯(lián)樣式表
特殊符號(hào)使用參考HTML 符號(hào)實(shí)體
11.必須為含有描述性表單元素(input, textarea)添加label, 如
CSS 細(xì)化規(guī)范
1. 每個(gè)樣式屬性后加 ";"
方便壓縮工具"斷句"。
2. Class命名，采用” - “[減號(hào)連接符] 對(duì)class中的字母分隔：
用"-"隔開(kāi)比使用駝峰是更加清晰。
產(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), 常見(jiàn)的有：display position left top float 等
盒模型相關(guān), 常見(jiàn)的有：width height margin padding border 等
其他屬性
按照這樣的順序書寫可見(jiàn)提升瀏覽器渲染dom的性能
簡(jiǎn)單舉個(gè)例子，網(wǎng)頁(yè)中的圖片，如果沒(méi)有設(shè)置width和height，在圖片載入之前，他所占的空間為0，但是當(dāng)他加載完畢之后，那塊為0的空間突然被撐開(kāi)了，這樣會(huì)導(dǎo)致，他下面的元素重新排列和渲染，造成重繪（repaint）和回流（reflow）。我們?cè)趯慶ss的時(shí)候，把元素的定位放在前頭，首先讓瀏覽器知道該元素是在文本流內(nèi)還是外，具體在頁(yè)面的哪個(gè)部位，接著讓瀏覽器知道他們的寬度和高度，border等這些占用空間的屬性，其他的屬性都是在這個(gè)固定的區(qū)域內(nèi)渲染的，差不多就是這個(gè)意思吧~
5. （推薦）當(dāng)編寫針對(duì)特定html結(jié)構(gòu)的樣式時(shí)，使用元素名 + 類名
/* 所有的nav都是針對(duì)ul編寫的 */
ul.nav {
......
}".a div"和".a div.b"，為什么后者好？如果需求有所變化，在".a"下有多加了一個(gè)div，試問(wèn)，開(kāi)始的樣式是不是會(huì)影響后來(lái)的div啊~
6. （不推薦）ie使用filter,（ 禁止）使用expression
這里主要是效率問(wèn)題，應(yīng)該當(dāng)格外注意，要少用燒CPU的東西~
7. CSS注釋用“/* */”表示，單行注釋時(shí)，被注釋對(duì)象與前后注釋符各保留一個(gè)空格，且單獨(dú)占一行；多行注釋時(shí)，開(kāi)始注釋符和結(jié)束注釋符各占一行。例如：
/* 注釋CSS */
/*
table {
border-collapse: collapse;
}
*/JS細(xì)化規(guī)范
1.換行
每行代碼應(yīng)少于120個(gè)字符，多于這個(gè)數(shù)量時(shí)，可以考慮換行，“.”或“+”這類操作符應(yīng)放在行尾，換行后的代碼必須在換行前多一層縮進(jìn)。
如果函數(shù)或方法中的參數(shù)較長(zhǎng)，要進(jìn)行適當(dāng)?shù)膭澐帧?br/>禁止在return關(guān)鍵字及要返回的表達(dá)式之間換行。例如：
// 實(shí)際是返回的是undefined，不是1
function test() {
return
1;
}2.代碼行
禁止把多個(gè)短語(yǔ)句寫在一行中，即一行只寫一條語(yǔ)句。
if、for、do、while、switch、case、default、break、continue等語(yǔ)句自占一行。
if、for、do、while等所有的循環(huán)體和判斷體的執(zhí)行語(yǔ)句部分都需要用"{}"括起來(lái)，禁止省略花括號(hào)。例如：
// 錯(cuò)誤的
if (i < 5) i += 1;
// 正確的
if (i < 5) {
i += 1
}3.對(duì)齊
代碼塊的分界符{}，“{”跟隨在上一行，并且前邊有一空格隔開(kāi)，“}”應(yīng)獨(dú)占一行并且位于同一列，同時(shí)與引用它們的語(yǔ)句左對(duì)齊。
在函數(shù)體的開(kāi)始、類的定義以及if、for、do、while、switch、case語(yǔ)句中的程序都要采用如上的縮進(jìn)方式。
4.空格
關(guān)鍵字之后必須有空格，以突出關(guān)鍵字。
函數(shù)名、方法名與左括號(hào)“(”之間不能保留空格，例如：
// 錯(cuò)誤的
function getInfo () {
// code
}
// 正確的
function getInfo() {
// code
}在聲明函數(shù)表達(dá)式時(shí)，function與左括號(hào)“(”之間不能保留空格，例如：
// 錯(cuò)誤的
var user = function () {
// code
}
// 正確的
var user = function() {
// code
}逗號(hào)后面加空格。
賦值操作符、比較操作符、算術(shù)操作符、邏輯操作符、位域操作符，如“=”、“+=” “>=”、“<=”、“+”、“*”、“%”、“&&”、“||”等二元操作符的前后應(yīng)當(dāng)加空格。
"!"、"~"、"++"、"--"、"&"（地址運(yùn)算符）等單目操作符前后不加空格。
"."、"[]"前后不加空格。
5.空行
在每個(gè)類聲明之后、每個(gè)函數(shù)定義結(jié)束之后都要加空行。
在一個(gè)函數(shù)體內(nèi)，邏揖上密切相關(guān)的語(yǔ)句之間不加空行，其它地方應(yīng)加空行分隔。
6.使用嚴(yán)格的條件判斷符。用===代替==，用!==代替!=
7.避免額外的逗號(hào)。如：var arr = [1,2,3,]
8.語(yǔ)句必須都有分號(hào)結(jié)尾，除了for，function，if，switch，try，while。
9.左花括號(hào)置于行末，右花括號(hào)置于行首。
10.下面類型的對(duì)象不建議用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ǔ)言描述，應(yīng)該簡(jiǎn)潔明了，看到信息立即能定位到錯(cuò)誤，如提示用戶信息報(bào)錯(cuò)用“該用戶不存在”，而不是用“后臺(tái)返回?cái)?shù)據(jù)有誤”、“網(wǎng)絡(luò)超時(shí)”。
以上是“web前端開(kāi)發(fā)規(guī)范的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
