一、关于html
- 页面的开头进行HTML5标准模式的声明<!DOCTYPE html>
- 在html 标签内添加属性lang="zh-cn",根据HTML5规范表示会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译
- IE兼容模式：<meta http-equiv="X-UA-Compatible" content="IE=Edge">
- 标签以及标签属性小写
- 可省略的闭合标签不省略，自闭合的标签可不写结束斜线
- 嵌套的标签必须被正确的嵌套，嵌套的子元素有一格的缩进
- 使用二个空格进行缩进
- 有良好的注释规范，针对页面模块有简要的注释，便于维护<!-- 注释内容 -->
- 使用语义化标签，例如header,footer,nav,article,filedset,section等，避免全页使用div布局。
- 尽量减少标签嵌套
- 尽量减少classname，采用语义化标签来代替
- 属性值使用双引号，不要使用单引号
- 属性顺序：（class是为高可复用组件设计的，所以应处在第一位）
a) class
b) id,name
c) data-*
d) src,for,type,href,value, max-length, max, min, pattern
e) title,alt
f) role,aira-*
g) required, readonly, disabled
- 关于布尔型属性，比如checked等不用赋值，存在即表示为true，不存在为false
- 行内元素不要嵌套块级元素
- css和js尽量使用文件引入的形式，不要使用内联
- css文件放于head标签中，js文件放于body标签的底部
- 图片尽量用 alt 标签去描述图片，提高搜索引擎
- 结构、表现、行为三者分离，尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。
- img空src的问题：<img src="about:blank" alt="">
- 自定义属性以data-*开头
- 不推荐使用属性设置样式
二、关于CSS
- 文件名建议用小写字母加中横线的方式
- 使用外部样式表
- 良好的命名习惯
a).长名称或词组可以使用中横线来为选择器命名-
list-item //中划线--------中划线可以用来表示层级关系
box-btn_default //下划线--------下划线可以用来表示不同的状态
boxWrap //首字母大写----首字母大写可以用来表示因为样式的需要，而不得不增加的HTML结构。
b).用有意义的或通用的ID和class命名，语义化命名。
c). ID和class命名越简短越好，只要足够表达涵义
d),在页面复用性比较强的时候，可以使用m-为前缀，表示这是一个组件
- 书写顺序：
a).位置属性(position, top, right, z-index, display, float等)
b).大小(width, height, padding, margin)
c.)文字系列(font, line-height, letter-spacing, color- text-align等)
d).背景(background, border等)
e).其他(animation, transition等)
- 使用CSS缩写属性，比如padding,margin,font等等
- 合并相同的样式，例如h1,h2{color:red;}
- 禁止在css中使用*选择符
- 不要去用标签限定ID或者类选择符,例如div.tips
- 适当的代码注释
- 尽量少的去使用后代选择器,选择器的深度不要超过4层
- 0不加单位
- 不要随意使用id，id在js中是唯一的,class可以重复
- 链接的样式请严格按照如下顺序添:a:link->a:visited->a:hover ->a:active
- 将样式的类名和触发事件的类名区分开来。行为可以统一使用“act-”为前缀
- 不要设置太大的z-index
- 建议使用border: none代替border: 0；因为前者不消耗性能
- 属性值后面必须加分号“;”即使只有一个；以及统一在冒号后面加一个空格
- 考虑到扩展性建议将padding,border和width分开设置
- 颜色16进制采用小写字母，尽量使用简写
- 针对特殊浏览器的属性，应写在标准属性之前，左侧对齐
- float/absolute/fixed定位会强制设置成block，所以无需再设置display:block
三、 关于js
- 命名：
a) 所有变量必须是有意义的英文，严厉禁止拼音，语义化定义；
b) 函数和变量使用驼峰式命名，例如currentPrice
c) 常量全部大写的下划线命名
d) 所有的布尔型命名以’is’,’has’,’can’等状态词开头
- 格式规范:
a) 使用 4 个空格符号来缩进代码块
b) 运算符 ( = + - * / ) 前后需要添加空格
c) 对象中冒号和属性值之间有空格，最后一个属性-值对后面不要添加逗号
d) 数组中","后空一格
e) 使用分号结束代码语句
- Javascript程序应该尽量放在.js的文件中，若非页面专用，勿将js放于页面中
- 对象声明直接使用{}，而不是new Object()；数组声明直接使用[ ]，而不是new Array()
- 代码注释说明："//"用作代码行注释，"/* .... */"形式用作对整个代码段的,函数/方法注释需说明其作用，以及其参数含义。
- 尽量使用三目运算代替简单的if-else
- 尽量不要在JS里面写CSS
- 使用正则表达式做字符串处理
- 字符串统一使用单引号
- 所有的操作符前后都跟一个空格；任何“;”后空一格、for循环中初始化“,”后空一格、数组中","后空一格、对象中“:”后空一格
- 为了便于阅读每行字符建议小于数 80 个
- 尽量不要使用eval函数
- 不要使用with语句
- 不要在循环里面进行DOM操作
- 通常能用CSS解决的效果避免使用js来实现
- 比较运算符使用===和 !==，不要使用==和!=
- 使用闭包或者命名空间避免全局空间污染
四、关于Vue
- 模块文件夹命名：
a） 以小写开头
b） 由一个单词（名词）组成，例如course，student；
- Vue组件命名：
a） 把每个组件单独分成一个文件，方便快速定位
b） 组件名应该始终是多个单词的，根组件 App 除外
c） 单文件组件文件名始终是单词大写开头 (PascalCase)，例如MyComponent.vue
d） 开头为所属模块名称，常用结尾词有Detail、Edit、List、Info、Report等
e） vue重用组件以Item结尾
f） 基础组件名（展示类的、无逻辑的或无状态的组件）设置特定前缀开头，例如Base、App 或 V
g） 单文件组件和字符串模板中组件名使用PascalCase命名，例如<MyComponent/>
h） 在DOM模板中，使用连字符分割单词，例如<app-header></app-header>
i） 组件名应该倾向于完整单词而不是缩写，例如UserProfileOptions.vue而非UProfOpts.vue
j） 和父组件紧密耦合的子组件应该以父组件名作为前缀命名，例如：
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
k） 组件名应该以一般化描述的单词开头，以描述性的修饰词结尾，例如SearchButtonClear.vue而非ClearSearchButton.vue
- method自定义方法命名：
a） 动宾短语，驼峰式命名（jumpPage、openCarInfoDialog）
b） Ajax方法以get、post开头，data结尾（getListData、postFormData）
c） 事件方法以on开头（onTypeChange）
d） Init、refresh除外，尽量使用常用单词开头（set、get、open、close、jump等等）
- Vue方法声明顺序：
a） components
b） props
c） data
d） created
e） mounted
f） activited
g） update
h） beforeRouteUpdate
i） methods
j） filter
k） computed
l） watch
- 注释说明：
a） 公共组件使用说明
b） 各组件中重要函数或者类说明
c） 复杂的业务逻辑说明
d） 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、使用了某种算法或思路等需要进行注释描述
e） 注释块必须以/**（至少两个星号）开头**/
f） 单行注释使用//；
/**
* 使用说明/简单描述
* @param grid { String } 参数说明
* @param cols { Array } 参数说明
* @return {void} 返回值
* @author 作者 时间
* @version 版本号
*/
function mergeCells(grid, cols) {
// do Something
}
- 组件props原子化：
a） 尽量只使用JavaScript 原始类型(字符串、数字、布尔值)和函数，避免复杂的对象
b） 提供默认值
c） 使用type属性校验类型
d） 使用props之前先检查一下prop是否存在
- 避免使用this.$parent，保证组件的相互独立性
- 谨慎使用this.$refs
- 无需将 this 赋值给 component 变量
- 为v-for设置键值，总是用key配合v-for，以便维护内部组件及其子树的状态
- 避免v-if和v-for用在同一元素上：（当它们在同一节点时，v-for比v-if优先级更高）
a） 为了过滤列表中的项目（<li v-for=”user in users” v-if=”user.isActive”>），可以将user替换成计算属性，让其返回过滤后的列表。
b） 为了避免渲染本应该被隐藏的列表(<li v-for=”user in users” v-if=”isShowUsers”),可以将v-if移动到父容器元素上。
- 为组件样式设置作用域<style scope></style>
- 单文件组件的顶级元素的顺序：
<template></template>
<script></script>
<style></style>
- 指令缩写，用 : 表示 v-bind: 和用 @ 表示 v-on:
- 元素选择器应该避免在scoped中出现（大量使用元素选择器会很慢）
- 优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent
- 组件模板应该只包含简单的表达式，复杂的表达式重构为计算属性或方法
- 调试信息console.log() debugger 使用完及时删除
- 使用ES6风格编码