SAP成都研究院非典型程序猿，菜園子小哥：當(dāng)我用UI5診斷工具時(shí)我用些什么

身邊有些年輕同事曾經(jīng)向我表達(dá)過(guò)這種困擾：盡管完成日常工作沒(méi)有任何問(wèn)題，但是還想更進(jìn)一步，把代碼寫(xiě)得更好些，做到精益求精。現(xiàn)在寫(xiě)的代碼能實(shí)現(xiàn)功能，但是不知道可以怎樣寫(xiě)得更好。

除了閱讀優(yōu)秀的開(kāi)源庫(kù)開(kāi)源框架，一點(diǎn)一滴積累之外，Jerry的一個(gè)建議是大家可以多琢磨琢磨每天工作使用到的一些工具，研究下這些工具里自己感興趣的那些功能的實(shí)現(xiàn)原理。想一想這個(gè)功能如果讓自己實(shí)現(xiàn)，該怎樣去設(shè)計(jì)和編碼，琢磨完之后再去看工具的實(shí)現(xiàn)，和自己心中所想進(jìn)行比較。這樣一來(lái)，既學(xué)習(xí)了這些工作優(yōu)秀的設(shè)計(jì)和實(shí)現(xiàn)，又進(jìn)一步熟悉了工作本身，可以提高平時(shí)編碼和調(diào)試的效率，一舉兩得。

SAP的前端UI給大家提供了各式各樣的診斷工具，這些工具能方便大家調(diào)試，或是提供一些輔助技術(shù)信息，提高排錯(cuò)效率。

比如CRM WebClient UI的Ctrl+Alt+F2:

SAP Cloud for Customer的Ctrl+鼠標(biāo)左鍵：

以及SAP UI5的兩組診斷工具：

• Ctrl+Alt+Shift+P

• Ctrl+Alt+Shift+S

今天，就由SAP成都研究院的菜園子小哥王聰給大家聊聊他是如何專(zhuān)研第二組工具的。

和梁山好漢菜園子張青在大樹(shù)坡開(kāi)店之前的職業(yè)一樣，王聰?shù)囊淮髳?ài)好也是種菜。

據(jù)王聰?shù)睦习錗int介紹，王聰?shù)膹N藝也不錯(cuò)，喜歡烹飪。不過(guò)，各位單身妹紙們，遺憾的是，王聰已經(jīng)結(jié)婚了，如今是一位模范丈夫。

躬耕于田間之余，王聰也時(shí)常文藝一把。請(qǐng)通過(guò)下面的連接，欣賞王聰3分30秒的吉他演奏：《我的歌聲里》。

http://compaign.tudou.com/v/611489926.html?from=timeline&isappinstalled=0

試想一個(gè)春雨綿綿的午后，王聰置身于滿(mǎn)園蒼翠欲滴的田間，一人一吉他一臺(tái)筆記本電腦。吉他彈奏，電腦編程，這畫(huà)面太美，依稀有幾分陶淵明“采菊東籬下，悠然見(jiàn)南山”的風(fēng)雅。

王聰除了種菜之外，另一個(gè)技能就是德語(yǔ)。大家點(diǎn)擊這篇文章尾部的"閱讀原文", 就能看到這篇文章的英語(yǔ)和德語(yǔ)版本。Jerry是不懂德語(yǔ)的，所以也不知道文章里德語(yǔ)運(yùn)用的水平如何。不過(guò)Jerry認(rèn)識(shí)一位在德國(guó)SAP圈打拼了20多年的資深留德華，林峋博士。去年Jerry和林博士去Walldorf鎮(zhèn)上的商店買(mǎi)床墊，聽(tīng)他和賣(mài)床小妹德語(yǔ)對(duì)話(huà)那個(gè)流利，羨慕極了。好事的Jerry把王聰?shù)倪@篇文章給林博士過(guò)目，讓他幫忙品評(píng)下王聰?shù)牡抡Z(yǔ)水平，得到了林博士的贊譽(yù)。

王聰?shù)腟AP Community上的博客都是下面這種風(fēng)格的，這些是Jerry達(dá)不到的水平：

這就是王聰，一個(gè)能寫(xiě)代碼能種菜能玩音樂(lè)的非典型程序猿。下面是王聰?shù)恼摹?

大家好我是王聰，目前在SAP成都研究院Revenue Cloud團(tuán)隊(duì)負(fù)責(zé)話(huà)嘮和捧場(chǎng)王的角色。以前年輕的時(shí)候還喜歡攝攝影聽(tīng)聽(tīng)音樂(lè)啥的，可慢慢的我卻在通往"油膩中年"的路上漸行漸遠(yuǎn)，不再"面朝大海春暖花開(kāi)"，而開(kāi)始"關(guān)心糧食和蔬菜"。做飯和種菜成了我現(xiàn)在的愛(ài)好，我成了一個(gè)真正的"馬農(nóng)"(顛著大馬勺的農(nóng)民)。

前段時(shí)間承蒙汪主編賞臉約稿，讓我寫(xiě)一寫(xiě)工作中用到的一些工具。心中激動(dòng)之余沖入腦子的第一感覺(jué)就是標(biāo)題的這幾個(gè)大字。一般來(lái)說(shuō)拿審題后的第一印象當(dāng)題目總是有那么點(diǎn)不負(fù)責(zé)任，但想來(lái)村上春樹(shù)寫(xiě)出來(lái)的書(shū)名不也就是長(zhǎng)這個(gè)樣子，所以心中也就無(wú)所謂了。

以汪主編的風(fēng)格，在技術(shù)正餐之前總得來(lái)點(diǎn)三國(guó)水滸金庸古龍之類(lèi)的小零嘴先墊吧墊吧。今天我想談?wù)劦叮艺劦牟皇俏鋫b的刀，而是小巧現(xiàn)代的瑞士軍刀。

我人生中的第一把瑞士軍刀是我08年考上大學(xué)時(shí)我媽媽的一個(gè)同事阿姨送的。當(dāng)時(shí)她問(wèn)我報(bào)的什么專(zhuān)業(yè)，我怕“通信工程”在她們看來(lái)不太好理解，就索性說(shuō)自己是學(xué)“電腦”的。然后她就特地挑了一把有很多改錐的CyberTool系列的瑞士軍刀送給我，并真誠(chéng)的叮囑我好好學(xué)習(xí)，以后修電腦的時(shí)候一定用得到。這把刀伴隨了我很多年，卻在我之后的一次疏忽中易主給了機(jī)場(chǎng)的安檢大哥。再加上畢業(yè)之后我并沒(méi)有開(kāi)個(gè)小店修電腦，想來(lái)當(dāng)真辜負(fù)了阿姨的期冀。

之后我又有過(guò)一些其他的瑞士軍刀，但到頭來(lái)手里只剩一把Waiter系列的小刀。因?yàn)橛脕?lái)用去會(huì)發(fā)現(xiàn)很多花哨的功能幾乎永遠(yuǎn)都不會(huì)被用到。除了偶爾拿來(lái)開(kāi)瓶啤酒剔剔牙之外，只有那片鋒利好用的主刀才是我一次次把它摸出口袋的理由。

在去年初識(shí)UI5的時(shí)候我就被強(qiáng)大的UI5診斷工具震驚了，功能豐富簡(jiǎn)單易用隨喚隨出活好不粘人，簡(jiǎn)直是一把出色的瑞士軍刀。但慢慢的新鮮感褪去，于我來(lái)說(shuō)Control Tree模塊就是那片百用不膩的主刀。

Control Tree了解一下？

這里我們用一個(gè)簡(jiǎn)單的例子認(rèn)識(shí)一下Control Tree，在頁(yè)面上顯示一個(gè)sap.m.Text文本。通過(guò)Shift+Ctrl+Alt+S呼出UI5診斷工具，然后在Control Tree標(biāo)簽下我們可以清楚的看到整個(gè)頁(yè)面的控件樹(shù)形結(jié)構(gòu)，點(diǎn)擊Text節(jié)點(diǎn)，我們就可以看到如下行為：

• 相應(yīng)的屬性被展示出來(lái)，用戶(hù)可以動(dòng)態(tài)修改，也可在相應(yīng)屬性的Get/Set方法中加斷點(diǎn)——這邊打個(gè)勾，運(yùn)行時(shí)執(zhí)行到Get/Set方法后斷點(diǎn)就自動(dòng)觸發(fā)了，如此神奇。怎么做到的？這實(shí)際上是面向切片編程思想的一個(gè)應(yīng)用。細(xì)節(jié)參看汪主編博客：https://blogs.sap.com/2016/05/16/a-small-tip-i-learn-from-ui5-diagnostics-tool-a-practice-of-aop-programming/

• 可以在查看控件相關(guān)的綁定信息

• 可以在控件的所有方法中加斷點(diǎn) （原理同第一條后半段）

• 相應(yīng)控件被高亮一秒鐘

這里我們對(duì)其中的部分行為debug下去，看看其背后的邏輯。

屬性列表是哪來(lái)的？

首先我們通過(guò)萬(wàn)能的在EventProvider.js的229行加斷點(diǎn)方式定位到sap/ui/core/support/plugins/ControlTree.js文件，并找到目標(biāo)方法getControlProperties。眾所周知一切UI5控件都是派生自sap.ui.core.Element。而我們也注意到了這樣的一個(gè)while循環(huán)。而這也就解釋了為什么屬性列表會(huì)按照BaseType加以劃分，并會(huì)一直劃分到Element一層。

而在遍歷的過(guò)程中，每一個(gè)BaseType的各項(xiàng)屬性以及aggregation都被整理成方便后續(xù)渲染列表的格式。進(jìn)而在renderPropertiesTab方法中逐級(jí)渲染出DOM段落。

如何通過(guò)修改屬性列表中的值去修改控件的屬性？

我們?cè)趯傩粤斜懋?dāng)中可以直接去實(shí)時(shí)地修改某一項(xiàng)屬性，這又是如何做到的呢？想來(lái)這個(gè)過(guò)程最終一定是調(diào)用到了控件本身的set方法，我們就在sap.m.Text的setText方法中打一個(gè)斷點(diǎn)，然后在調(diào)用棧中向上追溯，發(fā)現(xiàn)了目標(biāo)方法onsapUiSupportControlTreeChangeProperty。原來(lái)是在控件的Metadata中存有各個(gè)屬性所對(duì)應(yīng)的Set方法的名稱(chēng)，在通過(guò)簡(jiǎn)單的校驗(yàn)之后用戶(hù)所輸入的值就通過(guò)setText方法被賦值進(jìn)去了。

雖然綠色的高亮很丑，但我想知道它是怎么來(lái)的？

我們繼續(xù)嘗試在EventProvider中尋求突破口。進(jìn)而定位到了Selector.js中的onsapUiSupportSelectorHighlight方法。在這里我們發(fā)現(xiàn)所謂的高亮其實(shí)并不是元素本身的行為，而是在元素上面覆蓋一層綠色的“遮罩”（div）。

綠色“遮罩”

然后會(huì)根據(jù)被高亮的控件的寬度高度來(lái)調(diào)整“遮罩”的大小，并將其顯示在控件的位置，以達(dá)到高亮的效果。

快速在Control Tree中定位元素

如果一個(gè)頁(yè)面非常復(fù)雜，想在其中靠層級(jí)結(jié)構(gòu)找到元素將變得困難。而Control Tree則提供了一個(gè)通過(guò)Ctrl+Alt+Shift+鼠標(biāo)點(diǎn)擊快速定位元素的功能，好用得讓人無(wú)法自拔。

這里我們可以看到當(dāng)UI5診斷工具處于打開(kāi)狀態(tài)時(shí)，mousedown事件的處理方法會(huì)增加一個(gè)，便是Selector的_fSelectHandler方法。而在這里將會(huì)判斷如果三個(gè)修飾鍵同時(shí)被按下，則幫助用戶(hù)在Control Tree中選中相應(yīng)的元素節(jié)點(diǎn)。

以上就是我對(duì)于UI5診斷工具中Control Tree模塊部分功能的理解。希望你也能和我一樣愛(ài)上這個(gè)工具。

更多閱讀

• Jerry和您聊聊Chrome開(kāi)發(fā)者工具

• 那些年我用過(guò)的SAP IDE

• Jerry的Fiori原創(chuàng)文章合集

• Jerry的UI5框架代碼自學(xué)教程

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼: