工作的溝通,不只是電子郵件或者面對面語言交流,代碼也是溝通方式之一。
用代碼實現需求,只是萬里長征走完了第一步,必須讓代碼表達自己的設計思想。
試想一下,你負責的功能被另外一個同事接手,如果你的代碼結構清晰、注釋合理,他就不用頻繁的詢問代碼疑點,不用打斷你的工作。
編寫代碼的時候,應該考慮到別人的閱讀感受,減少閱讀障礙,為整個團隊創造代碼,而不是你自己。
真正牛逼的程序員是寫出能讓人看得懂的代碼。
不要小看這個,雖說我們寫的代碼確實是跑給機器的,但是代碼是人寫的,而通常一個項目的開發,需要多個程序員一同協助開發,這時能寫出 human readble 的代碼就顯得至關重要,因為不僅可以減少后期維護的時間成本,而且還能讓后面加入的新同事能更快的上手項目。
要能寫出干凈、整潔並讓人易懂的代碼,必然離不開一些規則,只要自覺遵守、合理運用這些規則,代碼通常都不會太差。
下面分享給大家這份來自阿里的前端代碼規范。
一.編程規約
(一)命名規范
1.1.1項目命名
1.1.2目錄命名
1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名
1.1.4命名嚴謹性
(二)HTML 規范 (Vue Template 同樣適用)
1.2.1 HTML 類型
1.2.2 縮進
1.2.3 分塊注釋
1.2.4 語義化標簽
1.2.5 引號
(三)CSS 規范
1.3.1 命名
1.3.2 選擇器
1.3.3 盡量使用縮寫屬性
1.3.4 每個選擇器及屬性獨占一行
1.3.5 省略0后面的單位
1.3.6 避免使用ID選擇器及全局標簽選擇器防止污染全局樣式
(四)LESS 規范
1.4.1 代碼組織
1.4.2 避免嵌套層級過多
(五)Javascript 規范
1.5.1 命名
1.5.2 代碼格式
1.5.3 字符串
1.5.4 對象聲明
1.5.5 使用 ES6+
1.5.6 括號
1.5.7 undefined 判斷
1.5.8 條件判斷和循環最多三層
1.5.9 this 的轉換命名
1.5.10 慎用 console.log
二、Vue 項目規范
(一) Vue 編碼基礎
2.1.1. 組件規范
2.1.2. 模板中使用簡單的表達式
2.1.3 指令都使用縮寫形式
2.1.4 標簽順序保持一致
2.1.5 必須為 v-for 設置鍵值 key
2.1.6 v-show 與 v-if 選擇
2.1.7 script 標簽內部結構順序
2.1.8 Vue Router 規范
(二) Vue 項目目錄規范
2.2.1 基礎
2.2.2 使用 Vue-cli 腳手架
2.2.3 目錄說明
2.2.4注釋說明
2.2.5 其他