相關(guān)文章
博客原文
我的前端規(guī)范——開篇
我的前端規(guī)范——HTML篇
我的前端規(guī)范——CSS篇
我的前端規(guī)范——JavaScript篇
大綱
前言
1拂酣、規(guī)范的重要性
2澳淑、關(guān)于注釋
3比原、關(guān)于文件夾/文件
前言
規(guī)范對于一個(gè)項(xiàng)目來說是很重要的，統(tǒng)一的規(guī)范對代碼的一致性杠巡、項(xiàng)目的質(zhì)量春寿、工作的協(xié)調(diào)都有很大的幫助，而且有時(shí)候可以規(guī)避很多意料不到的錯(cuò)誤忽孽。
當(dāng)然绑改，規(guī)范是死的，人是活的兄一。我總結(jié)的前端規(guī)范是我認(rèn)為對我來說比較適合的厘线，我又認(rèn)可的，所以我能比較好的接受和使用出革。但是造壮，不同的團(tuán)隊(duì)，不同的項(xiàng)目需要遵守的規(guī)范也許就是不一樣的。規(guī)范的作用是讓項(xiàng)目的代碼看起來更有統(tǒng)一性耳璧，讓團(tuán)隊(duì)的協(xié)作更方便成箫，因此，根據(jù)具體的情況制定統(tǒng)一的規(guī)范才是最合理的旨枯，而這里我給出的也只是我認(rèn)為比較符合我風(fēng)格和習(xí)慣的蹬昌，至于具體的規(guī)范還是要依據(jù)具體的情況來總結(jié)制定。
單獨(dú)寫成一篇的話篇幅很大攀隔，因此我會(huì)將我的總結(jié)寫成：開篇皂贩、css、html昆汹、js四篇明刷，讓有需要的讀者能夠更方便的查找到想要的知識。
1满粗、規(guī)范的重要性
說了那么多辈末，也許有些讀者還是不以為意的認(rèn)為規(guī)范也只是一些如不是很重要的東西，那么以下一個(gè)例子來告訴你映皆，規(guī)范有時(shí)候起到的作用不僅僅是約束你代碼的作用本冲，他還能幫助你規(guī)避一些意想不到的bug。
<!--
這段代碼對<p>的首字符樣式定義在IE6上看是沒有效果的,
而在p:first-letter和{font-size:300%}加上空格劫扒，
也就是p:first-letter {font-size:300%}后檬洞，顯示就正常了。
這個(gè)問題主要是出現(xiàn)在IE6瀏覽器中沟饥，而且這位朋友也說明了一些必要的觸發(fā)條件：
1添怔、IE6瀏覽器
2、選擇符是帶有偽類的
3贤旷、偽類中必須是有連接符“-”的广料，例如:first-letter
4、是否有空格的存在
來源： http://www.cnblogs.com/hustskyking/articles/css-bug-in-IE6.html
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p{font-size:12px;}
p:first-letter{font-size:300%}
</style>
</head>
<body>
<p>
對于世界而言幼驶，你是一個(gè)人艾杏；但是對于某個(gè)人，你是他的整個(gè)世界盅藻」荷＃縱然傷心，
也不要愁眉不展氏淑，因?yàn)槟悴恢钦l會(huì)愛上你的笑容勃蜘。
</p>
</body>
</html>
2、關(guān)于注釋
2.1假残、文件注釋
1缭贡、文件注釋要標(biāo)明作者、文件版本、創(chuàng)建/修改時(shí)間阳惹、重大版本修改記錄
2谍失、函數(shù)描述
3、文件版本莹汤、創(chuàng)建或者修改時(shí)間快鱼、功能、作者
//例子
/**
* @file Image.js
* @description 功能詳細(xì)描述
*/
4体啰、函數(shù)或者類等都要添加頭描述
//實(shí)例
/**
* 簡述
*
* 功能詳細(xì)描述
*
* @param <String> arg1 參數(shù)1
* @param <Number> arg2 參數(shù)2，默認(rèn)為0
* @return <Boolean> 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}
2.2嗽仪、操作注釋
1荒勇、單行注釋,寫在代碼上面
2、多行注釋
//例
/*
* 注釋操作說明
*/
for( var i = 0; i < obj.lenght; i++) {
}
3闻坚、注釋標(biāo)簽參考
標(biāo)簽 描述
@addon 把一個(gè)函數(shù)標(biāo)記為另一個(gè)函數(shù)的擴(kuò)張沽翔，另一個(gè)函數(shù)的定義不在源文件中。
@argument 用大括號中的自變量類型描述一個(gè)自變量窿凤。
@author 函數(shù)/類作者的姓名仅偎。
@base 如果類是繼承得來，定義提供的類名稱雳殊。
@class 用來給一個(gè)類提供描述橘沥，不能用于構(gòu)造器的文檔中。
@constructor 描述一個(gè)類的構(gòu)造器夯秃。
@deprecated 表示函數(shù)/類已被忽略座咆。
@exception 描述函數(shù)/類產(chǎn)生的一個(gè)錯(cuò)誤。
@extends 表示派生出當(dāng)前類的另一個(gè)類仓洼。
@fileoverview 表示文檔塊將用于描述當(dāng)前文件介陶。這個(gè)標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前。
@final 指出函數(shù)/類色建。
@ignore 讓jsdoc忽視隨后的代碼哺呜。
@link 類似于@link標(biāo)簽，用于連接許多其它頁面箕戳。
@member 定義隨后的函數(shù)為提供的類名稱的一個(gè)成員某残。
@param 用大括號中的參數(shù)類型描述一個(gè)參數(shù)。
@private 表示函數(shù)/類為私有陵吸，不應(yīng)包含在生成的文檔中驾锰。
@requires 表示需要另一個(gè)函數(shù)/類。
@return 描述一個(gè)函數(shù)的返回值走越。
@returns 描述一個(gè)函數(shù)的返回值椭豫。
@see 連接到另一個(gè)函數(shù)/類。
@throws 描述函數(shù)/類可能產(chǎn)生的錯(cuò)誤。
@type 指定函數(shù)/成員的返回類型赏酥。
@version 函數(shù)/類的版本號喳整。
來源： http://www.reibang.com/p/8d291d823cc0
3、關(guān)于文件夾/文件
3.1裸扶、命名規(guī)范
1框都、文件夾命名：
英文單詞的駝峰法命名
2、文件命名：
全部用小寫的英文單詞呵晨，單詞之間用“-”連接魏保。盡量規(guī)避數(shù)字、拼音以及可能被攔截的單詞
命名摸屠，如： ad谓罗、ads、adv季二、banner檩咱、sponsor、gg胯舷、guangg刻蚯、guanggao。(很多瀏覽器會(huì)將
含有這些詞的作為廣告攔截： ad桑嘶、ads炊汹、adv、banner逃顶、sponsor兵扬、gg、guangg口蝠、guanggao等
頁面中盡量避免采用以上詞匯來命名器钟。)
3.2、文件分層
1妙蔗、文件的分層依據(jù)：
是以業(yè)務(wù)邏輯為劃分基礎(chǔ)傲霸，在此基礎(chǔ)上進(jìn)行文件的劃分
2、這里的分層不一定適用于所有項(xiàng)目眉反，比如有些項(xiàng)目采用了框架(如angular\vue)昙啄，那么
這樣的項(xiàng)目就不是很適合于這樣的分層結(jié)構(gòu)了。
root
-----js（JavaScript腳本
-----css（樣式表
-----img（圖片
-----swf（flash
-----src（源文件目錄
-----dep（引入的第三方依賴包目錄
-----font（引入字體目錄
