一、Vue
1.组件名
组件名使用Pascal 命名法（与骆驼命名法类似。只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写）
// 反例
export default { name: 'page-footer' }
export default { name: 'pageFooter' }
export default { name: 'page_footer' }
// 正例
export default { name: 'PageFooter' }`
2.组件文件
反例
index.html
main.js
componentspageheader
page-content
page_footer
正例
index.html
main.js
componentsPageHeader
PageContent
PageFooter
3.Props
定义 Prop 的时候应该始终以驼峰格式（camelCase）命名，在父组件赋值的时候使用连接线（-）。这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在JavaScript 中更自然的是驼峰命名。
// 反例
// Vue
props: {
show-status: Boolean
}
// HTML
<span :showStatus="true"></span>
// 正例
// Vue
props: {
showStatus: Boolean
}
// HTML
<span :show-status="true"></span>
Prop 的定义应该尽量详细的指定其类型、默认值和验证。
// 反例
props: ['attrM', 'attrA', 'attrZ']
// 正例
props: {
attrM: Number,
attrA: { type: String, required: true },
attrZ: {
type: Object,
// 数组/对象的默认值应该由一个工厂函数返回
default: () => { return { msg: '成就你我' } }
},
attrE: {
type: String,
validator: (v) => {
return !(['success', 'fail'].indexOf(v) === -1)
}
}
}
4.v-for
在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。
// 反例
<ul>
<li v-for="item in list">
{{ item.title }}
</li>
</ul>
// 正例
<ul>
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
v-for 应该避免与 v-if 在同一个元素（例如： <li> ）上使用，因为 v-for 的优先级比 v-if 更高，为了避免无效计算和渲染，应该尽量将 v-if 放到容器的父元素之上。
// 反例
<ul>
<li v-for="item in list" :key="item.id" v-if="showList">
{{ item.title }}
</li>
</ul>
// 正例
<ul v-if="showList">
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
<template v-if="showList">
<div v-for="item in list" :key="item.id">
{{ item.title }}
</div>
</template>
5.v-if / v-else-if / v-else
若同一组 v-if 逻辑控制中的元素逻辑相同，Vue 为了更高效的元素切换，会复用相同的部分，例如：value 。为了避免复用带来的不合理效果，应该在同种元素上加上 key 做标识。
// 反例
<div v-if="hasData">
<span>
{{ mazeyData }}
</span>
</div>
<div v-else>
<span>
无数据
</span>
</div>
// 正例
<div v-if="hasData" key="has-data">
<span>{{ mazeyData }}</span>
</div>
<div v-else key="no-data">
<span>
无数据
</span>
</div>
6.指令缩写
为了统一规范始终使用指令缩写，使用 v-bind ， v-on 并没有什么不好，这里仅为了统一规范(vue官方
给的建议是要么都用v-bind:value,要么都用:value)。
<input :value="userName" @click="submit">
7.样式
为了避免样式冲突，整个项目要么全都使用 scoped 特性，要么使用 BEM 约定。
// 反例
<template>
<button class="btn btn-sure">确认</button>
</template>
<style>
.btn{border: 1px solid #F1F1F1; }
.btn-sure{ background-color: blue; }
</style>
// 正例
<!-- 使用 scoped 特性 -->
<template>
<button class="btn btn-sure">确认</button>
</template>
<style scoped>
.btn{border: 1px solid #F1F1F1; }
.btn-sure{ background-color: blue; }
</style>
<!-- 使用 BEM（Block Element Modifier） 特性 -->
<template>
<button class="menu-btn menu-btn-sure">确认</button>
</template>
<style>
.menu-btn{ border: 1px solid #F1F1F1; }
.menu-btn-sure{ background-color: blue; }
</style>
<template>
<button class="menu btn btn-sure">确认</button>
</template>
<style>
.menu.btn{ border: 1px solid #F1F1F1;}
.menu.btn-sure{ background-color: blue; }
</style>
8.单文件组件的顶级元素顺序
// 反例
<style>
/* CSS */
</style>
<script>
/* JavaScript */
</script>
<template>
<!-- HTML -->
</template>
// 正例
<template>
<!-- HTML -->
</template>
<script>
/* JavaScript */
</script>
<style>
/* CSS */
</style>
9.单文件组件的JavaScript选项顺序
export default {
name: '',
mixins: [], // 混入
components: {}, // 组件
model: {},
props: {},
data () {
return {}
}, // 数据
computed: {},// 计算属性
created () {}, // 创建周期
mounted () {}, // dom挂载周期
watch: {}, // 监听器
methods: {}, // 方法
filters: {}, // 过滤
directives: {}, // 指令
destroyed () {} // 实例销毁周期
}
二、JavaScript
1.var / let / const
[强制] 建议不再使用 var，而使用 let / const，优先使用 const。每个 let 只能声明一个变量。一个 let
声明多个变量，容易导致较长的行长度，并且在修改时容易造成逗号和分号的混淆。
let hangModules = [];
let missModules = [];
let visited = {};
[强制] 变量必须 即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量。变量声明与
使用的距离越远，出现的跨度越大，代码的阅读与维护成本越高。
[建议] 在判断中如果数据类型确定时请使用类型严格的 ===。
[建议] 按执行频率排列判断或代码分支的顺序。
[建议] 如果函数或全局中的 else 块后没有任何语句，可以删除 else。
function getName() {
if (name) {
return name;
}
return 'unnamed';
}
2.引号
建议不再使用双引号，静态字符串使用单引号，动态字符串使用反引号衔接。
示例：
// 反例
const foo = "后除"
const bar = foo + "，前端工程师"
// 正例
const foo = '后除'
const bar = `${foo}，前端工程师`
3.函数
匿名函数统一使用箭头函数，多个参数/返回值时优先使用对象的结构赋值。
示例：
// 反例
function getPersonInfo (name, sex) {
// ...
return [name, gender]
}
// 正例
function getPersonInfo ({name, sex}) {
// ...
return {name, gender}
}
函数名统一使用驼峰命名，以大写字母开头申明的都是构造函数，使用小写字母开头的都是普通函数，
也不该使用 new 操作符去操作普通函数。
[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外。因为循环体中的函数表达式，运
行过程中会生成循环次数个函数对象。
function clicker() {
// ......
}
for (let i = 0, len = elements.length; i < len; i++) {
let element = elements[i];
addListener(element, "click", clicker);
}
[建议] 对循环内多次使用的不变值，在循环外用变量缓存。
let width = wrap.offsetWidth + 'px';
for (let i = 0, len = elements.length; i < len; i++) {
let element = elements[i];
element.style.width = width;
// ......
}
[建议] 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 ==
null。
// string
typeof variable === 'string'
// number
typeof variable === 'number'
// boolean
typeof variable === 'boolean'
// Function
typeof variable === 'function'
// Object typeof
variable === 'object'
// RegExp
variable instanceof RegExp
// Array
variable instanceof Array
// null
variable === null
// null or undefined
variable == null
// undefined
typeof variable === 'undefined'
[强制] 字符串开头和结束使用单引号 '。输入单引号不需要按住 shift，方便输入。实际使用中，字符串
经常用来拼接 HTML。为方便 HTML 中包含双引号而不需要转义写法。
[建议] 不允许修改和扩展任何原生对象和宿主对象的原型。
[建议] 属性访问时，尽量使用 .。
[建议] 一个函数的长度控制在 50 行以内。将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。特定算法等不可分割的逻辑允许例外。
function syncViewStateOnUserAction() {
if (x.checked) {
y.checked = true;
z.value = '';
}else {
y.checked = false;
}
if (a.value) {
warning.innerText = '';
submitButton.disabled = false;
}else {
warning.innerText = 'Please enter it';
submitButton.disabled = true;
}
}
// 直接阅读该函数会难以明确其主线逻辑，因此下方是一种更合理的表达方式：
function syncViewStateOnUserAction() {
syncXStateToView();
checkAAvailability();
}
function syncXStateToView() {
y.checked = x.checked;
if (x.checked) {
z.value = '';
}
}
function checkAAvailability() {
if (a.value) {
clearWarnignForA();
}else {
displayWarningForAMissing();
}
}
[建议] 一个函数的参数控制在 6 个以内。
[建议] 属性在构造函数中声明，方法在原型中声明。
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
TextNode.prototype.clone = function () {
return this;
};
4.对象
建议使用扩展运算符拷贝对象而不是 Object.assign(target, …sources) 。
示例：
// 错误
const foo = {a: 0, b: 1}
const bar = Object.assign(foo, {c: 2})
// 反例
const foo = {a: 0, b: 1}
const bar = Object.assign({}, foo)
// 正例
const foo = {a: 0, b: 1}
const bar = JSON.parse(JSON.stringify(foo))
// 极好
const foo = {a: 0, b: 1}
const bar = {...foo, c: 2}
对象尽量静态化，添加新属性使用 Object.assign(target, …sources) 。
示例：
// 反例
const foo = {a: 3}
foo.b = 4
// 正例
const foo = {a: 3}
Object.assign(foo, {b: 4})
5.模块
统一使用 import / export 的方式管理项目的模块。
示例：
// lib.js
export default {}
// app.js
import app from './lib'
import 统一放在文件顶部。
如果模块只有一个输出值，使用 export default ，否则不用。
三、HTML / CSS
1.标签
在引用外部 CSS 或 JavaScript 时不写 type 属性。HTML5 默认 type 为 text/css 和 text/javascript 属性，所以没必要指定。
示例：
// 反例
<link rel="stylesheet" href="//www.test.com/css/test.css" type="text/css">
<script src="//www.test.com/js/test.js" type="text/javascript"></script>
// 正例
<link rel="stylesheet" href="//www.test.com/css/test.css">
<script src="//www.test.com/js/test.js"></script>
2.协议
省略协议头部声明，例如： http: 、 https: ，且不加引号。
示例：
// 反例
background: url("http://www.test.com/img/test.png");
// 正例
background: url(//www.test.com/img/test.png);
3.选择器
选择器尽可能简单，能使用 .test 别使用 div.test 。
每个选择器和声明都要独立新行。
示例：
// 反例
p.test{ color: #000; }
h1,h2,h3{ font-size: 12px; color: #666; }
// 正例
.test{color: #000; }
h1,
h2,
h3{ font-size: 12px; color: #666; }
4.分号
每个声明最后都要加分号 ; ，即使是最后一个。
示例：
// 反例
h3{
font-size: 12px;
color: #666
}
// 正例
h3{
font-size: 12px;
color: #666;
}
5.命名
Class 和 ID 的命名应该语义化，通过看名字就知道是干嘛的；多个单词用连接线 - 连接。
示例：
// 反例
.testheader{
font-size: 20px;
}
// 正例
.test-header{
font-size: 20px;
}
6.属性缩写
CSS 属性尽量使用缩写，提高代码的效率和方便理解。
示例：
// 反例
border-width: 1px;
border-style: solid;
border-color: #ccc;
// 正例
border: 1px solid #ccc;
7.文档类型
应该总是使用 HTML5 标准。
示例：
<!DOCTYPE html>
8.table
应该避免使用 table 做页面布局，因为同样的布局使用 table 要多几倍的渲染时间；当然使用 table 做表
格是完全正确的。
9.CSS声明顺序
相关属性应为一组，推荐的样式编写顺序
Positioning（定位）
Box model（盒子模型）
Typographic（排版）
Visual（视觉效果，如动画颜色等）
other（其他）
/* Positioning 定位*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model 盒子模型 */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic 排版 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual 视觉效果，如动画颜色等*/
background-color: #f5f5f5;
color: #fff; opacity: .8;
/* Other 其他*/
cursor: pointer;
扫一扫
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
