云積分前端規(guī)范

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)步驟

  1. index.html頁面中的全部樣式關(guān)聯(lián) class="xxx" 制作靜態(tài)頁面的時(shí)候文件中不包含任何一個(gè)id="XXX"
  2. index.html 書寫CSS style [到這里頁面重構(gòu)完成]
  3. 開始 index.html 書寫JS交互文件,使用 idclass定位元素來進(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.jsfileuploader.js
  • ID名:匈牙利命名法 & 駝峰式大小寫,如果是要獲取某個(gè)ID的value,那這個(gè)ID名最好和后端提供的接口字段名一模一樣,為了方便查看
    如:firstName aList
  • Class名:全部小寫,用-連接符
    如:top-item main-box
  • 盡可能用語義明確的單詞命名

2.1.4 格式&編碼

  • 文本文件: .xxx UTF-8(無BOM)編碼
  • 圖片文件: .png png-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è)文件包含了CSS reset部分、各個(gè)模塊的樣式、各種margin padding width height...補(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)接口后面加以備注
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容