1.框架/Vue
组件名
组件名为多个单词,并且用连接线 -
连接,避免与 HTML 标签冲突,并且结构更加清晰。
1 | // Not recommended |
组件文件
组件的名字应该始终是以连接线 -
连接的单词,一方面可与组件名一致,使项目更加清晰,另一方面这样的写法对编辑器引入也很友好。
1 | // Not recommended |
对于例如按钮、下拉框或表格这样的基础组件应该始终以一个特定的前缀开头,区别于其他业务组件。
1 | // 反例 |
Prop
定义 Prop 的时候应该始终以驼峰格式(camelCase)命名,在父组件赋值的时候使用连接线 -
。这里遵循每个语言的特性,因为在 HTML 标记中对大小写是不敏感的,使用连接线更加友好;而在 Javascript 中更自然的是驼峰命名。
1 | // Not recommended |
Prop 的定义应该尽量详细的指定其类型、默认值和验证。
1 | // Not recommended |
v-for
在执行 v-for 遍历的时候,总是应该带上 key 值使更新 DOM 时渲染效率更高。
1 | // Not recommended |
v-for 应该避免与 v-if 在同一元素上使用,因为 v-for 的优先级比 v-if 更高。为了避免无效计算和渲染,应该尽量将 v-if 放到容器的父元素之上。
1 | // Not recommended |
v-if / v-else-if / v-else
若同一组 v-if 逻辑控制中的元素逻辑相同,Vue为了更高效的元素切换,会复用相同的部分,例如 value
。为了避免复用带来的不合理效果,应该在同种元素上加上 key 做标识。
1 | // Not Recommended |
指令缩写
为了统一规范始终使用指令缩写。
1 | <input :value="mazeyUser" @click="verifyUser"> |
样式
为避免样式冲突,整个项目要么全部使用 scoped 特性,要么使用 BEM 约定。
1 | // Not recommended |
注1
BEM 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。
BEM 命名约定的模式是:
1 | .block {} |
- block 代表了更高级别的抽象或组件;
- block__element 代表 .block 的后代,用于形成一个完成的 .block 的整体;
- block–modifier 代表 .block 的不同状态或不同版本
注2
不建议使用类似于 font-size-20
, color-666
, margin-top-20
这样的类,此时如果想把全局的 color-666
颜色改成 #ccc
,就会很麻烦。
单文件组件的顶级元素顺序
为了统一和便于阅读,应该按 <template>
、<script>
、<style>
的顺序放置。
2.JavaScript
var / let / const
建议不再使用 var,而使用 let/const,优先使用 const。任何一个变量的使用都要提前申明,除了 function 定义的函数可以随便放在任何位置。
引号
建议不再使用双引号,静态字符串使用单引号,动态字符串使用反引号链接。
1 | // Not recommended |
函数
匿名函数统一使用箭头函数,多个参数/返回值时优先使用对象的结构赋值
1 | // Not recommended |
对象
建议使用扩展运算符拷贝对象而不是 Object.assign(target, ...sources)
。
1 | // Wrong |
对象尽量静态化,添加新属性使用 Object.assign(target, ...sources)
。
1 | // Not recommended |
若有遍历对象的需求,优先使用 Map 结构。
1 | // Not recommended |
模块
统一使用 import / export 的方式管理项目的模块
1 | // lib.js |
import 统一放在文件顶部。
如果模块只有一个输出值,使用 export default
,否则不用。
循环
for (var i = 0; i < arr.length; i++) {}
这样的方式遍历不是很好,尤其是当 arr 是 DOM 对象的时候,这样就会一直在访问 DOM 层,而访问 DOM 层的开销是很大的。
for (var i = 0, len = arr.length; i < len; i++) {}
这样的循环方式比较好,只会访问一次 DOM 层(不适用于 DOM 节点会动态更新的场景)。
eval
避免使用 eval
,如果要将字符串转换为对象,最好使用浏览器的内置方法来解析 JSON 数据,以确保代码的安全性和数据的合法性。如果浏览器不支持 JSON.parse()
,可以使用 JSON.org 所提供的库。
如果不得不使用 eval()
,可以尝试使用 new Function()
来代替,在 new Function()
中运行的代码会在一个局部函数作用域内执行,因此源码中定义的变量不会自动变成全局变量。
3.HTML / CSS
标签
在引用外部 CSS 或 JavaScript 时不写 type 属性。HTML5 默认 type 为 text/css
和 text/javascript
属性,所以没必要指定。
1 | <!-- Not recommended --> |
协议
省略协议头部声明,例如:http
、https
,且不加引号。
1 | /* Not recommended */ |
选择器
选择器尽可能简单,能使用 .test
就别使用 div.test
。
每个选择器和声明都要独立新行。
1 | /* Not recommended */ |
分号
每个声明最后都要加分号 ;
,即使是最后一个。
命名
Clss 和 ID 的命名应该语义化,通过看名字就知道是干嘛的;多个单词用连接线 -
链接。
属性和缩写
CSS 属性尽量使用缩写,提高代码的效率和方便理解。
1 | /* Not recommended */ |
文档类型
应该总是使用 HTML5 标准 <!DOCTYPE html>
。
table
应该避免使用 table 做页面布局,因为同样的布局使用 table 要多几倍的渲染时间;当然使用 table 做表格是完全正确的。
注释
应该给一个模块文件写一个区块注释
1 | /** |