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.

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.

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.

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:

Just step into line 36:

and then our event handler could be debugged: