前端编码规范 · 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组件的创建 * 按需创建 * 组件不能太大，难以重用和维护 * 组件也不能太小，太小会嵌套层次变深，且组件间通信更难 * 避免那些“以后可能会有用”的组件污染你的项目。它们可能会永远的只是（静静地）待在那里，这一点也不聪明