国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

chaos_G / 3214人閱讀

摘要：一行過長的代碼會影響閱讀體驗實際項目中，我們往往把過長的代碼分成多行去寫比如在中鏈經常要分成多行寫對此本人想到一個問題就是中在什么地方換行是合法并且不破壞原有代碼邏輯的探究這個問題過程中本人造了一個小玩具顧名思義它的作用就是在不破話代碼的邏

一行過長的代碼會影響閱讀體驗. 實際項目中，我們往往把過長的代碼分成多行去寫.
比如在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.

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

我們再繼續探究這兩個規則.

ASI

EMCA規范中有一部分專門講了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 Production

Restricted 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代碼拆成多行, 同時又不對代碼的功能和邏輯造成實質的影響.

總結

在實際寫代碼過程中, 符合普通人邏輯的“正?！钡膿Q行是沒有問題的. 如果說有需要注意的地方，也就是restricted production的第二條了, continue, break, return, throw, yield這幾個關鍵字以及=>后不要換行, 其他的地方換行的話...可以說也沒什么美感了, 一般人不會那么干的.

注
[1] 關于statement和expression的區別, 可以參考http://www.2ality.com/2012/09...
[2] 實際上在foo ＝ 2后也自動插入了一個分號.

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86394.html

相關文章

  • 通過li-canvas輕松實現單圖、多圖、圓角圖繪制，單行文字、多行文字、豎向文字繪制，自動換行，保

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

    source 評論0 收藏0

  • 正則與JS中的正則

    摘要：注意本文將正則與中的正則分開討論。正則零寬斷言更多參考各種語言對于正則不同支持參考單行模式與多行模式通過設置正則表達式后的修飾符可開啟對應的匹配模式單行模式和多行模式。 最近這段時間幫同學處理一些文檔， 涉及到一些結構化文檔的工作大部分都得使用正則表達式， 之前對于正則的認識大多來源于語言書上那幾頁的介紹， 自己也沒有用過幾次。這里將我之前感到模糊的概念作個整理。因為對JS了解多點，所...

    firim 評論0 收藏0

  • 利用 javascript 實現富文本編輯器

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

    cyixlq 評論0 收藏0

  • 利用 javascript 實現富文本編輯器

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

    voidking 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<