前端開(kāi)發(fā)規(guī)范

1. 為什么需要 “前端開(kāi)發(fā)規(guī)范”

規(guī)范不是強(qiáng)制性的，對(duì)代碼的編寫(xiě)和程序的運(yùn)行不會(huì)有致命的問(wèn)題，但是沒(méi)有規(guī)范會(huì)有一系列的問(wèn)題，比如：

• 缺乏規(guī)范，第一個(gè)問(wèn)題就是團(tuán)隊(duì)編碼風(fēng)格不一，增加了成員之間代碼的閱讀成本，加大了團(tuán)隊(duì)協(xié)作成本和維護(hù)成本；
• 隨著團(tuán)隊(duì)人員的變化（多人開(kāi)發(fā)一個(gè)應(yīng)用，或者應(yīng)用更換開(kāi)發(fā)人員），如果缺乏規(guī)范，項(xiàng)目可能會(huì)變得一團(tuán)糟，甚至失控；
• 即便是個(gè)人開(kāi)發(fā)，規(guī)范也是需要的，當(dāng)把項(xiàng)目轉(zhuǎn)給其他人的時(shí)候，如果有規(guī)范的話(huà)，會(huì)大大降低閱讀成本。
• …

所以，建立一套適合團(tuán)隊(duì)的開(kāi)發(fā)規(guī)范是很受用的。

2. 開(kāi)發(fā)規(guī)范分類(lèi)

這里不涉及工作流程規(guī)范，因?yàn)槊總€(gè)團(tuán)隊(duì)的工作流程都不一樣，這是跟公司相關(guān)的，與開(kāi)發(fā)沒(méi)有太大關(guān)系。一般來(lái)說(shuō)，有以下幾類(lèi)規(guī)范：

• 編碼規(guī)范
• 項(xiàng)目結(jié)構(gòu)規(guī)范
• 框架、工具規(guī)范
• 其他約定

2.1 編碼規(guī)范

• html: 主要有縮進(jìn)，標(biāo)簽，加載順序等等。可以參考：

  • Code Guide

• css：主要有縮進(jìn)，換行，引號(hào)，注釋等等。可以參考：

  • idiomatic-css

• js：主要有縮進(jìn)，換行，變量名稱(chēng)，括號(hào)，文檔注釋等等。可以參考：

  • airbnb js style
  • google js style
  • idiomatic js style
  • standard js style

其實(shí)，我一般參考的是 Code Guide

2.2 項(xiàng)目結(jié)構(gòu)規(guī)范

項(xiàng)目結(jié)構(gòu)規(guī)范包括文件、目錄命名規(guī)范，模塊化分組規(guī)范，組件化規(guī)范等等，這些規(guī)范有些是構(gòu)建工具要求的，有些是團(tuán)隊(duì)自己定的。

以下是一些示例：

• 命名規(guī)范：參考 Code Guide

  • 全部采用小寫(xiě)方式， 以下劃線(xiàn)分隔。例：my_project_name
  • 完整英文命名的用復(fù)數(shù)形式，縮寫(xiě)用單數(shù)形式。例：scripts, js, styles, css, images, img

• 模塊化分組規(guī)范：以 lila 構(gòu)建工具為例

  • /project/src/home/: home 頁(yè)的工作空間（以下所有文件或目錄都在這個(gè)目錄下）
  • index.html: html 入口文件
  • index.js: js 入口文件
  • index.(css|less|scss): 樣式入口文件
  • js/: js 文件目錄
    
    • js/ajax/: 對(duì) ajax 封裝的目錄
    • js/util/: 工具類(lèi)函數(shù)的目錄
    • js/pages/: spa 應(yīng)用頁(yè)面目錄
    • js/data/: 靜態(tài)數(shù)據(jù)目錄
    • js/tpl/: 模板目錄
    • js/(event|view)/: 事件監(jiān)聽(tīng)文件目錄
    • …
  • data/: 本地 json 數(shù)據(jù)模擬
  • (css|less|scss)/: 樣式文件目錄
  • images/: 圖片文件目錄
  • components/: 組件目錄（如果基于 react, vue 等組件化框架）
  • …
• 組件化規(guī)范：這里的組件化并不是指在代碼、框架層面的組件化，而是在架構(gòu)和規(guī)范層面的組件化
  
  • /project/src/component/hello/: hello 組件的工作空間（以下所有文件或目錄都在這個(gè)目錄下）
  • README.md: 組件的說(shuō)明，包括功能介紹、api 文檔、一些用例等等
  • index.js: 組件的入口文件，調(diào)用組件將使用如下的方式（如果有樣式文件，則要在 js 中加載）
    
    • commonjs: const hello = require('component/hello')
    • es6: import hello from 'component/hello'
  • demo/：用例目錄
  • …

2.3 框架、工具規(guī)范

框架和 UI 庫(kù)

• 在技術(shù)上，每個(gè)團(tuán)隊(duì)都有框架選型，都遵循一定的規(guī)范協(xié)作。基本上從團(tuán)隊(duì)搭建之初便需要定下今后團(tuán)隊(duì)的技術(shù)選型，并且最好不要更改選定好的框架和 UI 庫(kù)，因?yàn)椴煌目蚣堋⒉煌?UI 庫(kù)一般相互之間是不兼容的；同時(shí)用多個(gè)框架或 UI 庫(kù)也是要盡量避免的；
• 框架選型：經(jīng)典的 jquery + bootstrap，比較現(xiàn)代化的 react + ant-design|material-ui|Semantic-UI （因?yàn)槲抑饕且?react 為組件庫(kù)做開(kāi)發(fā)，所以對(duì) vue 的技術(shù)選型不是很了解，>_<）

構(gòu)建工具

構(gòu)建工具的使用使開(kāi)發(fā)變得極為便利和高效，工具在提升工作效率的同時(shí)，也同時(shí)提供了約束團(tuán)隊(duì)編碼規(guī)范、項(xiàng)目結(jié)構(gòu)規(guī)范等的可能性。

• eslint：一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以用來(lái)保證寫(xiě)出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。
• stylelint：一個(gè)強(qiáng)大和現(xiàn)代的 CSS 審查工具，有助于開(kāi)發(fā)者推行統(tǒng)一的代碼規(guī)范，避免樣式錯(cuò)誤。
• csslint：與 stylelint 類(lèi)似

約束項(xiàng)目結(jié)構(gòu)規(guī)范需要團(tuán)隊(duì)討論來(lái)定，但基本上需要滿(mǎn)足以下幾個(gè)需求：

• 便利性：能夠快速的定位文件位置，對(duì)編輯器友好
• 解耦性：不同頁(yè)面之間，不同組件之間是相互解耦的，不會(huì)更改一個(gè)組件或頁(yè)面而影響到其他組件或頁(yè)面
• 擴(kuò)展性：能夠很方便的擴(kuò)展組件和頁(yè)面，而不會(huì)帶來(lái)副作用
• 閱讀性：具有很好的閱讀性，對(duì)組件、頁(yè)面以及內(nèi)部結(jié)構(gòu)能夠一目了然

以 lila 構(gòu)建工具為例，它的 工作空間 概念便很好的滿(mǎn)足上述所有需求：

比如，home 頁(yè)的工作空間（/project/src/home/），這個(gè)頁(yè)面（或者組件）所有文件都在這個(gè)目錄下，包括 js、css、html片段、圖片、json模擬數(shù)據(jù)等等。

• 開(kāi)發(fā)的時(shí)候，都只在這個(gè)目錄下工作，避免多級(jí)目錄的不斷切換（當(dāng)工程很大的時(shí)候，這是個(gè)大問(wèn)題）
• 當(dāng)新添加一個(gè)頁(yè)面或組件的時(shí)候，直接復(fù)制一個(gè)原有的頁(yè)面或組件，這是極為方便的
• 解耦當(dāng)然就不用說(shuō)了，內(nèi)部結(jié)構(gòu)也是很清晰的

2.4 其他約定

如：

• 每個(gè) js 文件不應(yīng)該超過(guò) 400 行，超過(guò)就應(yīng)該分塊
• 每個(gè) css 文件不應(yīng)該超過(guò) 200 行，超過(guò)就應(yīng)該分塊
• …

3. 后續(xù)

上一篇：本地化接口模擬、前后端并行開(kāi)發(fā)

下一篇：前端開(kāi)發(fā)文檔

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

總結(jié)

以上是生活随笔為你收集整理的前端架构之路（3） - 前端开发规范的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。