一、為什么要使用到編譯器前端技術?

跨平臺模板需要根據不同的規則得到不同的展示結果,這就需要對數據進行運算。

一開始是考慮使用一門腳本語言來實現數據的運算,如javascript通過嵌入的js引擎如QuickJS來執行JS腳本語言達到數據運算的結果。

但考慮到運算表達式的要求沒有那么復雜,加之以前對編譯器前端技術的了解也沒有一個合適的場景去落地。剛好有這么一個契機,就打算自己實現一個DSL來運算模板中的動態數據。

二、思路與原理

實現一個DSL有幾個步驟:

第一步: 詞法分析

第二步: 語法分析

第三步: 語義分析

在詞法分析的時候,需要用到一種叫 有限自動機 的一個計算機模型。

它通過在不同狀態之間的遷移變換分析我們給定的字符串中的詞語(Token),將字符串按我們指定的規則切分成多個Token。

詞法分析完成之后,開始進行語法分析。與詞法分析一樣,按我們指定的規則將一個或多個Token組合在一起形成一個一個的表達式。

比如加減乘除表達未,比較表達未,三目運算表達式。通過指定運算符之前的優先級與左右結合優先級,最后生成一個樹,我們叫它抽象語法樹(AST). 通過對AST進行深度優先遍歷,得到最終表達式的結果。

當前的DSL并不是一個完整的腳本語言,我們按需要實現特定的運算功能即可。、

有了這些表達式,我們就可以實現數據的動態計算綁定,但這還不夠。最基礎的版本至少還需要實現類似vue或者微信小程序中的for與if語句。

最終我們將呈現如下的DSL模板語言:

<View>
  <Label id="label1" text="{{ a * b > 100 ? "a * b比100大" : "a * b比100小"  }}">class="hljs-keyword"Label>
  <Label id="label2" if="{{ a > b }}">class="hljs-keyword"Label>
  <Label id="label3" for="item in items" text="item.name">class="hljs-keyword"Label>
class="hljs-keyword"View>

通過這個布局模板我們要得到什么樣的結果呢？

1.label1 標簽中的text運算得到最終顯示的結果,而a 與 b則是我們上下文中給定的變量或者是字典中的key

2.label2 通過計算if中的表達式得到此Label是否需要顯示

3.label3 則通過循環items得到多個標簽

通過自定義DSL我們可以按我們自己的指定的規則來計算出想要的各種表達式了。

接下來，我們就從第一步詞法分析開始吧。