前端代码规范

前端代码规范.md

+参考：[阿里代码规范（前端篇）](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