SAP成都研究院非典型程序员菜园子哥：我用UI5诊断工具用什么？我也想更进一步，把代码写的更好，精益求精。现在写的代码可以实现功能，但是不知道怎么写比较好。除了阅读优秀的开源库和开源框架，一点一滴的积累，Jerry的一个建议是，你可以多思考一下你日常工作中使用的一些工具，研究一下你感兴趣的功能的实现原理在这些工具中。如果允许自己实现，请考虑如何设计和编码此功能。想完了再去工具的实现上和自己想的比较一下。这样，既学习了这些工作的优秀设计和实现，又进一步熟悉了工作本身，可以提高平时编码和调试的效率，一举两得。SAP的前端UI为您提供了多种诊断工具，可以方便调试或者提供一些辅助技术信息，提高排错效率。比如CRMWebClientUI的Ctrl+Alt+F2：SAPCloudforCustomer的Ctrl+鼠标左键：以及SAPUI5的两套诊断工具：Ctrl+Alt+Shift+PCtrl+Alt+Shift+S今天，它由SAP成都调研的院里菜园小哥王聪，给大家讲讲他是如何专精第二组工具的。和在大树坡开店之前打过工的梁山菜园男主角张清一样，王聪的一大爱好就是种菜。据王聪的老板薄荷介绍，王聪还擅长做饭，喜欢下厨。不过，女士们先生们，可惜的是，王聪结婚了，现在是模范丈夫。除了下地干活，王聪还经常从事文艺工作。请点击以下链接欣赏王聪3分30秒的吉他演奏：《我的歌声里》。http://compaign.tudou.com/v/6...想象一个春雨的午后，王聪在满是花园的绿色田野里，一个人，一把吉他，一台笔记本电脑。吉他弹奏，电脑编程，这画面太美了，有点陶渊明“采菊东篱下，闲看南山”的风采。除了种菜，王聪的另一项技能是德语。点击文末“阅读原文”可查看本文英文版和德文版。杰瑞不懂德语，所以他不知道文章中使用的德语水平。不过，Jerry认识了在德国SAP界打拼了20多年的前辈刘德华林寻博士。去年，杰瑞和林博士去沃尔多夫的商店购买床垫。听着他流利的德语和卖床的对话，我很是羡慕。好在Jerry把王聪的这篇文章拿给林博士看，让林博士帮忙评价一下王聪的德语水平，得到了林博士的表扬。王聪的SAPCommunity上的博客都是下面这种风格，Jerry望尘莫及：这就是王聪，一个会写代码、会种菜、会玩音乐的非典型程序员。以下为王聪正文。*大家好，我是王聪，目前在SAP成都研究院RevenueCloud团队负责话唠和拉拉队。年轻时喜欢拍照，喜欢听音乐，但渐渐地在“油腻中年”的道路上渐行渐远。五谷杂菜”。现在做饭、种菜成了我的爱好，我成了名副其实的“马农”（拿着大马勺的农民）。前段时间，有幸被王总编辑邀请到写写工作中用到的一些工具，激动之余第一个冲进脑海的感觉就是标题中的大字。title，不过我觉得村上春树写的书的书名是这样的，所以我不在乎。以王主编的风格，在技术晚宴之前，一定要有一些小点心，比如三国水浒、金庸、古龙。今天想说说刀，但我说的不是武侠刀，而是小巧现代的瑞士军刀。我人生中的第一把瑞士军刀是给的2008年我考上大学时，我妈妈的一位同事和阿姨问我，当时她问我报的是什么专业。我怕“通信工程”他们不容易看懂，干脆说我是学“计算机”的。然后她特意挑了一把Cyber??Tool系列的瑞士军刀和很多螺丝刀送给了我，并诚恳地叮嘱我要好好学习，以后修电脑一定会用到。这把刀在我身边很多年了，但在后来的一次疏忽中，转手交给了机场的保安。另外毕业后也没有开小店修电脑。我想我真的辜负了阿姨的期望。从那以后，我还拥有其他几把瑞士军刀，但最后我得到了一把维特小折刀。因为如果你使用它，你会发现很多花哨的功能几乎都不会用到。除了偶尔打开一瓶啤酒剔牙，锋利好用的主刀是我一次又一次从口袋里拿出来的唯一原因。去年第一次接触UI5的时候，就被强大的UI5诊断工具给震撼到了。功能丰富，简单易用，易上手，好用。它不粘。这是一把出色的瑞士军刀。但是新鲜感慢慢消退，而对于我来说，ControlTree模块才是百看不厌的主刀。控制树的理解？这里我们通过一个简单的例子来认识一下ControlTree，在页面上显示一个sap.m.Text文本。通过Shift+Ctrl+Alt+S呼出UI5诊断工具，然后在ControlTree选项卡下，我们可以清楚的看到整个页面的控件树结构。点击Text节点，我们可以看到如下行为：对应的属性显示出来后，用户可以动态修改，或者在对应属性的Get/Set方法中加断点——勾选这里，然后运行时执行Get/Set方法后会自动触发断点，好神奇。你是怎么做到的？这其实就是面向切片编程思想的一个应用。详细可以参考王总编的博客：https://blogs.sap.com/2016/05...可以查看控件相关的绑定信息，在控件的所有方法中添加断点（原理同第一篇后半部分）对应的控件高亮一秒。在这里，我们将调试一些行为以查看其背后的逻辑。属性列表从何而来？首先我们通过在EventProvider.js的229行加断点通用的方法定位到sap/ui/core/support/plugins/ControlTree.js文件，找到目标方法getControlProperties。众所周知，所有的UI5控件都是从sap.ui.core.Element衍生出来的。而我们也注意到了这样一个while循环。而这也解释了为什么属性列表会按照BaseType来划分，会划分到Element层级。在遍历的过程中，将各个BaseType的属性和聚合组织成一种格式，方便后续渲染列表。然后，在renderPropertiesTab方法中逐步渲染DOM段落。如何通过修改属性列表中的值来修改控件的属性？我们可以直接在属性列表中实时修改某个属性，这是怎么做到的呢？想到这个过程最终一定要调用控件本身的set方法，所以我们在sap.m.Text的setText方法中设置断点，然后在调用栈中向上追查，找到了目标方法onsapUiSupportControlTreeChangeProperty。原来控件的Metadata中保存了每个属性对应的Set方法的名称，用户输入的值经过简单的校验后通过setText方法赋值。虽然绿色高光很难看，但我想知道它是怎么来的？我们继续尝试在EventProvider上寻找突破口。然后找到Selector.js中的onsapUiSupportSelectorHighlight方法。这里我们发现，所谓的高亮其实并不是元素本身的行为，而是覆盖在元素上的绿色“遮罩”（div）。绿色的“遮罩”随后会根据高亮控件的宽高调整“遮罩”的大小，显示在控件的位置，达到高亮效果。快速定位控件树中的元素如果一个页面非常复杂，通过层级结构在其中查找元素将变得困难。并且ControlTree提供了通过Ctrl+Alt+Shift+鼠标点击快速定位元素的功能，简单易用，让人无法自拔。这里我们可以看到当开启UI5诊断工具时，会增加一个mousedown事件处理方法，也就是Selector的_fSelectHandler方法。而这里会判断如果三个修改键同时按下，会帮助用户在ControlTree中选中相应的元素节点。以上是我对UI5诊断工具中ControlTree模块部分功能的理解。我希望您会像我一样爱上这个工具。阅读更多Jerry会和你聊聊我那些年使用的Chrome开发者工具。SAPIDEJerry'sFiori原创文章合集Jerry'sUI5框架代码自学教程更多Jerry原创技术文章，请关注公众号“王子熙”
