命名规则
1.项目命名
全部采用小写方式， 以下划线分隔。
例：my_project_name
2.目录命名
参照项目命名规则； 有复数结构时，要采用复数命名法。
例：scripts, styles, images, data_models
3.JS文件命名
参照项目命名规则。
例：account_model.js
4.CSS, SCSS文件命名
参照项目命名规则。
例：retina_sprites.scss
5.HTML文件命名
参照项目命名规则。
例：error_report.html
HTML
1.语法
- 缩进使用soft tab（4个空格）；
- 嵌套的节点应该缩进；
- 在属性上，使用双引号，不要使用单引号；
- 属性名全小写，用中划线做分隔符；
- 不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；
- 不要忽略可选的关闭标签，例：
</li>和</body>。
2.HTML5 doctype
- 在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；
- 虽然doctype不区分大小写，但是按照惯例，doctype大写
3.字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
4.引入CSS, JS
根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。
HTML5 规范链接
5.属性顺序
属性应该按照特定的顺序出现以保证易读性；
- class
- id
- name
- data-*
- src, for, type, href, value , max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。
6.减少标签数量
在编写HTML代码时，需要尽量避免多余的父节点；
很多时候，需要通过迭代和重构来使HTML变得更少。
7.实用高于完美
尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
JavaScript
1.缩进
使用soft tab（4个空格）。
2.单行长度
不要超过80，但如果编辑器开启word wrap可以不考虑单行长度。
3.分号
按照vscode prettier文件设置
4.空格
按照vscode prettier文件设置
5.单行注释
双斜线后，必须跟一个空格；缩进与下一行代码保持一致；可位于一个代码行的末尾，与代码间隔一个空格。
if (condition) {
// if you made it here, then all security checks passed
allowed();
}
var zhangsan = 'zhangsan'; // one space after code
6.多行注释
最少三行, '*'后跟一个空格，具体参照下边的写法；
建议在以下情况下使用：
- 难于理解的代码段
- 可能存在错误的代码段
- 浏览器特殊的HACK代码
- 业务逻辑强相关的代码
/*
* one space after '*'
*/
var x = 1;
7.引号
统一使用单引号。
8.变量命名
- 标准变量采用驼峰式命名
- 常量全大写，用下划线连接
- 构造函数，大写第一个字母
- jquery对象必须以'$'开头命名
var thisIsMyName;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
// not good
var body = $('body');
// good
var $body = $('body');
9.代码块
使用花括号包裹所有的多行代码块。
单行 if 语句也必须使用花括号括住
// 推荐
if (true) {
// TODO ...
}
// 不推荐
if (true) // TODO ...
vue 文件
基本结构
<template>
<div></div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
methods: {},
mounted() {}
};
</script>
<!-- 声明语言，并且添加scoped -->
<style scoped></style>
vue 文件方法声明顺序
- components
- props
- data
- computed
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods
- watch
props 命名规范
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case
<!-- 推荐 -->
<script>
props: {
greetingText: String;
}
</script>
<welcome-message greeting-text="hi"></welcome-message>
<!-- 不推荐 -->
<script>
props: {
'greeting-text': String
}
</script>
<welcome-message greetingText="hi"></welcome-message>
使用 ES6 风格编码源码
- 定义变量使用
let,定义常量使用const - 静态字符串一律使用单引号或反引号，动态字符串使用反引号
// 推荐
const a = 'foobar';
const b = `foo${a}bar`;
const c = 'foobar';
// 不推荐
const a = 'foobar';
const b = 'foo' + a + 'bar';
- 解构赋值
// 数组解构赋值
const arr = [1, 2, 3, 4];
// 推荐
const [first, second] = arr;
// 不推荐
const first = arr[0];
const second = arr[1];
// 对象解构赋值
// 推荐
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {}
// 不推荐
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
- 拷贝数组 使用扩展运算符（...）拷贝数组。
const items = [1, 2, 3, 4, 5];
// 推荐
const itemsCopy = [...items];
// 不推荐
const itemsCopy = items;
- 箭头函数
需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了
this
// 推荐
const boundMethod = (...params) => method.apply(this, params);
// 不推荐
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
};
指令规范
- 指令有缩写一律采用缩写形式
// 推荐
:class="{'show-left'：true}"
@click="getListData"
// 不推荐
v-bind:class="{'show-left'：true}"
v-on:click="getListData"
- v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一
<!-- 推荐 -->
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
<!-- 不推荐 -->
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
- 避免 v-if 和 v-for 同时用在一个元素上（性能问题）
