摘要：一行过长的代码会影响阅读体验实际项目中，我们往往把过长的代码分成多行去写比如在中链经常要分成多行写对此本人想到一个问题就是中在什么地方换行是合法并且不破坏原有代码逻辑的探究这个问题过程中本人造了一个小玩具顾名思义它的作用就是在不破话代码的逻
一行过长的代码会影响阅读体验. 实际项目中，我们往往把过长的代码分成多行去写.
比如在js中, promise链经常要分成多行写. 对此本人想到一个问题, 就是js中, 在什么地方换行是合法并且不破坏原有代码逻辑的.
探究这个问题过程中本人造了一个小玩具, breakline, 顾名思义, 它的作用就是在不破话代码的逻辑的情况下把js代码拆成多行. 项目地址：https://github.com/flowmemo/b...
我们接下来还是谈换行的问题. 为了简单起见, 本文不讨论注释中的换行符.
换行符的作用在一般的语言中, 换行符一般是意味着一个statement1的结束, 分号也通常有这个作用. 但是js中换行符并没有代表statement的结束的意思. 事实上在规范中, 换行符（规范中称为line terminator)在多数情况下和空格、tab的作用是一样的, 是为了分隔token以及方便阅读, 除了...
换行符在某些情况下会触发自动分号插入（Automatic Semicolon Insertioin, 以下简称ASI）
换行符本身是token的一部分, 比如在StringLiteral（单／双引号字符串, 必须通过`来escape）, Template和TemplateSubstitutionTail(这两个就是**包起来的字符串)中.
以下为ECMA－262 7.0(也就是ES7、ES2016)规范中相应的描述：
A line terminator cannot occur within any token except a StringLiteral, Template, or TemplateSubstitutionTail. Line terminators may only occur within a StringLiteral token as part of a LineContinuation.
有了这些信息, 我们就应该知道在什么情况下可以换行了：只要你的新加的换行符不在上述的两个规则内就行.
我们再继续探究这两个规则.
ASIEMCA规范中有一部分专门讲了ASI, 在http://www.ecma-international...
对于ASI这里就不展开细讲了, 这里只说ASI和换行相关的部分.
Offending Token一个情况是, 换行符后的token和之前的token一起进行parse会出错, 那么换行符后的token叫做offend token. Offend token前会自动插入一个分号.
举例：
var foo foo = 2
一共5个token, 按先后顺序是var, foo, foo, =, 2. parser先解析了前两个token, 很好, 没错, 然后接着parse下一个token foo, 出错了(因为没有一个js语法中并没有一条production包含var foo foo的形式). 于是ASI被触发, 在换行符和offend token间加了个分号. var foo就被parse成了Variable Statement, 然后后面的foo = 2也被成功parse了2.
Restricted ProductionRestricted production规定了触发ASI的几种特殊情况.
以下几个位置出现换行符, 即使之后的token可以继续被合法parse, 也会触发ASI
后缀自增／自减运算符之前
continue, break, return, throw, yield之后
arrow function的=>之前
所以我们要比尽量避免在上述位置加换行符（除非你知道自己是在做什么）.
Template和TemplateSubstitutionTail这部分简而言之就是不要在表示字符串内容的部分换行. 这个很好理解了.
需要注意的是对于有替换的部分, 也就是${}的花括号内部,是可以当作普通的expression换行的
也就是说
var s = `hello ${person.name}!`
var s = `hello ${
person
.
name
}!`
是相同的.
玩具：breakline在探究这个过程中本人写了breakline. 这个工具的目的就是把你的js代码拆成多行, 同时又不对代码的功能和逻辑造成实质的影响.
总结在实际写代码过程中, 符合普通人逻辑的“正常”的换行是没有问题的. 如果说有需要注意的地方，也就是restricted production的第二条了, continue, break, return, throw, yield这几个关键字以及=>后不要换行, 其他的地方换行的话...可以说也没什么美感了, 一般人不会那么干的.
注
[1] 关于statement和expression的区别, 可以参考http://www.2ality.com/2012/09...
[2] 实际上在foo ＝ 2后也自动插入了一个分号.
原文链接：https://flowmemo.github.io/20...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86394.html
摘要：新增的是个强大的功能，估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对常用的画图绘制文字保存功能进行了封装，目前还比较满意，能够快速完成绘图任务，从容应对需求变更，只需进行简单配置即可。 Html5新增的canvas是个强大的功能， 估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对canva...
摘要：考察了下现有的富文本编辑器，桌面端的很多，移动端的几乎没有。为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的。光标操作作为富文本编辑器，开发者需要有能力控制光标的各种状态信息，位置信息等。 利用 javascript 实现富文本编辑器 阅读 994收藏 1482017-11-03原文链接：eux.baidu.com利用 javascri...
摘要：考察了下现有的富文本编辑器，桌面端的很多，移动端的几乎没有。为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的。光标操作作为富文本编辑器，开发者需要有能力控制光标的各种状态信息，位置信息等。 利用 javascript 实现富文本编辑器 阅读 994收藏 1482017-11-03原文链接：eux.baidu.com利用 javascri...
阅读 1612·2021-10-09 09:44
阅读 2702·2021-10-08 10:04
阅读 2439·2021-09-26 09:55
阅读 3789·2021-09-22 10:02
阅读 3259·2019-08-29 17:08
阅读 1045·2019-08-29 15:08
阅读 2932·2019-08-26 13:52
阅读 3253·2019-08-26 13:34
