《编写可维护的JavaScript》(一) ---基本格式化

第一部分编程风格

代码整洁之道一书,前五章内容比较通用,后面的内容包含大量Java中的场景和代码,感觉并不适合前端仔,所以转换功法: 尝试在<编写可维护JavaScript>一书中继续学习构建优雅可读代码的门道

编程风格和编码规范

编程风格是编码规范的一种,用来规约单文件中的代码规划,编码规范包含的更广包含: 编程的最佳实践,文件和目录的规划以及注释等方面.本书主要讨论JavaScript的编码规范.

首先就是编程风格部分

基本格式化

缩进层级

缩进类型:

1. 制表符缩进: 各个系统对制表符的解释不一样
2. 空格缩进: 在所有文件系统中,表现没有任何差异

缩进长度:

• 2,4,8个空格

作者推荐使用4个空格作为一个缩进层级

语句结尾

JS语句不适用分号和使用分号都能正常运行,那JS代码到底需要分号吗?

答案是需要的,不仅需要分号还是JS中的一个词法单元,用来标记语句结束. 代码之所以不写分号也能运行那是依赖于自动分号插入(ASI)机制,ASI会自动插入分号,但难免会出现: 你不想插入分号,ASI却插入了分号的情况:

//原始代码
function fn(){
    return
    {
        title: 'a'
    }
}
//ASI转换后
function fn(){
    return;
    {
        title: 'a'
    };
}
转换后函数返回值是undefined

作者推荐:写代码时不省略语句结尾分号

行的长度

作者推荐:将行的长度限定在80个字符,主要是防止编辑器出现横向滚动条,保证一屏展示所有代码

换行

当一行的长度超过最大限制,就需要手动换行,

作者推荐: 换行的位置应选在语句的运算符之后,同时下一行增加两级缩进.对于赋值语句,换行后下一行应与赋值符号保持对齐

//good
callAFunction(document, element, window, "some thing value", true,123,
        navigator)
//bad
callAFunction(document, element, window, "some thing value", true,123,
    navigator) //未缩进两个层级
//bad
callAFunction(document, element, window, "some thing value", true,123
        , navigator)//未在运算符之后换行
        
//good
const a = somethhing + anotherThing + yetAnotherThing + someThingElse +
          anotherThing //不用缩进两级,和赋值运算符对齐

空行

作者推荐: 将语义不相关的代码段通过空行进行分隔,语义相关的代码段之间不要有空行,如一下场景:

• 在方法之间
• 在方法中的局部变量和第一条语句之间
• 在多行和单行注释之前
• 在方法内的逻辑片段之间

在代码整洁之道一书中,Bob大叔在格式一章也推荐通过空行来暗示代码片段之间的关系

命名

作者推荐:使用小驼峰命名法即第一个单词首字母小写,之后的单词首字母都大写,在JS中进行命名

JavaScript的核心组成ECMAScript就是遵照的小驼峰命名法

变量和函数

• 变量命名前缀应该是名词,

• 函数命名前缀应该是动词

• 命名应尽可能的短小,并抓住要点.(个人看法: 以描述准确为第一位,之后尽量短小,实在抓不住要点还是老实的描述清楚的好)

• 尽量在变量名中体现出数据类型如: count,length,size,name,title,message

• 不要使用没有意义的命名: foo,bar,tmp,读者如果不联系上下文是很难明白需要表达的意思的

• 函数和方法名一些常见动词的约定

  动词	含义
  can	函数返回一个布尔值
  has	函数返回一个布尔值
  is	函数返回一个布尔值
  get	函数返回一个非布尔值
  set	函数用来保存一个值

常量

作者推荐: 使用全大写加下划线来表示常量,一眼就能看出这个是常量

const Max_COUNT = 1

构造函数

作者推荐:以大驼峰对构造函数命名,以便于将构造函数和普通函数区别出来

const me = Person('张三')
const you = getPerson('李四')

如果上述代码没有按照期望运行,我们检查时,可以一眼看出Person前面少了一个new运算符,因为可以一眼看出第一行是一个构造函数,构造函数实例化前面一定会有new

直接量

字符串

作者推荐:字符串使用双引号和单引号都可以,更重要的是从一而终

数字

由于JavaScript对八进制的支持并不好: 010并不代表10,而是8,

console.log(010); //8

虽然各种校验会给出警告,但依然不影响运行

作者推荐: 由于八进制在代码中几乎很少用到,最好的做法是在代码中禁止八进制直接量

Null

可以使用null的场景:

• 用来初始化一个可能赋值为对象的变量
• 用来和一个已经初始化的变量比较
• 当函数的参数期望是对象时,用作参数传入
• 当函数的返回值期望是对象时,用作返回值传出

不应当使用null

• 使用null来检测是否传入了某个参数
• 用null来检测一个未初始化的变量

//good
function getPerson(age){
    if(age < 0){
        return null
    }
    return new Person()
}
//good
var person = new Person()
if(person === null){}
​
//bad
function doSomething(arg1,arg2,arg3){
    if(arg1 !== null){
        ....
    }
}

理解null的最好方式: 把null当作对象的占位符

Undefined

var person;
console.log(typeof person)
console.log(typeof foo) //foo并未被定义

上述两行代码都会输出nudefined,奇怪的是一个是已经定义的变量,一个是还没有定义的变量,但运算结果都是undefined,这可能会引发一些问题: 在语句中使用foo会报错,使用person则不会,但使用typeof判断不出这个变量是否定义

作者推荐:禁止使用特殊值undefined,可以有效确保只有一种情况下typeof会返回undefined

同时unedined还有一个问题,被覆盖:

let undefined = true
var person;
console.log(person === undefined) //false

对象的直接量

直接使用对象字面量{}创建对象

使用对象字面量时,第一个左括号独占一行,之后每个属性独占一行并保持一个缩进,最后一个花括号也独占一行

数组直接量

与对象字面量相同,相比使用构造函数更推荐直接使用字面量定义数组