深入学习 SAP UI5 框架代码系列 | 内容合集

SAP UI5 和著名的前端框架三驾马车 React, Angular 和 Vue 一样，是一款前端应用程序开发框架，并且包含了一套适用于企业级前端应用的控件库，是 SAP Fiori 应用的官方首选开发框架。本系列试图给大家演示一种通过研读和调试 SAP UI5 源代码，能够自行去研究 SAP UI5 框架实现原理的方法。

1. 深入学习 SAP UI5 框架代码系列之一：UI5 Module 的懒加载机制
   

本文首先阐述了作为一个 SAP UI5 应用开发人员，为什么要深入了解 SAP UI5 框架实现源代码，紧接着介绍了 SAP UI5 模块懒加载的技术实现细节。懒加载即延迟加载，SAP UI5 的模块，只有当其包含的至少一个 UI 控件，在运行时被初始化时，才会触发加载过程。

2. 深入学习 SAP UI5 框架代码系列之二：UI5 控件的渲染器
   

SAP UI5 使用的 XML 视图里，能够定义被 SAP UI5 封装之后的控件标签，UI5 应用开发人员可以直接使用，不用重复造轮子。然而这些标签并不属于 HTML 原生标签，因此需要一个额外的转换层，生成 HTML 原生标签，从而才能被浏览器正确地渲染。

3. 深入学习 SAP UI5 框架代码系列之三：HTML 原生事件 VS UI5 Semantic 事件
   

本文我们首先阐述了 SAP UI5 设计一个额外的抽象层，即 SAP UI5 语义事件层的原因，然后通过源代码的调试，带大家了解当用户点击 SAP UI5 控件生成的原生 HTML 事件，是如何映射到 SAP UI5 语义事件并调用到 SAP UI5 控制器的事件处理函数的。

4. 深入学习 SAP UI5 框架代码系列之四：SAP UI5 控件的元数据实现
   

本文我们将了解更多关于 SAP UI5 控件元数据的细节。虽然作为 SAP UI5 应用开发人员，我们日常工作中，最经常打交道的，是本系列下一篇文章要介绍的 SAP UI5 控件的实例数据。但是，了解了 SAP UI5 控件元数据的设计原理，有助于 SAP UI5 开发人员，理解我们本地使用 Visual Studio Code 或者浏览器里使用 WebIDE， SAP Business Application Studio 这种在线开发工具时， SAP UI5 代码自动补全的实现原理。

5. 深入学习 SAP UI5 框架代码系列之五：SAP UI5 控件的实例数据修改和读取逻辑
   

SAP UI5 控件的 set 和 get 方法，作为通过 JavaScript 代码给前端控件设置属性值和读取属性值的最常用两个方法，广泛应用于 SAP UI5 程序中。

本文我们将通过研究 button 控件的 setText 和 getText 方法实现，来学习 SAP UI5 控件的实例数据修改和读取逻辑。

6. 深入学习 SAP UI5 框架代码系列之六：SAP UI5 控件数据绑定的实现原理
   

在前端框架的学习过程中，控件数据绑定，一直是一个重点和难点。说它难，并不是控件绑定的语法有多难以掌握，而是指，当控件进行数据绑定后，运行时没有达到应用开发人员期望的效果后，应该如何着手分析问题症结所在。

7. 深入学习 SAP UI5 框架代码系列之七：控件数据绑定的三种模式实现原理比较
   

如果是从 Angular 前端开发转过来的 SAP UI5 应用开发人员，想必对 Angular 的 Property binding，Event binding 和 Two-way binding 的实现原理和区别已经有所了解了。在 SAP UI5 里同样存在类似 Angular 的双向绑定机制，并且从使用角度说更加灵活。

8. 深入学习 SAP UI5 框架代码系列之八：谈谈 SAP UI5 的视图控件 ID，以及 SAP UI5 视图和 Angular 视图的异同
   

作为本系列的最后一篇文章，让我们一起来了解，SAP UI5 视图中控件 ID 的生成逻辑，以及 SAP UI5 视图同 Angular 视图的设计异同点。本系列通过介绍的内容，给大家演示了一种通过研读和调试 SAP UI5 源代码，能够自行去研究 SAP UI5 框架实现原理的方法。