分享自定義前端web開發規範(命名、文字、開發、html、css、js、vue)

語言: CN / TW / HK

介紹

  • 本規範藉助vuepress框架搭建而成。
  • 具體規則檢視github專案,本文只簡單描述。
  • 專案也僅是草案,僅供參考,歡迎建議。
  • github連結:https://github.com/zhuangweizhan/webStandard

為什麼要規範

入坑多年,感受深入。每個人有每個人的想法,每個人也有每個人的習慣。在一個沒有主導人的團隊,往往就是內心互-相吐槽的對方的程式碼,然後自己也寫著讓人吐槽的程式碼。

似乎每個人都是對的,每個人都有充足的理由。

再慢慢,專案越來越"模組化"。我的模組,只有我能看得懂!

所以,為什麼要規範?個人的理解就是:

一起定下一個規矩,團隊(或多數人,或主導人)達成共識後,一起執行。後續,不要再出現你的個人習慣!不要再搞一套騷氣的寫法!也不需要再跟其他人解釋你的寫法多麼優雅!你只需要,依葫蘆畫瓢!

如命名,駝峰跟下劃線分割,他們永遠都沒有絕對的利與弊。團隊定義好,然後執行即可。

規範的定義

如何定義好,才是關鍵點。

個人覺得流程應該是這樣的:

  • 1)參考百家之長,阿里規範還是騰訊規範,拷貝起來。
  • 2)某位負責人,或某位不懂事小夥伴,整理成自己的初稿(吐槽版)
  • 3)吐槽版開始進行團隊的吐槽。針對各個點利弊討論。
  • 4)初稿的整理。然後方案的實踐(如何進行約束,檢測等)
  • 5)終極版本(有結論,且實踐沒發現問題後,後不建議再多次修改)
  • 6)程式碼review
  • 7)吐槽別人沒有使用規範處理的程式碼

規範的目的

借鑑baldwin的一文的說法(https://juejin.cn/post/6844903779117056008)):

  • 規範的程式碼可以促進團隊合作;
  • 規範的程式碼可以減少bug處理;
  • 規範的程式碼可以降低維護成本;
  • 規範的程式碼有助於程式碼審查;
  • 養成程式碼規範的習慣,有助於程式設計師自身的成長

本文分享的規範

本文分享的規範,僅為草稿,大概內容:

  • 1)命名規範,包括基本原則,目錄,變數,樣式等命名規範
  • 2)文字規範,包括縮排,引號,間隔等定義
  • 3)開發規範,包括原則,ide,外掛等定義。
  • 4)html規範,包括基本語法,屬性順序等。
  • 5)css規範,包括基本語法,scss,bem規範,院子類等規範。
  • 6)js規範,包括基本準則,函式方法,迴圈方法等定義。
  • 7)vue規範,包括基本原則,生命週期,快取方案等規範。

image.png

歡迎借鑑,臨時草案也歡迎糾正與提出不足。