前端:開發規範

前端開發規範css

  1. 爲何須要 「前端開發規範」

規範不是強制性的,對代碼的編寫和程序的運行不會有致命的問題,可是沒有規範會有一系列的問題,好比:html

缺少規範,第一個問題就是團隊編碼風格不一,增長了成員之間代碼的閱讀成本,加大了團隊協做成本和維護成本;
隨着團隊人員的變化(多人開發一個應用,或者應用更換開發人員),若是缺少規範,項目可能會變得一團糟,甚至失控;
即使是我的開發,規範也是須要的,當把項目轉給其餘人的時候,若是有規範的話,會大大下降閱讀成本。
...
因此,創建一套適合團隊的開發規範是很受用的。前端

  1. 開發規範分類

這裏不涉及工做流程規範,由於每一個團隊的工做流程都不同,這是跟公司相關的,與開發沒有太大關係。通常來講,有如下幾類規範:vue

編碼規範
項目結構規範
框架、工具規範
其餘約定
2.1 編碼規範
html: 主要有縮進,標籤,加載順序等等。能夠參考:react

Code Guide
css:主要有縮進,換行,引號,註釋等等。能夠參考:jquery

idiomatic-css
js:主要有縮進,換行,變量名稱,括號,文檔註釋等等。能夠參考:es6

airbnb js style
google js style
idiomatic js style
standard js style
其實,我通常參考的是 Code Guideajax

2.2 項目結構規範
項目結構規範包括文件、目錄命名規範,模塊化分組規範,組件化規範等等,這些規範有些是構建工具要求的,有些是團隊本身定的。json

如下是一些示例:bootstrap

命名規範:參考 Code Guide

所有采用小寫方式, 如下劃線分隔。例:my_project_name
完整英文命名的用複數形式,縮寫用單數形式。例:scripts, js, styles, css, images, img
模塊化分組規範:以 lila 構建工具爲例

/project/src/home/: home 頁的工做空間(如下全部文件或目錄都在這個目錄下)
index.html: html 入口文件
index.js: js 入口文件
index.(css|less|scss): 樣式入口文件
js/: js 文件目錄
js/ajax/: 對 ajax 封裝的目錄
js/util/: 工具類函數的目錄
js/pages/: spa 應用頁面目錄
js/data/: 靜態數據目錄
js/tpl/: 模板目錄
js/(event|view)/: 事件監聽文件目錄
...
data/: 本地 json 數據模擬
(css|less|scss)/: 樣式文件目錄
images/: 圖片文件目錄
components/: 組件目錄(若是基於 react, vue 等組件化框架)
...
組件化規範:這裏的組件化並非指在代碼、框架層面的組件化,而是在架構和規範層面的組件化

/project/src/component/hello/: hello 組件的工做空間(如下全部文件或目錄都在這個目錄下)
README.md: 組件的說明,包括功能介紹、api 文檔、一些用例等等
index.js: 組件的入口文件,調用組件將使用以下的方式(若是有樣式文件,則要在 js 中加載)
commonjs: const hello = require('component/hello')
es6: import hello from 'component/hello'
demo/:用例目錄
...
2.3 框架、工具規範
框架和 UI 庫
在技術上,每一個團隊都有框架選型,都遵循必定的規範協做。基本上從團隊搭建之初便須要定下從此團隊的技術選型,而且最好不要更改選定好的框架和 UI 庫,由於不一樣的框架、不一樣的 UI 庫通常相互之間是不兼容的;同時用多個框架或 UI 庫也是要儘可能避免的;
框架選型:經典的 jquery + bootstrap,比較現代化的 react + ant-design|material-ui|Semantic-UI (由於我主要是以 react 爲組件庫作開發,因此對 vue 的技術選型不是很瞭解,>_<)
構建工具
構建工具的使用使開發變得極爲便利和高效,工具在提高工做效率的同時,也同時提供了約束團隊編碼規範、項目結構規範等的可能性。

eslint:一個語法規則和代碼風格的檢查工具,能夠用來保證寫出語法正確、風格統一的代碼。
stylelint:一個強大和現代的 CSS 審查工具,有助於開發者推行統一的代碼規範,避免樣式錯誤。
csslint:與 stylelint 相似
約束項目結構規範須要團隊討論來定,但基本上須要知足如下幾個需求:

便利性:可以快速的定位文件位置,對編輯器友好
解耦性:不一樣頁面之間,不一樣組件之間是相互解耦的,不會更改一個組件或頁面而影響到其餘組件或頁面
擴展性:可以很方便的擴展組件和頁面,而不會帶來反作用
閱讀性:具備很好的閱讀性,對組件、頁面以及內部結構可以一目瞭然
以 lila 構建工具爲例,它的 工做空間 概念便很好的知足上述全部需求:

好比,home 頁的工做空間(/project/src/home/),這個頁面(或者組件)全部文件都在這個目錄下,包括 js、css、html片斷、圖片、json模擬數據等等。

開發的時候,都只在這個目錄下工做,避免多級目錄的不斷切換(當工程很大的時候,這是個大問題)
當新添加一個頁面或組件的時候,直接複製一個原有的頁面或組件,這是極爲方便的
解耦固然就不用說了,內部結構也是很清晰的
2.4 其餘約定
如:

每一個 js 文件不該該超過 400 行,超過就應該分塊每一個 css 文件不該該超過 200 行,超過就應該分塊...

相關文章
相關標籤/搜索