前端編碼規范 · CherryNote

### HTML + 盡量使用語義化標簽，如`header`、`article`、`footer`等。十個常用的標簽： + `<article>`：定義文章 + `aside`：定義側邊欄 + `header`:定義頁眉 + `hgroup`:定義標題的組合 + `section`:定義段落 + `time`:定義時間 + `footer`:定義頁腳 + `main`: 定義主體內容 + `nav`:定義導航 + HTML5 doctype：`<!DOCTYPE html>`,確保在瀏覽器中保持一致； + 統一的`meta`標簽 ```html <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta charset="UTF-8"> ``` * 可用性： * 正確使用`alt`屬性 * 確保連接和按鈕正確使用 * 給表單做好`label`標記 ### CSS * 不能漏寫分號 * 盡量不改變元素的默認行為 * 緊密耦合的DOM選擇器，三個層級以上建議加上`class` * 避免不必要的寫法 * `p.name` * `ul>li:first-child` * 選擇器要盡量精確，減少ID，盡量避免`!important` * 使用繼承，不要把可繼承的樣式重復聲明 * 能用英文，不用數字 * 顏色，一般使用16進制，需要做透明效果的時候使用`rbga` * 盡量用CSS或字體代替圖片 * 命名規范 * class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，`.btn` 和 `.btn-danger`） * class 名稱應當盡可能短，并且意義明確。 * 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。 * 避免過度任意的簡寫。`.btn` 代表 *button*，但是 `.s` 不能表達任何意思。 * 注釋使用`/* xxx */` * 樣式聲明的順序 1. 定位 2. 盒模型 3. 文字內容 4. 顏色、背景 5. 其他：cursor * `scss/less`，變量盡量在一個單獨文件中定義，通過`webpack`聲明為全局調用 * 避免嵌套層級過多，維持在`3-4`層，對于超過的嵌套層級，重新評估。嵌套`20`層以上的代碼可讀性差。 > 更多的HTML與CSS規范，參考[編碼規范by@mdo](https://codeguide.bootcss.com/?spm=a2c4e.10696291.0.0.272b19a4Mx8KrV#css-media-queries) ### Javascript * 推薦使用`vscode`編輯器 * `vscode`配置參照[文件](./vscode-settings.md) * 配置`eslint` ```json "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "@innovation/eslint-config-vue-ts" ], "rules": { "prefer-promise-reject-errors": "off", "no-new": "off", "space-before-function-paren": "off", "vue/require-valid-default-prop": "off", "vue/no-use-v-if-with-v-for": "off", "vue/require-v-for-key": "off", "vue/no-side-effects-in-computed-properties": "off", "vue/no-unused-vars": "off", "no-var": "error" }, "parserOptions": { "parser": "@typescript-eslint/parser" } } ``` ### Vue * 方法放置順序推薦 1. `components` 2. `props` 3. `data` 4. `created` 5. `mounted` 6. `activited` 7. `update` 8. `beforeRouteUpdate` 9. `methods` 10. `filter` 11. `computed` 12. `watch` * `method`自定義方法名 * 動賓短語，例如`jumpPage`，`openDialog`，禁止`jump`,`open`指帶不明 * `ajax`方法，使用`get`,`post`開頭，以`data`結尾，例如`getTableData` * 事件以`on`開頭 * 遵守駝峰命名規則 * 基于模塊開發 > 整體原則：每個`vue`組件首先必須專注于解決一個單一的問題，獨立的、可復用的、微小的和可測試的。如果組件做了太多的事情或者變得臃腫，那么請將其拆成更小的組件并保持單一的原則 * 組件命名：2-3三個單詞，不要過長，可讀性高，不能過于抽象 * vue組件的創建 * 按需創建 * 組件不能太大，難以重用和維護 * 組件也不能太小，太小會嵌套層次變深，且組件間通信更難 * 避免那些“以后可能會有用”的組件污染你的項目。它們可能會永遠的只是（靜靜地）待在那里，這一點也不聰明