SAP UI5和Angularjs事件处理机制的实现比较
Jerry最开始是用SAP UI5进行SAP CRM Fiori应用的开发。最近一段时间做SAP Spartacus开发，在用Angular，因此借这个机会将两个前端框架的事件处理实现细节做一个比较。
SAP UI5事件处理
通过button控件的attachPress方法注册一个Press事件点击的处理函数：
button控件本身的实现是没有attachPress这个方法的，这一点可以从hasOwnProperty返回false来确认：
Instead, it is provided by the node in the button instance’s prototype chain, EventProvider.
顺着SAP UI5 button原型链沿着继承关系向上寻找，最后发现在EventProvider里提供了attachEvent方法。如果对SAP UI5 button的原型链不熟悉，可以参考我这篇文章：深入学习SAP UI5框架代码系列之一：UI5 Module的懒加载机制
当我们应用代码里调用attachPress时，传入这个函数的事件响应函数被加入到一个SAP UI5统一维护的事件处理注册表mEventRegistry里，这是一个键值对数据结构，key为应用程序注册的事件名称，值为我们传入的 事件响应函数。如下图所示，key为press，值为fFunction：
当我们点击了UI上的按钮之后，SAP UI5控件的Button.onclick方法会被调用，里面会fire一个Press事件。这里完成了浏览器原生的click事件到语义事件Press的转换。
SAP UI5根据press，到事件注册表mEventRegistry里去查找，将所有注册到该事件上的所有响应函数取出，放到一个数组aEventListeners里，遍历这个数组，逐一调用响应函数。
Angularjs事件处理
下图是一个Angularjs应用，基于Angularks 1.2.18开发而成. 在界面上显示了硬编码之后的三个国家的人口，我希望通过人口对这三个国家进行排序。
我给Country这一列通过ng-click指令注册了一个排序逻辑：sortField = ‘name’
Angular和SAP UI5一样，有自己的bootstrap阶段。在此阶段Angular框架做的事情之一，就是Angular框架会通过下图第964行代码即compile函数，遍历html DOM树。
如果发现有一个element attribute具有ng前缀，执行applyDirectivesToNode函数，为该节点添加一些特殊的逻辑。
Angular通过下列的三个步骤，对ng-click = "sortField = ‘name’"进行响应函数注册：
第一步：解析包含ng-click= "sortField = ‘name’"的HTML元素，创建一个wrapper fn.
第二步：15328行，使用element.on给click事件注册响应函数。这个响应函数内部调用Angular第一步创建的wrapper fn.
第三步，用户点击超链接之后，15330的函数触发。
“sortField = ‘name’” 通过assign函数实现：
Finally, scope obj ( you can consider scope as “Model” in UI5 at this moment ) has attribute sortField which has been assigned with a new value “name”, this is how
“sortField = ‘name’”的执行：Scope对象的属性sortField被赋上了值：name
更多Jerry的原创文章，尽在：“汪子熙”:
SAP UI5和Angularjs事件处理机制的实现比较相关推荐
- 深入学习SAP UI5框架代码系列之三：HTML原生事件 VS UI5 Semantic事件
这是Jerry 2020年的第80篇文章,也是汪子熙公众号总共第262篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) ...
- 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现
这是 Jerry 2021 年的第 62 篇文章,也是汪子熙公众号总共第 339 篇原创文章. 龟虽寿曹操神龟虽寿,犹有竟时:腾蛇乘雾,终为土灰.老骥伏枥,志在千里:烈士暮年,壮心不已.盈缩之期,不但 ...
- 深入学习SAP UI5框架代码系列之八：谈谈 SAP UI5 的视图控件 ID，以及 SAP UI5 视图和 Angular 视图的异同
今天是 2021 年 4 月 27 日,周二,SAP 全球心理健康日.SAP 全球的员工,今天放假一天. 这不,早在上周五,我所在的 SAP Spartacus 开发团队的开发经理,就贴心地在 Sla ...
- SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章. Jerry之前的文章 SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request, ...
- SAP UI5 OData谣言粉碎机：极短时间内发送两个Odata request,前一个会自动被cancel掉吗
这是Jerry 2021年的第 9 篇文章,也是汪子熙公众号总共第 280 篇原创文章. 本文Jerry原本写于2016年5月,当时发布于团队内部wiki. 五年过后,Jerry使用的开发框架,从SA ...
- 对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？
这是 Jerry 2021 年的第 32 篇文章,也是汪子熙公众号总共第 308 篇原创文章. 我经常收到不少朋友这样的问题:如果对 SAP UI5 一无所知的新手,想学习 SAP UI5,从哪些材料 ...
- 使用工具分析 SAP UI5 应用前端执行的性能问题
这是 Jerry 2021 年的第 66 篇文章,也是汪子熙公众号总共第 343 篇原创文章. 国庆黄金周开始的前一天,9月30日,我所在的开发团队收到了一个关于 Angular 应用的服务器端渲染( ...
- 一个详尽的面向 SAP UI5 初学者的教程 - 如何在 SAP UI5 中绘制图表 Chart
这是 Jerry 2021 年的第 65 篇文章,也是汪子熙公众号总共第 342 篇原创文章. 观沧海 曹操 东临碣石,以观沧海. 水何澹澹,山岛竦峙. 树木丛生,百草丰茂. 秋风萧瑟,洪波涌起. 日 ...
- 本地修改远端 SAP UI5 框架文件的一个小技巧
这是 Jerry 2021 年的第 64 篇文章,也是汪子熙公众号总共第 341 篇原创文章. Jerry 的前一篇文章 纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步 ...
最新文章
- jbpm binding类深入解析
- android发送短信
- HTML td 标签的 colspan 属性
- linux各个服务器的软件自启动
- android sqlite触发器,SQLite---使用触发器(Trigger)
- java.lang.NoClassDefFoundError: org/aspectj/weaver/reflect/ReflectionWorld$ReflectionWorldException
- 一文带你领略人工神经网络激荡70年
- 【图像处理基础知识】python+opencv显示中文
- 2M口，电口，光口的区别
- SpringBoot 之Thymeleaf模板
- matlab操作视频教程,matlab2019视频教程
- 微信订阅号改回列表显示
- 用java实现楼层导航_楼层导航
- 【Linux应用】Clonezilla使用指南
- 全国高校计算机能力挑战赛赛事通知
- 新电脑win10系统的一个BUG
- 超级AI大脑：全能型学习助理
- 2018hdu个人排位赛：涮羊肉
- 互联网行业应届生年薪35W，倒挂老员工，这是逼老人离职吗？
- 事业单位计算机和办公软件基础知识,计算机基础知识(事业单位计算机考试常考知识点总结)...