前端工程代碼規範(一)——命名規則與工程約定

前言

隨着前端團隊人員的逐步擴大,須要有一份規範來約束代碼的書寫。
不管人數多少,代碼都應該同出一門。
主要參考了 騰訊alloyteam團隊,裏面有許多認同點。在此基礎上作了些許改進,爲了更適合本身團隊,那些已經達成共識的代碼習慣。僅供參考。css

命名規則

總原則:所有采用小寫方式, 以中劃線分隔。html

項目名
例:my-project-name前端

目錄名
有複數結構時,要採用複數命名法。
例:scriptsstylesimagesvue

JS、CSS/SCSS/LESS、HTML文件名
例:ad-group.jsad-group.scssad-group.htmlgit

工程約定

一個工程內只有一個UI控件
以vue爲例,肯定使用element-ui以後,不可再引入其餘ui控件。github

工程中,src的目錄結構
assets、components、pages/views、store、service、utils、styles、libs、staticelement-ui

代碼的行數與列數限制
爲了提高閱讀體驗,一個文件的行數不超過300,一行代碼的列數不超過120
建議開啓編輯器的自動換行功能segmentfault

router的定義,要對應pages中的目錄結構
例:如router爲/advertise/group/list,則pages中的目錄應爲advertise->group->listsass

組件的傳值
保持單一數據流,公用組件需有一個index文件進行統一註冊安全

css的預編譯器
採用less或者sass,非二者混用

變量申明
儘量少用var,習慣使用let和const

不要使用eval
出於安全性考慮

一個工程內,全部文件名小寫,以‘-’的形式聯結
例:components/ad-group.vue、services/create-ad-service.js

import的變量名,首字母大寫,並採用駝峯形式
例:
import AdGroup from @/components/ad-group.vue;
import CreateAdService from @/services/create-ad-service;

src下直屬components文件夾中的組件約定
一、該組件在不一樣的2個頁面中被引用
二、該組件中沒有接口調用(如有接口調用,則表示與業務強關聯,應放到views中對應的業務文件夾下)

目錄索引

前端工程代碼規範(二)——HTML
前端工程代碼規範(三)——CSS, SCSS
前端工程代碼規範(四)——JS

相關文章
相關標籤/搜索