SAP UI5控件ID的生成逻辑原理解析

We know that when we create a new UI5 control instance, we can explicitly pass an id into constructor. In this case, developer takes responsibility to ensure the id is unique.

We can find the unique id in rendered page.

An alternative is we do not pass any id but let UI5 framework to automatically generate one.
Above code will have a button with id “__button0” generated.

Question: how can I find exactly location of code where UI5 does the trick?

Since I don’t know exactly where should I start to debug, I even do not know which js file I should start with.

As a result, I plan to manually bring some trouble to UI5 framework, so that it can raise some complain message in Chrome development tool console to give me some idea. So I write the following code. I assume line 11 will lead to some mistake due to the duplicate control id.

When I refresh the application, I see the expected error message in console. Ckick the third frame in callstack: Core.registerElement to view its source code:

Here below we can understand the UI5 framework logic how to detect duplicate control id:

(1) There is a central repository to store all registered control instance. See this.mElements in line 40711.
(2) in line 40700, scan against the central repository with the id of new control to be registered. If byId returns one, it means there is already existing control with the same id. Duplication detected!

So far we still do not know where id is generated. Type oElement.getId in console and the source code of this function is printed out. Then we know for every control instance, it has a property sId to store its ID.

Perform key word search within the same JS file where registerElement is implemented with keyword “.sId”, only 11 matches found.

Then we find a constructor function which looks like just what I am looking for. The logic of automatic ID generation if not explicitly specified is implemented between line 29062 and 29064. Set a breakpoint to verify our guess.

Write the following code in controller:

var myButton = new sap.ui.commons.Button({
   text: "press me~"
  });

In the runtime breakpoint is triggered.

The ID fragment, “button”, comes from this.getName() in line 33711.

UI5 framework internally maintains a counter as the postfix of each control id.

This is the reason why we can see lots of number postfix in every UI5 application:

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