编写可维护javascript代码(一)基本格式化

215 阅读6分钟

任何语言都需要强调编码风格的一致性,只要是团队开发,每个人以相同方式编写代码就是至关重要,这样大家才可以方便看懂和维护对方的代码。就计算机执行而言,计算机只关心对错。但对团队协作而言,风格一致且优雅的代码,更容易理解维护,因此确定代码风格,尤为重要,就目前公司内部使用的Vue框架,使用eslint强制推行的风格,仅供参考

缩进

4个空格(制表符)

目前eslint已帮忙实现 不需要手动维护

推荐指数: 🌟🌟

语句结尾

以;(分号)结尾

由于浏览器分析器的分号自动插入机制,js即使省略分号也可以正常工作。目前项目里eslint也是默认不允许添加分号,但是如果出现([/+-符号,如果不正常添加分号,依据浏览器正常解析,会造成无法估量的错误

项目现状:

eslint有时在多个函数变量之间冗杂时,不加分号会导致现有的格式规范不起效果,此时需要去检查是否是分号没有对应到位

// bad use
x = y
(function() {

})()

便会等价于

x = y(function() {})()

推荐指数: 🌟🌟

行的长度

javascript代码规范中指定一行的长度为80个字符

推荐指数: 🌟🌟

换行

一行长度达到了单行最大字符数限制时,就需要手动将一行拆成两行。通常我们在运算符后换行,下一行会增加两个层级的缩进

目前项目存在问题:

  1. 代码长度过长 没有换行 不要使用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

推荐指数: 🌟🌟

空行

空行常常被忽略,代码应该是看起来可读的段落,而不是一大段揉在一起的连续文本。一段代码的语义和另外一段代码不相关,这时应该使用空行分隔,确保语义关联的代码展示在一起

个人见解:

  1. 方法和方法之间

推荐指数: 🌟🌟

// good use
function getName() {
    // code
}

function getAge() {
    // code
}
  1. 变量和函数之间

推荐指数: 🌟🌟🌟🌟

// bad use
var name = null

function getName() {

}
  1. 在多行和上一行注释之间

推荐指数: 🌟🌟🌟

/*
    取得属性值 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]

推荐指数: 🌟🌟🌟🌟