1.規(guī)范說明
此為前端開發(fā)團隊遵循和約定的代碼書寫規(guī)范筹吐，意在提高代碼的規(guī)范性糖耸、擴展性、可維護性丘薛、閱讀性嘉竟，提高工作效率，提升個人技術。
此規(guī)范為參考規(guī)范舍扰，不全是硬性要求倦蚪，部分硬性約定見下一條書寫規(guī)范，統(tǒng)一團隊編碼規(guī)范和風格边苹。讓所有代碼都是有規(guī)可循陵且，并且能夠得到沉淀，減少重復勞動勾给。
1.1結構說明
-- 項目結構
----|---- public公共靜態(tài)文件夾
----|----|---- CSS文件夾
----|----|---- JS文件夾
----|----|----|---- libs插件文件夾
----|----|---- images文件夾
2.書寫規(guī)范
2.1 樣式與內容分離
2.1.1 項目結構
-—— 根目錄
|-——- 功能目錄
|-——- index.html //功能入口頁面
|-——- public/
|-——- CSS/
|-——- 對應功能樣式目錄
|-——- JS/
|-——- 對應功能JS目錄
2.1.2 重構步驟
-
index.html頁面中的全部樣式關聯(lián)class="xxx"注：制作靜態(tài)頁面的時候文件中不包含任何一個id="XXX" - 為
index.html書寫CSS style [到這里頁面重構完成] - 開始
index.html書寫JS交互文件滩报，使用id和class定位元素來進行交互锅知，如果是單個元素操作id名的前面加上js播急，如果是操作元素的class則給class加上js-前綴 [到這里頁面交互完成]
2.1.3 命名規(guī)范
- 文件以及文件夾：全部用英文小寫字母+數(shù)字或者是連接符“
-、_”售睹，不可出現(xiàn)其它字符桩警，例如：...、---... - 文件：調用
/libs文件需包含版本號昌妹，壓縮文件需包含min關鍵詞捶枢，其它插件則不包含，例如：/libs/jquery.1.9.1.js飞崖、fileuploader.js - ID名：匈牙利命名法 & 駝峰式大小寫烂叔，如果是要獲取某個ID的value，那這個ID名最好和后端提供的接口字段名一模一樣固歪，為了方便查看
如：firstNameaList - Class名：全部小寫蒜鸡，用
-連接符
如：top-itemmain-box - 盡可能用語義明確的單詞命名
2.1.4 格式&編碼
- 文本文件：
.xxxUTF-8(無BOM)編碼 - 圖片文件：
.pngpng-24或者png-8（根據(jù)情況而定）.jpg - 動態(tài)圖片：
.gif
2.2 CSS細化規(guī)范
2.2.1
-—— /css/
|-——- base.css CSS全局文件
|-——- 功能樣式目錄
2.2.1 文件說明
-
base.css這個文件包含了CSSreset部分、各個模塊的樣式牢裳、各種marginpaddingwidthheight...補丁 - 功能樣式目錄中包含了各個功能的樣式逢防，目錄按照頁面目錄來分層
- 為了方便查看頁面引入的CSS文件，不建議使用 @import
2.2.2 CSS注釋格式約定
/*
@name: 文件名
@description：文件描述
@require（可選）： 依賴哪個文件
@author：作者
*/
2.2.3 CSS嵌套規(guī)則
/*推薦嵌套層級*/
.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 補充說明
由于現(xiàn)階段我們還未使用 CSS預編譯工具 蒲讯，因此在開發(fā)的時候我們展示只考慮CSS的目錄結構忘朝，后期如果我們使用到了 CSS預編譯工具 我們就需要有一個預編譯文件對應的目錄，如 LESS SASS判帮，編譯我們可以依靠自動化構建工具來處理
2.3 HTML細化規(guī)范
2.3.1 HTML注釋格式約定
<div id="header">
<div class="xxx"><span></span></div>
</div> <!--頭部結束-->
- HTML換行縮進必須清晰局嘁，采用四個空格，如果覺得按空格麻煩晦墙，可以在編輯器將
Tab鍵設為四個空格
2.3.2 第一行統(tǒng)一使用HTML5標準
<!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">
標簽的使用就不在這里備注了导狡，避免使用過時的標簽，統(tǒng)一標準閉合
2.4 JS細化規(guī)范
2.4.1 JS文件結構
-—— /js/
|-——- /libs/ 使用到的JS插件以及庫文件夾
|-——- base.js 全局函數(shù)和變量文件
|-——- api.js 存放所有的接口調用函數(shù)
|-——- 功能JS目錄 對應視圖文件的目錄
- 每一個頁面中的JS文件建議單獨寫一個偎痛，文件以及文件目錄對應視圖文件的目錄旱捧，方便查找以及維護
- 建議將接口調用寫成一個函數(shù)，這個函數(shù)返回三種狀態(tài)，
成功失敗完成枚赡。
3.前后端配合規(guī)范
3.1 文檔書寫規(guī)范
- 接口文檔書寫清晰氓癌，盡量避免錯別字以及語句歧義
- 如有特殊情況，對應接口后面加以備注
