任何语言都需要强调编码风格的一致性,只要是团队开发,每个人以相同方式编写代码就是至关重要,这样大家才可以方便看懂和维护对方的代码。就计算机执行而言,计算机只关心对错。但对团队协作而言,风格一致且优雅的代码,更容易理解维护,因此确定代码风格,尤为重要,就目前公司内部使用的Vue框架,使用eslint强制推行的风格,仅供参考
缩进
4个空格(制表符)
目前eslint已帮忙实现 不需要手动维护
推荐指数: 🌟🌟
语句结尾
以;(分号)结尾
由于浏览器分析器的分号自动插入机制,js即使省略分号也可以正常工作。目前项目里eslint也是默认不允许添加分号,但是如果出现([/+-符号,如果不正常添加分号,依据浏览器正常解析,会造成无法估量的错误
项目现状:
eslint有时在多个函数变量之间冗杂时,不加分号会导致现有的格式规范不起效果,此时需要去检查是否是分号没有对应到位
// bad use
x = y
(function() {
})()
便会等价于
x = y(function() {})()
推荐指数: 🌟🌟
行的长度
javascript代码规范中指定一行的长度为80个字符
推荐指数: 🌟🌟
换行
一行长度达到了单行最大字符数限制时,就需要手动将一行拆成两行。通常我们在运算符后换行,下一行会增加两个层级的缩进
目前项目存在问题:
- 代码长度过长 没有换行 不要使用eslint自动换行 会导致代码报错查找困难问题 建议自己手动换行
// good use 在运算符后换行 第二行追加两个缩进
callAFunction(document, element, widnow, "some string value", true, 123,
navigator);
// bad use 第二行只有一个缩进
callAFunction(document, element, widnow, "some string value", true, 123,
navigator);
// bad use 在运算符之前就换行 这种场景下ASI规则可能会插入分号 从而引起错误
callAFunction(document, element, widnow, "some string value", true, 123
, navigator);
对于语句来说,同样也可以用下面这种换行规则
// good use
if (isLeapYear && isFebruary && day == 29 && itsYourBirthday &&
noPlans) {
// code
}
有一个规则例外:给变量赋值时,第二行的位置 应当和赋值运算符的位置保持对齐
// good use
var result = something + anotherThing + yetAnotherThing + somethingElse +
anotherSomeThingElse
推荐指数: 🌟🌟
空行
空行常常被忽略,代码应该是看起来可读的段落,而不是一大段揉在一起的连续文本。一段代码的语义和另外一段代码不相关,这时应该使用空行分隔,确保语义关联的代码展示在一起
个人见解:
- 方法和方法之间
推荐指数: 🌟🌟
// good use
function getName() {
// code
}
function getAge() {
// code
}
- 变量和函数之间
推荐指数: 🌟🌟🌟🌟
// bad use
var name = null
function getName() {
}
- 在多行和上一行注释之间
推荐指数: 🌟🌟🌟
/*
取得属性值 name
*/
var name = null
/*
取得属性值 age
*/
var age = null
命名
驼峰式大小写命名(camel case),以小写字母开始,后续每个单词首字母都大写。用于给变量函数命名
变量和函数
变量的命名前缀是名词,函数的命名前缀是动词
变量声明变量的长度尽可能短,同时可以体现数据类型,一般对于数组采用+s的复数形式
// good use
var count = 10;
var name = "etong";
var status = false;
var names = ["jack", "tom"]
// bad use 变量声明像函数 容易产生误解
var getCount = 10
var getName = "etong"
var isUse = false
函数
一切前缀约定
| 动词 | 含义 |
|---|---|
| can | 函数返回一个布尔值 |
| has | 函数返回一个布尔值 |
| is | 函数返回一个布尔值 |
| get | 函数返回一个非布尔值 |
| set | 函数用来设置保存一个值 |
函数的长度一定要见明知意(明确表达自己此次做了什么),哪怕长度稍微长一点,都是值得的
// good use
function getName() {
return name;
}
// bad use
function theName() {
}
// good use
if (isEnabled()) {
setName("etong")
}
if (getName() === "etong" ) {
// code
}
推荐指数: 🌟🌟🌟🌟
常量
约定源于c语言,使用大写字母和下划线来命名,下划线用以分隔单词;比如 代码中一眼就可以看出count是变量 MAX_COUNT 是常量,它的值不会被修改
// good use
var MAX_COUNT = 10;
var URL = "http://****";
if (count < MAX_COUNT) {
// code
}
推荐指数: 🌟🌟🌟
直接量
字符串
推荐使用双引号 不建议单引号 使用es6的字符串模板 或者使用+进行字符串拼接
数字
// int
var count = 10;
// float
var price = 10.0;
var price = 10.00;
// bad use float no int part 没有整数部分
var price = 10.;
// bad use float no float part
var price = .1;
// bad use 八进制写法已经弃用
var price = 010
// uncommon use 十六进制写法
var price = 0XA2
// uncommon use 科学计数法
var num = 1e23;
没有整数或者没有小数部分,可能会引起歧义,是故意丢掉或者刻意为之,在eslint会报错,八进制不常用 同时010在八进制中表示8而不是10
null
null 是特殊值,我们常将它和undefined搞混。null最好的理解方式是对象的占位符(placeholder)。在下列场景下 应该使用null
| 使用场景 | 不建议使用场景 | |
|---|---|---|
| 1 | 初始化变量,这个变量可能赋值为一个对象 | 不要使用null来检测是否传入某个参数 |
| 2 | 用来和一个已经初始化的变量比较,这个变量可以也可以不是一个对象 | 不要用null来检测一个未初始化的变量 |
| 3 | 当函数的参数期望是对象时,用做参数传入 | |
| 4 | 当函数的返回值期望是对象时,用做返回值传出 |
// good use
var person = null;
// good use
function getPerson() {
if (condition) {
return new Person("etong")
} else {
return null
}
}
// good use
var person = getPerson();
if (person !== null) {
// code
}
// bad use 用来和未初始化变量比较
var person;
if (person !== null) {
// code
}
// bad use 检测是否传入了参数
function doSomething(arg1, arg2, arg3, arg4) {
if (arg4 !== null) {
// code
}
}
undefined
没有被初始化的变量都有一个初始值,即undefined,表示这个变量等待被赋值。
// bad use
var person;
console.log(person === undefined); // true
console.log(typeof person); // "undefined"
console.log(typeof foo); // "undefined" "foo"未被声明
尽管这段代码可以正常工作,但还是建议避免在代码中使用undefined,这个值常常和返回“undefined”的typeof运算符混淆。typeof不论是值是undefined的变量还是未声明的变量,typeof运算结果都是“undefined”
对象直接量
// good use
var book = {
title: "***",
author: "**"
}
数组直接量
// good use
var numbers = [1, 2, 3, 4]
推荐指数: 🌟🌟🌟🌟