SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子

We know that UI5 framework provides a convenient Diagnostics tool for application developer to set breakpoint on a given method of control class. The Diagnostics tool could be launched via Ctrl+Alt+Shift+S.

We can select the control and its methods where we would like to set breakpoint. Once we click “Add breakpoint” button, next time if the corresponding method is called, the breakpoint would be triggered, without application developers’ manual set in Chrome development tool any more.

SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子_第1张图片

It looks like a magic? Today my colleague asked me how this feature is implemented, so I have a look at UI5 framework source code.
We can again simply use Chrome development tool for research.

For example I would like to set breakpoint on method _bindAggregation:

Here the AOP idea is used.

SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子_第2张图片

The hook implementation is simply returning a new function via closure within which the original method is called ( line 521 ) with the new feature injected via keyword debugger.

SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子_第3张图片

After the logic is understood, we can practice in our application code.

Suppose I would like to have my button press event handler supported by this mechanism, I can simply write the following pseudo code:

var myButton = new sap.ui.commons.Button("btn",{
   text: "press me~"
  });
var handler = function(oEvent){
   oController.onPress(oEvent);
};
handler = bDebugModeActivated? util.tool.methodHook(handler): handler;
myButton.attachPress(handler);

In the runtime, once I press the button, debugger will be triggered with the following callstack:

SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子_第4张图片

Just step into line 36:

SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子_第5张图片

and then our event handler could be debugged:

SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子_第6张图片

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

你可能感兴趣的:(sap,saprfc,abap,erp,crm)