且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

《编写可维护的JavaScript》——1.4 换行

更新时间:2022-10-12 20:25:25

本节书摘来自异步社区《编写可维护的JavaScript》一书中的第1章,第1.4节,作者: 【美】Nicholas C. Zakas 译者: 李晶 , 郭凯 , 张散集 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 换行

当一行长度达到了单行最大字符数限制时,就需要手动将一行拆成两行。通常我们会在运算符后换行,下一行会增加两个层级的缩进。比如(假定缩进为4个字符)下面这样。

// 好的做法:在运算符后换行,第二行追加两个缩进
callAFunction(document, element, window, "some string value", true, 123,
          navigator);
// 不好的做法:第二行只有一个缩进
callAFunction(document, element, window, "some string value", true, 123,
     navigator);
// 不好的做法:在运算符之前换行了
callAFunction(document, element, window, "some string value", true, 123
        , navigator);

在这个例子中,逗号是一个运算符,应当作为前一行的行尾。这个换行位置非常重要,因为ASI机制会在某些场景下在行结束的位置插入分号。总是将一个运算符置于行尾,ASI就不会自作主张地插入分号,也就避免了错误的发生。

对于语句来说,同样也可以应用下面这种换行规则。

if (isLeapYear && isFebruary && day == 29 && itsYourBirthday &&
          noPlans) {
     waitAnotherFourYears();
}

在这段代码中,if条件语句被拆分成了两行,断行在&&运算符之后。需要注意的是,if语句的主体部分依然是一个缩进,这样更容易阅读。

这个规则有一个例外:当给变量赋值时,第二行的位置应当和赋值运算符的位置保持对齐。比如:

var result = something + anotherThing + yetAnotherThing + somethingElse +
               anotherSomethingElse;

这段代码里,变量anotherSomethingElse和首行的something保持左对齐,确保代码的可读性,并能一眼看清楚折行文本的上下文。