专栏首页Jerry的SAP技术分享ABAP的语法高亮是如何在浏览器里显示的

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.

谜底就这样揭晓了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 程序员做前端好还是做后台好?

    从事嵌入式开发多年,最近在做后台相关相关的开发,现在很多程序员在学校或者入行之前都会考虑是选择前端开发还后台研发,很多女生或者基础不是很好的学生一般会选择前端开...

    程序员互动联盟
  • 2-5 浅析webpack打包内容

    Hash:本次打包的一个标识。 Version:使用的webpack版本 Time:本次打包耗时 Built at: 生成时间

    love丁酥酥
  • 爬虫高手必须了解的10个爬虫工具

    工欲善其事必先利其器的道理相信大家都懂。而作为经常要和各大网站做拉锯战的爬虫工程师们,则更需要利用利用好身边的一切法器,以便更快的攻破对方防线。今天我就以日常爬...

    叫我龙总
  • ES10新特性(二)

    此更新修复了字符 U+D800 到 U+DFFF 的处理,有时可以进入 JSON 字符串。 这可能是一个问题,因为 JSON.stringify 可能会将这些数...

    ConardLi
  • Node.js 究竟是什么?

    Node.js 是一个 JavaScript 运行时环境。听起来还不错,不过这究竟意味着什么?它又是如何运作的?

    疯狂的技术宅
  • 一个函数让你看懂 'Why 0.1+0.2!=0.3'

    由于 JavaScript中没有将小数的 二进制转换成 十进制的方法,于是手动实现了一个。

    ConardLi
  • ES10新特性(一)

    BigInt 是一个任意精度的整数。这意味着变量现在可以 表示²⁵³ 数字,而不仅仅是9007199254740992。

    ConardLi
  • 【30秒一个知识点】Adapter(二)

    使用 Array.prototype.map()将 transforms应用于 args,并结合扩展运算符( …)将转换后的参数传递给 fn。

    ConardLi
  • 3-1 Loader是什么

    前面说过,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),我们也看到了webpack对js文件的打包...

    love丁酥酥
  • JavaScript中的类型判断

    类型判断在 web 开发中有非常广泛的应用,简单的有判断数字还是字符串,进阶一点的有判断数组还是对象,再进阶一点的有判断日期、正则、错误类型,再再进阶一点还有比...

    ConardLi

扫码关注云+社区

领取腾讯云代金券