前端開發(fā)規(guī)范總結(jié)

制定相關(guān)的開發(fā)規(guī)范，是為了約束開發(fā)人員編寫的代碼保持一致風格，提高代碼可讀性，提高團隊協(xié)作效率，以便于前端后期的代碼優(yōu)化維護和維護人員添加功能， 最終保證輸出可讀性強和可維護的代碼和高質(zhì)量的文檔。

項目結(jié)構(gòu)規(guī)范

project --項目名稱 assets css --樣式文件 js --存放javaScript腳本 images --圖片文件 api --請求接口 bin --二進制文件 components --公共組件 config --配置文件 local cn --中文資源文件 en --英文資源文件 utils --存放工具類文件 views --頁面文件 temp --存放臨時文件資源 mock --模擬接口數(shù)據(jù) data --數(shù)據(jù)文件

文件命名規(guī)范

文件名統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不能包含漢字、空格和特殊字符。

命名原則思想：

1.使自己和工作組的每一個成員能夠理解每一個文件的意義；

2.當我們在文件夾中使用“按名稱排例”的規(guī)則，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等操作。

Html 命名

主頁文件命名統(tǒng)一使用 index.htm，index.html，index.asp，index.asp 等文件名（小寫）。

子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如： 關(guān)于我們（aboutus） 管理頁面（manager） 訂單（order）產(chǎn) 品（product ） 等。

javaScript 命名

彈出窗口（pop.js）， 請求（request.js），全局（global.js），api接口（api.js），權(quán)限（auth.js），存儲（storage.js）等。

圖片命名

圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)，尾部表示此圖片二級類型。

如：輪播圖（banner），標志性（logo），按鈕（button），菜單（menu），導航（nav），地圖（map），頭部（head），底部（bottom）等。

主次如：share_sina.jpg，share_qq，share_baidu，banner_qq.gif，banner_sohu.gif，menu_product.gif，menu_job.gif 等。

CSS 命名規(guī)范

CSS樣式可細分為3類：自定義樣式、重新定義HTML樣式、鏈接狀態(tài)樣式。

1. 自定義新的 CSS 樣式，影響被使用本樣式的區(qū)域，用于設定網(wǎng)頁中局部的樣式。

自定義樣式名 “.”+“相應樣式效果描述的單詞或縮寫”，例：“ .shadow ”；

文字樣式名 “.no”+“字號”+“行距”+“顏色縮寫”，例：“ .no12 ” 、“ .no12-24 ”；

2. 重新定義已有的HTML標簽樣式，影響全部的被設定標簽樣式，用于統(tǒng)一網(wǎng)頁中某一標簽的樣式定義。

標簽樣式名 “HTML標簽”，例：hr { border: 1px dotted #333333 }

3. 對鏈接不同狀態(tài)設定特殊樣式，影響被使用本樣式區(qū)域中的鏈接。

只能修飾標簽： a.nav:link{ ... }

修飾所有包含有標簽的其他標簽：nav.a:link{ ... }

頁面樣式引用方式

頁頭：header 頁腳：footer 導航：nav 子導航：subnav 側(cè)欄：sidebar 欄目：column 內(nèi)容：content/container 左右中：left right center 登錄：login 標志：logo 廣告圖：banner 頁面主體：main 新聞：news 下載：download 菜單：menu 子菜單：submenu 搜索：search 版權(quán)：copyright 滾動：scroll 內(nèi)容：content 標簽頁：tab 列表：list 提示：msg 標題：title

HTML 命名規(guī)范

- 網(wǎng)頁 head 標簽內(nèi)的規(guī)范

網(wǎng)頁顯示字符集 ：

網(wǎng)頁簡介：

網(wǎng)頁標題：

引入外部 css 文件：

引入外部 js 文件：