前段時間承蒙汪主編賞臉約稿，讓寫一寫UI5診斷工具中我自己感興趣的功能。心中激動之余沖入腦子的第一感覺就是標題的這幾個大字。一般來說拿審題后的第一印象當題目總是有那么點不負責(zé)任，但想來村上春樹寫出來的書名不也就是長這個樣子，所以心中也就無所謂了。
以汪主編的風(fēng)格，在技術(shù)正餐之前總得來點三國水滸金庸古龍之類的小零嘴先墊吧墊吧。今天我想談?wù)劦?，但我談的不是武俠的刀，而是小巧現(xiàn)代的瑞士軍刀。
我人生中的第一把瑞士軍刀是我08年考上大學(xué)的時候我媽媽的一個同事阿姨送的。當時她問我報的什么專業(yè)，我怕“通信工程”在她們看來不太好理解，就索性說自己是學(xué)“電腦”的。然后她就特地挑了一把有很多改錐的CyberTool系列的瑞士軍刀送給我，并真誠的叮囑我好好學(xué)習(xí)，以后修電腦的時候一定用得到。這把刀伴隨了我很多年，卻在我之后的一次疏忽中易主給了機場的安檢大哥。再加上畢業(yè)之后我并沒有開個小店修電腦，想來當真辜負了阿姨的期冀。
之后我又有過一些其他的瑞士軍刀，但到頭來手里只剩一把Waiter系列的小刀。因為用來用去會發(fā)現(xiàn)很多花哨的功能幾乎永遠都不會被用到。除了偶爾拿來開瓶啤酒剔剔牙之外，只有那片鋒利好用的主刀才是我一次次把它摸出口袋的理由。
在去年初識UI5的時候我就被強大的UI5診斷工具震驚了，功能豐富簡單易用隨喚隨出活好不粘人，簡直是一把出色的瑞士軍刀。但慢慢的新鮮感褪去，于我來說Control Tree模塊就是那片百用不膩的主刀。
Control Tree了解一下？
這里我們用一個簡單的例子認識一下Control Tree，在頁面上顯示一個sap.m.Text文本。通過Shift+Ctrl+Alt+s呼出UI5診斷工具，然后再Control Tree標簽下我們可以清楚的看到整個頁面的控件樹形結(jié)構(gòu)，點擊Text節(jié)點，我們就可以看到如下行為：
- 相應(yīng)的屬性被展示出來，用戶可以動態(tài)修改，也可在相應(yīng)屬性的Get/Set方法中加斷點（這邊打個勾斷點就加進去了，怎么做到的？參看汪主編博客：https://blogs.sap.com/2016/05/16/a-small-tip-i-learn-from-ui5-diagnostics-tool-a-practice-of-aop-programming/）
- 可以在查看控件相關(guān)的綁定信息
- 可以在控件的所有方法中加斷點 （原理同第一條后半段）
- 相應(yīng)控件被高亮一秒鐘
這里我們對其中的部分行為debug下去，看看其背后的邏輯。
屬性列表是哪來的？
首先我們通過萬能的在EventProvider.js的229行加斷點方式定位到sap/ui/core/support/plugins/ControlTree.js文件，并找到目標方法getControlProperties。眾所周知一切UI5控件都是派生自sap.ui.core.Element。而我們也注意到了這樣的一個while循環(huán)。而這也就解釋了為什么屬性列表會按照BaseType加以劃分，并會一直劃分到Element一層。
而在遍歷的過程中，每一個BaseType的各項屬性以及aggregation都被整理成方便后續(xù)渲染列表的格式。進而在renderPropertiesTab方法中逐級渲染出DOM段落。
如何通過修改屬性列表中的值去修改控件的屬性？
我們在屬性列表當中可以直接去實時地修改某一項屬性，這又是如何做到的呢？想來這個過程最終一定是調(diào)用到了控件本身的set方法，我們就在sap.m.Text的setText方法中打一個斷點，然后在調(diào)用棧中向上追溯，發(fā)現(xiàn)了目標方法onsapUiSupportControlTreeChangeProperty。原來是在控件的Metadata中存有各個屬性所對應(yīng)的Set方法的名稱，在通過簡單的校驗之后用戶所輸入的值就通過setText方法被賦值進去了。
雖然綠色的高亮很丑，但我想知道它是怎么來的
我們繼續(xù)嘗試在EventProvider中尋求突破口。進而定位到了Selector.js中的onsapUiSupportSelectorHighlight方法。在這里我們發(fā)現(xiàn)所謂的高亮其實并不是元素本身的行為，而是在元素上面覆蓋一層綠色的“遮罩”（div）。
然后會根據(jù)被高亮的控件的寬度高度來調(diào)整“遮罩”的大小，并將其顯示在控件的位置，以達到高亮的效果。
快速在Control Tree中定位元素
如果一個頁面非常復(fù)雜，想在其中靠層級結(jié)構(gòu)找到元素將變得困難。而Control Tree則提供了一個通過Ctrl+Alt+Shift+鼠標點擊快速定位元素的功能，好用得讓人無法自拔。
這里我們可以看到當UI5診斷工具處于打開狀態(tài)時，mousedown事件的處理方法會增加一個，便是Selector的_fSelectHandler方法。而在這里將會判斷如果三個修飾鍵同時被按下，則幫助用戶在Control Tree中選中相應(yīng)的元素節(jié)點。
以上就是我對于UI5診斷工具中Control Tree模塊部分功能的理解。希望你也能和我一樣愛上這個工具。
