ABAP开发环境语法高亮的那些事儿

关于SAP ABAP开发环境，Jerry之前写过几篇公众号文章：

• 那些年我用过的SAP IDE
• 不喜欢SAP GUI？那试试用Eclipse进行ABAP开发吧
• 使用Visual Studio Code编写和激活ABAP代码

本文从另一个角度出发，单独聊聊ABAP开发环境里的语法高亮话题。

俗话说，佛靠金装，人靠衣装。咱们程序员虽然平日上班都穿千篇一律的职业装：

程序员专用的格子伞：

Jerry衣柜里最不缺这种衣服：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wqdWWCGr-1574928873302)(https://user-images.githubusercontent.com/5669954/69788724-103ab300-11fa-11ea-84d2-59dc3f64de8e.png)]

但幸好我们的开发环境还是能够进行各种个性化设置，所以虽然大家都穿着一样的格子衫，但面对的却是色彩各异的开发环境。比如SAPGUI的Options选项，给ABAP开发人员提供了种类丰富的ABAP编辑器UI元素风格的自定义设置，诸如背景色，关键字高亮颜色，注释高亮颜色，断点高亮颜色等等。

我们点了Save按钮后，这些个性化设置保存在本地某处。那么以ABAP编辑器为例，当我们用它来编写代码时，ABAP语言里的语法元素是如何根据不同的类型，进行对应的颜色高亮显示呢？

在SAPGUI设置选项里，进入Traces->Session Traces, 点击Enable按钮打开ABAP Editor的trace开关，回到ABAP编辑器，随便做一些操作，比如加一段注释，几个空格，激活代码之类。

然后打开生成的trace文件：
C:\Users<user name>\AppData\Local\SAP\SAP GUI\Traces\sapfewdll_01_0001_00_4272_2800.trc

能看到大段大段的CStyleCache::OnLinesChanged和CAbapFgLexer::InternalLexer这种C++里类的方法调用。

• 189行：InvalidateLineStyle - 准备重绘ABAP代码第43883行的语法高亮
• 190~191行：FindBeginOfStatement + FindEndOfStatement：找到这一行ABAP语句的起始和结束位置。
• 193行：synchronous syntactical analysis started - 开始同步模式的语法分析
• 195行：调用C++实现的编译器方法m_parser->run, 来完成ABAP语句的语法解析，总共花了89微秒。
• 196行：分析结束。
• 197行：根据编译器的分析结果，调用ISyncStyleCache::SetStylesSync进行对应元素的语法高亮显示。

从trace文件不难看出，这个ABAP语句语法分析和语法高亮渲染的同步过程会逐行处理语句，大家平时几乎感觉不到任何时延，是因为编辑的ABAP代码行数较少。

当Jerry在本地编辑ABAP git这个开源项目时，因为report源代码有将近五万行，所以当修改完代码激活之后，会感觉到长达好几秒钟的时延，在这几秒钟内，SAPGUI里的C++实现的编译器在忙碌地进行ABAP语句解析和语法高亮的工作。 在这些工作未完成之间，ABAP编辑器里将不会有语法高亮效果显示：​

如果不考虑cache的情况，在Jerry手上用的Thinkpad P50电脑上，假设按每行解析花费89微秒来计算，ABAP Git的语法高亮大概会消耗4秒钟的时间。

说完了SAPGUI，再来看看其他ABAP开发环境。虽然SAP WebIDE还不能做ABAP开发，但是在S/4HANA里，我们也能在浏览器里用ABAP编写Custom Logic了，并且支持语法高亮。

你也许会问，ABAP的语法高亮是如何在浏览器里显示的？自己动手，丰衣足食。

下面跟Jerry一起来通过调试的方式，自己找到问题的答案。

(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.

谜底就这样揭晓了。

至于其他工具，比如Visual Studio Code，Sublime Text之类，严格意义上讲不能算作ABAP的开发环境，只能看成是ABAP代码的查看工具，其ABAP语法高亮的实现，咱们下次再聊，感谢阅读。