1.規(guī)范說明
此為前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范，意在提高代碼的規(guī)范性、擴(kuò)展性、可維護(hù)性、閱讀性，提高工作效率，提升個(gè)人技術(shù)。
此規(guī)范為參考規(guī)范，不全是硬性要求，部分硬性約定見下一條書寫規(guī)范，統(tǒng)一團(tuán)隊(duì)編碼規(guī)范和風(fēng)格。讓所有代碼都是有規(guī)可循，并且能夠得到沉淀，減少重復(fù)勞動(dòng)。
1.1結(jié)構(gòu)說明
-- 項(xiàng)目結(jié)構(gòu)
----|---- public公共靜態(tài)文件夾
----|----|---- CSS文件夾
----|----|---- JS文件夾
----|----|----|---- libs插件文件夾
----|----|---- images文件夾
2.書寫規(guī)范
2.1 樣式與內(nèi)容分離
2.1.1 項(xiàng)目結(jié)構(gòu)
-—— 根目錄
|-——- 功能目錄
|-——- index.html //功能入口頁面
|-——- public/
|-——- CSS/
|-——- 對應(yīng)功能樣式目錄
|-——- JS/
|-——- 對應(yīng)功能JS目錄
2.1.2 重構(gòu)步驟
-
index.html頁面中的全部樣式關(guān)聯(lián)class="xxx"注：制作靜態(tài)頁面的時(shí)候文件中不包含任何一個(gè)id="XXX" - 為
index.html書寫CSS style [到這里頁面重構(gòu)完成] - 開始
index.html書寫JS交互文件，使用id和class定位元素來進(jìn)行交互，如果是單個(gè)元素操作id名的前面加上js，如果是操作元素的class則給class加上js-前綴 [到這里頁面交互完成]
2.1.3 命名規(guī)范
- 文件以及文件夾：全部用英文小寫字母+數(shù)字或者是連接符“
-、_”，不可出現(xiàn)其它字符，例如：...、---... - 文件：調(diào)用
/libs文件需包含版本號(hào)，壓縮文件需包含min關(guān)鍵詞，其它插件則不包含，例如：/libs/jquery.1.9.1.js、fileuploader.js - ID名：匈牙利命名法 & 駝峰式大小寫，如果是要獲取某個(gè)ID的value，那這個(gè)ID名最好和后端提供的接口字段名一模一樣，為了方便查看
如：firstNameaList - Class名：全部小寫，用
-連接符
如：top-itemmain-box - 盡可能用語義明確的單詞命名
2.1.4 格式&編碼
- 文本文件：
.xxxUTF-8(無BOM)編碼 - 圖片文件：
.pngpng-24或者png-8（根據(jù)情況而定）.jpg - 動(dòng)態(tài)圖片：
.gif
2.2 CSS細(xì)化規(guī)范
2.2.1
-—— /css/
|-——- base.css CSS全局文件
|-——- 功能樣式目錄
2.2.1 文件說明
-
base.css這個(gè)文件包含了CSSreset部分、各個(gè)模塊的樣式、各種marginpaddingwidthheight...補(bǔ)丁 - 功能樣式目錄中包含了各個(gè)功能的樣式，目錄按照頁面目錄來分層
- 為了方便查看頁面引入的CSS文件，不建議使用 @import
2.2.2 CSS注釋格式約定
/*
@name: 文件名
@description：文件描述
@require（可選）： 依賴哪個(gè)文件
@author：作者
*/
2.2.3 CSS嵌套規(guī)則
/*推薦嵌套層級(jí)*/
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-nav .ui-list{}
.ui-table .ui-list{}
/* 不推薦 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-list{}
.ui-nav{}
2.2.4 補(bǔ)充說明
由于現(xiàn)階段我們還未使用 CSS預(yù)編譯工具 ，因此在開發(fā)的時(shí)候我們展示只考慮CSS的目錄結(jié)構(gòu)，后期如果我們使用到了 CSS預(yù)編譯工具 我們就需要有一個(gè)預(yù)編譯文件對應(yīng)的目錄，如 LESS SASS，編譯我們可以依靠自動(dòng)化構(gòu)建工具來處理
2.3 HTML細(xì)化規(guī)范
2.3.1 HTML注釋格式約定
<div id="header">
<div class="xxx"><span></span></div>
</div> <!--頭部結(jié)束-->
- HTML換行縮進(jìn)必須清晰，采用四個(gè)空格，如果覺得按空格麻煩，可以在編輯器將
Tab鍵設(shè)為四個(gè)空格
2.3.2 第一行統(tǒng)一使用HTML5標(biāo)準(zhǔn)
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>極客公園 | 創(chuàng)新者社區(qū)</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" href="favicon.ico">
標(biāo)簽的使用就不在這里備注了，避免使用過時(shí)的標(biāo)簽，統(tǒng)一標(biāo)準(zhǔn)閉合
2.4 JS細(xì)化規(guī)范
2.4.1 JS文件結(jié)構(gòu)
-—— /js/
|-——- /libs/ 使用到的JS插件以及庫文件夾
|-——- base.js 全局函數(shù)和變量文件
|-——- api.js 存放所有的接口調(diào)用函數(shù)
|-——- 功能JS目錄 對應(yīng)視圖文件的目錄
- 每一個(gè)頁面中的JS文件建議單獨(dú)寫一個(gè)，文件以及文件目錄對應(yīng)視圖文件的目錄，方便查找以及維護(hù)
- 建議將接口調(diào)用寫成一個(gè)函數(shù)，這個(gè)函數(shù)返回三種狀態(tài)，
成功失敗完成。
3.前后端配合規(guī)范
3.1 文檔書寫規(guī)范
- 接口文檔書寫清晰，盡量避免錯(cuò)別字以及語句歧義
- 如有特殊情況，對應(yīng)接口后面加以備注
