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:
- docker学习(4) 一些常用操作
- Java多线程之细说线程池
- Windows8异步编程的注意事项
- Spring(一)Spring的第一滴血
- Flume(一)Flume原理解析
- 我所理解的Remoting (2) :远程对象的生命周期管理[下篇]
- struts2(六)之ognl表达式与ActionContext、ValueStack
- Windows8异步编程的注意事项
- CSS魔法堂:深入理解line-height和vertical-align
- Gradle 10分钟上手指南
- gradle项目中profile的实现
- 欧盟推出“数字经济税收制度”优化了税收制度,却影响区块链行业
- CSS魔法堂:你一定误解过的Normal flow
- ASP.NET输出JSON格式数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法