ABAP的語法高亮是如何在瀏覽器裏顯示的

這篇文章的原文我發表在SAP官方社區上：https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-webide-launched-via-browser/

在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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: