ABAP的文法高亮是如何在浏覽器裡顯示的

在S/4HANA裡，我們現在能在浏覽器裡寫ABAP了，并且支援文法高亮。

你也許會問，ABAP的文法高亮是如何在浏覽器裡顯示的？下面跟我一起來通過調試的方式自己找到問題的答案。

(1). 在浏覽器裡敲個ABAP的關鍵字，比如data。發現被高亮了。通過Chrome開發工具發現高亮是通過一個叫ace_keyword的css類實作的。

在Chrome開發工具裡以關鍵字".ace_keyword"搜尋: 發現這個css類是寫死在theme-sap-cumulus.js裡的。

(2). 現在需要找到浏覽器裡進行ABAP代碼編輯的編輯器的實作。在Chrome開發工具裡Network tab裡輸入“.xml”作為過濾條件，于是找到編輯器的Fiori實作: Editor.view.xml

具體的編輯器是實作在命名空間reuse的ABAPWrapper标簽裡。

根據這個命名空間找到實作ABAP編輯器的UI5應用，如下圖: nw_aps_ext_lib.

打開ABAPWrapper-dbg.js, 在第68行設定斷點。這個函數負責從ABAP背景取PAD檔案，該檔案和文法高亮有關。

重新整理ABAP編輯器頁面，斷點觸發，在調試器裡觀察PAD檔案的内容:

所有的ABAP關鍵字都列在該PAD檔案裡，這樣UI5就知道編輯器裡哪些字元串應該做高亮顯示。

(3). 最後一個問題就是，比如當我敲了一個ABAP關鍵字"new"之後，UI5應用具體哪行代碼将對應的css類加到這個字元串對應的DOM節點上？

如下圖，一旦我敲了一個字元w之後，字元串new作為一個關鍵字需要被高亮：

具體邏輯如下圖：一旦敲入字元"w"後，onInput作為事件處理函數觸發:

函數$renderLine負責生成對應的HTML源代碼。輸入字元"new"被傳入函數getLineTokens來計算該字元串是關鍵字還是普通變量。

在檔案AceRndTokenizer.js裡, ABAP解析器按照我們期望的将“new”解析成關鍵字，因為解析器擁有PAD檔案的引用，是以它知道哪些字元串是關鍵字，哪些是普通變量。

(4). DOM節點的源代碼在此處生成，"ace"和“keyword"做連接配接操作，生成最後我們在Chrome開發工具裡看到的完整css類ace_keyword.

謎底就這樣揭曉了。

要擷取更多Jerry的原創技術文章，請關注公衆号"汪子熙"或者掃描下面二維碼: