diff --git "a/\345\211\215\347\253\257\344\273\243\347\240\201\350\247\204\350\214\203.md" "b/\345\211\215\347\253\257\344\273\243\347\240\201\350\247\204\350\214\203.md" new file mode 100644 index 0000000000000000000000000000000000000000..6598210bd85b1b5af57cc1df133c2dde3de338c0 --- /dev/null +++ "b/\345\211\215\347\253\257\344\273\243\347\240\201\350\247\204\350\214\203.md" @@ -0,0 +1,114 @@ +参考:[阿里代码规范(前端篇)](https://developer.aliyun.com/article/850913#slide-35) +* (一)命名规范 + * 1.1 项目命名 + 全部采用小写方式,以中线分隔。 + * 1.2 目录命名 + 全部采用小写方式, 以中划线分隔,有复数结构时,要采用复数命名法, 缩写不用复数。 + * 1.3 JS、CSS、SCSS、HTML、PNG 文件命名 + 全部采用小写方式, 以中划线分隔。 + * 1.4 命名严谨性 + 代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。即使纯拼音命名方式也避免采用,杜绝完全不规范的缩写,避免望文不知义。 +* (二) HTML 规范 (Vue Template 同样适用) + * 2.1 HTML 类型 + 使用 HTML5 的文档类型申明: + * 2.2 缩进 + 缩进使用 2 个空格(一个 tab); +嵌套的节点应该缩进。 + * 2.3 分块注释 + 在每一个块状元素,列表元素和表格元素后,加上一对 HTML 注释。 + * 2.4 语义化标签 + HTML5 中新增很多语义化标签,所以优先使用语义化标签,避免一个页面都是 div 或者 p 标 签。 + * 2.5 引号 + 使用双引号(" ") 而不是单引号(’ ') 。 +* (三) CSS 规范 + * 3.1 命名 + 类名使用小写字母,以中划线分割 + id采用驼峰式命名 + scss中的变量、函数、混合、placeholder采用驼峰式命名 + * 3.2 选择器 + css选择器中避免使用标签名 + 使用直接子选择器 + * 3.3 尽量使用缩写属性 + * 3.4 每个选择器及属性独占一行 + * 3.5 省略 0 后面的单位 + * 3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式 +* (四) Javascript 规范 + * 4.1 命名 + 1) 采用小写驼峰命名 lowerCamelCase,代码中的命名均不能以下划线, 也不能以下划线或美元符号结束 + 2) 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风 格,必须遵从驼峰形式 + 3) 常量命名全部大写,单词间用下划线隔开,力求语义表达完整清楚 + * 4.2 代码格式 + 1) 使用 2 个空格进行缩进 + 2) 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以 提升可读性 + * 4.3 字符串 + 统一使用单引号(‘),不使用双引号(“)。 + * 4.4 对象声明 + 1) 使用字面值创建对象 + 2) 使用字面量来代替对象构造器 + * 4.5 使用 ES6+ + 必须优先使用ES6+中新增的语法糖和函数。如:箭头函数、await/async,解构,let、for...of等待。 + * 4.6 括号 + 下列关键字后必须有大括号(即使代码只有一行):if、else、for、while、do、switch、try、catch、finally、with。 + * 4.7 undefined 判断 + 不直接使用 undefined 进行变量判断;使用 typeof 和字符串’undefined’对变量进行判断。 + * 4.8 条件判断和循环最多三层 + 如果超过三层抽成函数,并写清注释 + * 4.9 this 的转换命名 + 对上下文this的引用只能使用'self'来命名。 + * 4.10 慎用 console.log + 因console.log大量使用会有性能问题,所以在非webpack项目中谨慎使用log功能。 +* (五)Vue 项目规范 + * 5.1. 组件规范 + 1) 组件名为多个单词。 + 组件名应该始终是多个单词组成(大于等于 2),且命名规范为KebabCase格式。 + 这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。 + 2) 组件文件名为 pascal-case 格式 + 3) 基础组件文件名为 base 开头,使用完整单词而不是缩写。 + 4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名 + 5) 在 Template 模版中使用组件,应使用 PascalCase 模式,并且使用自闭合组件。 + 6) 组件的 data 必须是一个函数 + 7) Prop 定义应该尽量详细 + 必须使用 camelCase 驼峰命名 + 必须指定类型 + 必须加上注释,表明其含义 + 必须加上 required 或者 default,两者二选其一 + 如果有业务需要,必须加上 validator 验证 + 8) 为组件样式设置作用域 + 9) 如果特性元素较多,应该主动换行 + * 5.2 模板中使用简单的表达式 + 组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么,而非如何计算那个值。而且计算属性和方法使得代码可以重用。 + * 5.3 指令都使用缩写形式 + 指令推荐都使用缩写形式,(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) + * 5.4 标签顺序保持一致 + 单文件组件应该总是让标签顺序保持为 + * 5.5 必须为 v-for 设置键值 key + * 5.6 v-show 与 v-if 选择 + 如果运行时,需要非常频繁地切换,使用 v-show ;如果在运行时,条件很少改变,使用 v-if。 + * 5.7 script 标签内部结构顺序 + components > props > data > computed > watch > filter > 钩子函数(钩子函数按其执行顺序) > methods + * 5.8 Vue Router 规范 + 1) 页面跳转数据传递使用路由参数 + 页面跳转,例如 A 页面跳转到 B 页面,需要将 A 页面的数据传递到 B 页面,推荐使用 路由参数进行传参,而不是将需要传递的数据保存 vuex,然后在 B 页面取出 vuex 的数据,因为如果在 B 页面刷新会导致 vuex 数据丢失,导致 B 页面无法正常显示数据。 + 2) 使用路由懒加载(延迟加载)机制 + 3) router 中的命名规范 + path、childrenPoints 命名规范采用kebab-case命名规范(尽量vue文件的目录结构保持一致,因为目录、文件名都是kebab-case,这样很方便找到对应的文件) + name 命名规范采用KebabCase命名规范且和component组件名保持一致!(因为要保持keep-alive特性,keep-alive按照component的name进行缓存,所以两者必须高度保持一致) + 4) router 中的 path 命名规范 + path除了采用kebab-case命名规范以外,必须以 / 开头,即使是children里的path也要以 / 开头。 + * 5.9 Vue 项目目录规范 + 1) vue 项目中的所有命名一定要与后端命名统一。比如权限:后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词! + 2)使用 vue-cli3 来初始化项目,项目名按照上面的命名规范。 + 3)目录名按照上面的命名规范,其中 components 组件用大写驼峰,其余除 components 组件目录外的所有目录均使用 kebab-case 命名。 + 4)文件、变量命名要与后端保持一致。 + 此目录对应后端 API 接口,按照后端一个 controller 一个 api js 文件。若项目较大时,可以按照业务划分子目录,并与后端保持一致。 + api 中的方法名字要与后端 api url 尽量保持语义高度一致性。 + 对于 api 中的每个方法要添加注释,注释与后端 swagger 文档保持一致。 + 5)assets 为静态资源,里面存放 images, styles, icons 等静态资源,静态资源命名格式为 kebab-case + 6)components目录应按照组件进行目录划分,目录命名为 KebabCase,组件命名规则也为 KebabCase + 7)此目录存放项目所有常量,如果常量在 vue 中使用,请使用 vue-enum 插件 + 8)router和store目录将业务进行拆分,不放到一个 js 文件里。 + router 尽量按照 views 中的结构保持一致 + store 按照业务进行拆分不同的 js 文件 + 9)views目录命名要与后端、router、api 等保持一致 + components 中组件要使用 PascalCase 规则 + \ No newline at end of file