JavaScript進階(三十六):如何拆解一個表達式(一)

這篇博客,我們繼續。

首先,別的我們不管,在這個組件第一次剛剛創建出來的時候,我們要不要做一個初始的渲染?肯定是要的。

所以,我們需要一開始的時候,就來調用一次 render,代表初始渲染:

然後接下來,我們的問題就變成了,這個 render 具體需要怎麼去做?

那麼我們可以先從一個簡單的開刀,比如,VText 需要怎麼去做?

事實上來說,這個 VText 我們要做的是什麼?

是不是需要把原始的文本 this._text 裏面的 {{ }} 給編譯掉?

如果 this._text = "a={{a}}",那麼我們是不是要把這個 {{a}} 找出來,並且編譯掉,這個我們前面的博客已經做過了。

然後反過來,我們可不可以這麼做?

this._dom 對應於我們那個真正的節點。

我要讓它的 data,就等於我現在的這個模板的文本,然後讓它去做一個編譯的過程。

這個編譯的過程也很簡單,就是 replace:

當然順便一說,我們一定得用 {{ }} 嗎?不一定,願意用什麼都行。

既然想要跟 vue 有所區分,以便於向大家證明,這個用什麼都行,那麼我希望在這個庫裏,我們以 [[ ]] 爲標準:

那麼這種情況下,VText 裏面也要跟着改:

那麼它裏面會有東西呢?

其實什麼都有可能:

但就是不太可能出現右方括號 ]。

但是事實真的如此嗎?

並不是的,我們有沒有可能加上 arr[0]:

所以這時候,不能說只要碰到這個 ] 就結束,那我們得怎麼辦呢?所以,我們就要搞的嚴格一點。

我們要涉及到一個問題,這個東西什麼時候就算結束呢?什麼時候碰到 2 個右方括號爲止 ]]。

但是這樣真的精確嗎?

 

在我們平常真正寫代碼的過程當中,有沒有可能碰到兩個方括號?

比方說,我們 data 裏面有 2 個這樣的數據:

那麼我可不可以這麼寫?

所以,在我們這,正常寫代碼的過程當中,有沒有可能碰到2個括號?

是有可能的,我們不能因爲碰到兩個右方括號,就提前結束了,那是不行的。

 

所以說這種情況下,我們應該怎麼辦呢,這個就很麻煩。

可能有人說,那你還是換回花括號 {{ }} 吧,它就沒那問題。

其實正常寫代碼,2 個右花括號 }} 也有可能出現,比如:

所以,這個不是我們換不換符號的問題,其實無論我們換成什麼符號,它理論上都應該有這種可能出現的情況。

比如就算我們換成 %%,這個應該沒人用吧?那麼如果我們加個字符串,也是一樣的:

理論上任何符號你都跑不掉,總要碰到問題的。

所以我們解決問題的辦法,並不是逃避,我們必須得想辦法必須把它給辦了,那怎麼辦呢?

這個時候,我們用正則就已經不能發揮作用了。

當然,正則理論上寫一大堆可以解決這個問題,但是我們可以用更好的方法。

 

首先,它一定是以 2 個左方括號 [[ 開頭的,這個你不能否認,絕對是。

其次,方括號是不是必須得成對出現?

那如果是這種寫法呢  arr0] ?這是錯的,就不能這麼寫。

正確的寫法當中,方括號一定是成對出現的  arr[0] 。

 

那麼這時候問題來了,既然是成對出現,我怎麼樣判斷它結束了?

首先,當我碰見 2 個左方括號 [[ 的時候,我標記爲起點:

相當於現在我手裏有一個 count,並且它的數量爲 2。

這個 count,代表左方括號 [ 出現過的次數是 2 次。

 

接下來,我們就從這裏往後走,然後到這,我們碰到一個:

怎麼辦?count + 1。

所以現在 count = 3。

 

然後我們繼續往下走,又碰到一個:

再 + 1,count = 4。

再往下,碰到一個反的,右方括號 ],怎麼辦?

減一,count = 3。

再走,又碰到一個反的:

繼續減一,count = 2。

再走,又碰到一個正的:

加一,count = 3。

再走,又碰到一個反的:

減一,count = 2。

然後最後 2 個反的:

減二,count = 0。

這時候,是不是我們要的東西就出來了。

說白了,碰到 2 個左方括號 [[ 開始,我就開始計數。

什麼時候這個數消耗完了等於 0,什麼時候我就認爲到頭了。

 

那有人要說了,如果我就是想加個字符串方括號連接進來呢?比如這樣:

那麼這時候,我們可不可以把上面的方法外延一下:

我們可以搞個 count2,它是用來計算我們碰到單引號的次數。

那如果用雙引號呢?那我們就在搞個 count3,用來計算碰到雙引號的次數。

 

那麼我們就直接從單引號這裏開始:

當我們碰到單引號的時候,那麼 count2 就有一個了,count2 = 1。

然後繼續往下走,但是注意,在這個 count2 減成 0 之前,你出現什麼我都不認。

爲什麼?因爲你是字符串啊,字符串裏面放什麼東西,關我啥事啊。

那麼當我又碰到了一個單引號的時候:

我們的 count2 就減成 0 了。

那麼這時候,我才恢復到繼續識別方括號的狀態下。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章