成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

JS代碼在什么位置可以換行

chaos_G / 3277人閱讀

摘要：一行過(guò)長(zhǎng)的代碼會(huì)影響閱讀體驗(yàn)實(shí)際項(xiàng)目中，我們往往把過(guò)長(zhǎng)的代碼分成多行去寫(xiě)比如在中鏈經(jīng)常要分成多行寫(xiě)對(duì)此本人想到一個(gè)問(wèn)題就是中在什么地方換行是合法并且不破壞原有代碼邏輯的探究這個(gè)問(wèn)題過(guò)程中本人造了一個(gè)小玩具顧名思義它的作用就是在不破話代碼的邏

一行過(guò)長(zhǎng)的代碼會(huì)影響閱讀體驗(yàn). 實(shí)際項(xiàng)目中，我們往往把過(guò)長(zhǎng)的代碼分成多行去寫(xiě).
比如在js中, promise鏈經(jīng)常要分成多行寫(xiě). 對(duì)此本人想到一個(gè)問(wèn)題, 就是js中, 在什么地方換行是合法并且不破壞原有代碼邏輯的.

探究這個(gè)問(wèn)題過(guò)程中本人造了一個(gè)小玩具, breakline, 顧名思義, 它的作用就是在不破話代碼的邏輯的情況下把js代碼拆成多行. 項(xiàng)目地址：https://github.com/flowmemo/b...

我們接下來(lái)還是談?chuàng)Q行的問(wèn)題. 為了簡(jiǎn)單起見(jiàn), 本文不討論注釋中的換行符.

換行符的作用

在一般的語(yǔ)言中, 換行符一般是意味著一個(gè)statement1的結(jié)束, 分號(hào)也通常有這個(gè)作用. 但是js中換行符并沒(méi)有代表statement的結(jié)束的意思. 事實(shí)上在規(guī)范中, 換行符（規(guī)范中稱(chēng)為line terminator)在多數(shù)情況下和空格、tab的作用是一樣的, 是為了分隔token以及方便閱讀, 除了...

換行符在某些情況下會(huì)觸發(fā)自動(dòng)分號(hào)插入（Automatic Semicolon Insertioin, 以下簡(jiǎn)稱(chēng)ASI）

換行符本身是token的一部分, 比如在StringLiteral（單／雙引號(hào)字符串, 必須通過(guò)`來(lái)escape）, Template和TemplateSubstitutionTail(這兩個(gè)就是**包起來(lái)的字符串)中.

以下為ECMA－262 7.0(也就是ES7、ES2016)規(guī)范中相應(yīng)的描述：

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.

有了這些信息, 我們就應(yīng)該知道在什么情況下可以換行了：只要你的新加的換行符不在上述的兩個(gè)規(guī)則內(nèi)就行.

我們?cè)倮^續(xù)探究這兩個(gè)規(guī)則.

ASI

EMCA規(guī)范中有一部分專(zhuān)門(mén)講了ASI, 在http://www.ecma-international...

對(duì)于ASI這里就不展開(kāi)細(xì)講了, 這里只說(shuō)ASI和換行相關(guān)的部分.

Offending Token

一個(gè)情況是, 換行符后的token和之前的token一起進(jìn)行parse會(huì)出錯(cuò), 那么換行符后的token叫做offend token. Offend token前會(huì)自動(dòng)插入一個(gè)分號(hào).
舉例：

var foo
foo = 2

一共5個(gè)token, 按先后順序是var, foo, foo, =, 2. parser先解析了前兩個(gè)token, 很好, 沒(méi)錯(cuò), 然后接著parse下一個(gè)token foo, 出錯(cuò)了(因?yàn)闆](méi)有一個(gè)js語(yǔ)法中并沒(méi)有一條production包含var foo foo的形式). 于是ASI被觸發(fā), 在換行符和offend token間加了個(gè)分號(hào). var foo就被parse成了Variable Statement, 然后后面的foo = 2也被成功parse了2.

Restricted Production

Restricted production規(guī)定了觸發(fā)ASI的幾種特殊情況.

以下幾個(gè)位置出現(xiàn)換行符, 即使之后的token可以繼續(xù)被合法parse, 也會(huì)觸發(fā)ASI

后綴自增／自減運(yùn)算符之前

continue, break, return, throw, yield之后

arrow function的=>之前

所以我們要比盡量避免在上述位置加換行符（除非你知道自己是在做什么）.

Template和TemplateSubstitutionTail

這部分簡(jiǎn)而言之就是不要在表示字符串內(nèi)容的部分換行. 這個(gè)很好理解了.
需要注意的是對(duì)于有替換的部分, 也就是${}的花括號(hào)內(nèi)部,是可以當(dāng)作普通的expression換行的
也就是說(shuō)

var s = `hello ${person.name}!`
var s = `hello ${
  person
  .
  name
}!`

是相同的.

玩具：breakline

在探究這個(gè)過(guò)程中本人寫(xiě)了breakline. 這個(gè)工具的目的就是把你的js代碼拆成多行, 同時(shí)又不對(duì)代碼的功能和邏輯造成實(shí)質(zhì)的影響.

總結(jié)

在實(shí)際寫(xiě)代碼過(guò)程中, 符合普通人邏輯的“正常”的換行是沒(méi)有問(wèn)題的. 如果說(shuō)有需要注意的地方，也就是restricted production的第二條了, continue, break, return, throw, yield這幾個(gè)關(guān)鍵字以及=>后不要換行, 其他的地方換行的話...可以說(shuō)也沒(méi)什么美感了, 一般人不會(huì)那么干的.

注
[1] 關(guān)于statement和expression的區(qū)別, 可以參考http://www.2ality.com/2012/09...
[2] 實(shí)際上在foo ＝ 2后也自動(dòng)插入了一個(gè)分號(hào).

原文鏈接：https://flowmemo.github.io/20...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86394.html

相關(guān)文章

  • 通過(guò)li-canvas輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字、豎向文字繪制，自動(dòng)換行，保

    摘要：新增的是個(gè)強(qiáng)大的功能，估計(jì)大家平時(shí)都會(huì)用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會(huì)很亂，所以對(duì)常用的畫(huà)圖繪制文字保存功能進(jìn)行了封裝，目前還比較滿(mǎn)意，能夠快速完成繪圖任務(wù)，從容應(yīng)對(duì)需求變更，只需進(jìn)行簡(jiǎn)單配置即可。 Html5新增的canvas是個(gè)強(qiáng)大的功能， 估計(jì)大家平時(shí)都會(huì)用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會(huì)很亂，所以對(duì)canva...

    source 評(píng)論0 收藏0

  • 正則與JS中的正則

    摘要：注意本文將正則與中的正則分開(kāi)討論。正則零寬斷言更多參考各種語(yǔ)言對(duì)于正則不同支持參考單行模式與多行模式通過(guò)設(shè)置正則表達(dá)式后的修飾符可開(kāi)啟對(duì)應(yīng)的匹配模式單行模式和多行模式。 最近這段時(shí)間幫同學(xué)處理一些文檔， 涉及到一些結(jié)構(gòu)化文檔的工作大部分都得使用正則表達(dá)式， 之前對(duì)于正則的認(rèn)識(shí)大多來(lái)源于語(yǔ)言書(shū)上那幾頁(yè)的介紹， 自己也沒(méi)有用過(guò)幾次。這里將我之前感到模糊的概念作個(gè)整理。因?yàn)閷?duì)JS了解多點(diǎn)，所...

    firim 評(píng)論0 收藏0

  • 利用 javascript 實(shí)現(xiàn)富文本編輯器

    摘要：考察了下現(xiàn)有的富文本編輯器，桌面端的很多，移動(dòng)端的幾乎沒(méi)有。為此決定自研一個(gè)富文本編輯器。本文，主要介紹如何實(shí)現(xiàn)富文本編輯器，和解決一些不同瀏覽器和設(shè)備之間的。光標(biāo)操作作為富文本編輯器，開(kāi)發(fā)者需要有能力控制光標(biāo)的各種狀態(tài)信息，位置信息等。 利用 javascript 實(shí)現(xiàn)富文本編輯器 閱讀 994收藏 1482017-11-03原文鏈接：eux.baidu.com利用 javascri...

    cyixlq 評(píng)論0 收藏0

  • 利用 javascript 實(shí)現(xiàn)富文本編輯器

    摘要：考察了下現(xiàn)有的富文本編輯器，桌面端的很多，移動(dòng)端的幾乎沒(méi)有。為此決定自研一個(gè)富文本編輯器。本文，主要介紹如何實(shí)現(xiàn)富文本編輯器，和解決一些不同瀏覽器和設(shè)備之間的。光標(biāo)操作作為富文本編輯器，開(kāi)發(fā)者需要有能力控制光標(biāo)的各種狀態(tài)信息，位置信息等。 利用 javascript 實(shí)現(xiàn)富文本編輯器 閱讀 994收藏 1482017-11-03原文鏈接：eux.baidu.com利用 javascri...

    voidking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<