SAP UI5 应用的 Component.js 文件是如何在运行时被加载的?

简介: SAP UI5 应用的 Component.js 文件是如何在运行时被加载的?

提问

请问一下,Component.js这个文件,程式是如何调用的?我看在index.js中,只是指定了路径,并没有指定文件名称。

然后我试着更改了一下文件名称为component.js(首字母小写),然后通过调试发现无法加载这个文件。

难道这个文件名称是SAP UI5中hardcode的吗?

回答:本地访问 url,打开 Chrome 开发者工具,切换到 Network 标签页,在输入框里输入 component.js 后,发现了我们自己编写的 Component.js 文件被加载:

10.png

11.png

把鼠标放到 initiator 这一列上,就能看到发起这个文件请求的调用栈:

12.png

单击下图高亮区域,即 Component-dbg.js 文件的第 3361 行:

13.png

在这一行设置断点,然后刷新浏览器,断点触发:

14.png

按 F11 单步调试进去:

15.png

这里发现确实是像提问的朋友那样说的,Component 这个文件名是 SAP UI5 硬编码的,首字母改成小写 c 都不行。下面的代码,首先把应用程序里我们自定义的命名空间 sap.ui5.walkthrough.Component 做字符串连接,然后把连接后的字符串里所有的 . 替换成 /

16.png

最后使用 SAP UI5 标准的工具库去加载这个 Component.js 文件:

17.png

SAP UI5 模块是可以在浏览器中加载和执行的 JavaScript 文件。 没有确定的规则去定义什么代码应该属于一个模块——捆绑在模块中的内容取决于开发人员,但通常一个模块内的内容应当具有共同的主题。下面是一个模块的例子:

sap.ui.define("SomeClass", ['sap/mylib/Helper', 'sap/m/Bar'], function(Helper, Bar) {
    // create a new class
    var SomeClass = function () {};
    // add methods to its prototype
    SomeClass.prototype.foo = function () {
        // use a function from the dependency 'Helper' in the same package (e.g. 'sap/mylib/Helper' )
        var mSettings = Helper.foo();
        // create and return an sap.m.Bar (using its local name 'Bar')
        return new Bar(mSettings);
    };
    // return the class as module value
    return SomeClass;
  });
// later requiring the previously defined module
sap.ui.require(['SomeClass'], function(SomeClass) {
    var oInstance = new SomeClass();
});

上图 sap.ui.define 函数的第二个输入参数是模块的依赖。将每个依赖项添加到 sap.ui.define 调用可能会导致在执行模块之前必须加载许多模块。


目录
相关文章
|
21天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:理解其原理与实际应用
探索JavaScript中的闭包:理解其原理与实际应用
19 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
31 0
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
23 0
|
9天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
29天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
12 1
|
1月前
|
JavaScript 前端开发
HTML JS 应用
HTML JS 应用
19 3
|
1月前
|
JavaScript 前端开发 算法
Vue.js的单向数据流:让你的应用更清晰、更可控
Vue.js的单向数据流:让你的应用更清晰、更可控