`
JerryWang_SAP
  • 浏览: 1025459 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

Angular和SAP C4C的事件处理队列

阅读更多

Angular

我们在Angular框架的代码里能看到一个名为processQueue的函数:

 

这个函数是通过scope.apply启动的:

 

核心代码位于一个for循环里,循环体是一个存储异步处理任务的队列asyncQueuePosition:

for (var asyncQueuePosition = 0; asyncQueuePosition < asyncQueue.length; asyncQueuePosition++) {

try {

    asyncTask = asyncQueue[asyncQueuePosition];

    fn = asyncTask.fn;

    fn(asyncTask.scope, asyncTask.locals);

} catch (e) {

      $exceptionHandler(e);

}

     lastDirtyWatch = null;

}

队列里每个元素长这样的:一个处理函数fn,一个局部变量locals和scope对象:

 

这个注释也非常有用:一旦Angular发现由scope.apply触发的JavaScript执行序列里又出现了scope.apply的嵌套调用,会抛出错误消息:$digest already in progress

// It's safe for asyncQueuePosition to be a local variable here because this loop can't

// be reentered recursively. Calling digest from a function passed toevalAsync would

// lead to a '$digest already in progress' error.

C4C 事件队列

C4C的事件处理器,EventProcessor.js有一个事件队列:

 

该队列的实现位于sap/client/evt/的OperationQueue.js中:

 

随便在C4C UI做一个点击,能触发EventProcessor的_processQueue,C4C事件队列的处理和Angular思路一样,只不过是一个while循环替代了Angular的for循环:

 

C4C事件队列里每个元素属性如下,可以同Angular事件元素做对比:

fFunc就相当于Angular时间元素的fn属性,environment相当于Angular事件元素的scope属性。

 
 
 

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

 
0
0
分享到:
评论

相关推荐

    angular-queue:处理AngularJS的队列

    处理队列。 基于 用法 在主要的AngularJS脚本之后包含angular-queue.js 。 将ngQueue指定为Angular应用程序的依赖项: var app = angular . module ( 'myApp' , [ 'ngQueue' ] ) ; 在您的控制器,服务等中,注入...

    Angular异步变同步处理方法

    Angular异步变同步处理方法是前端开发中用于解决多个接口请求顺序依赖问题的一种技术手段。由于异步操作的特性,它能处理那些按顺序依次执行的接口调用,而不会阻塞主线程,让页面陷入假死状态。在Angular中,主要...

    基于Angular和AngularMaterial的树形表格组件

    对于JavaScript开发者,尤其是熟悉Angular和Angular Material的开发者来说,这个过程将涉及到组件设计、数据绑定、指令编程、事件处理、UI设计等多个方面,是对技能的综合考验。在实际开发中,了解并掌握这些知识点...

    Angularjs-echarts 点击事件

    Angular-echarts是 wangshijun对echarts利用Angular封装的组件,github地址https://github.com/wangshijun/angular-echarts。附件只是在源码例子里上添加了点击事件。

    angular和jquery例子--IntegralUI-Studio-Web-TRIAL

    Angular 是一个全面的框架,用于构建单页应用程序(SPA),而 jQuery 是一个轻量级的库,简化了 DOM 操作、事件处理和动画效果。在"angular和jquery例子--IntegralUI-Studio-Web-TRIAL"这个压缩包中,我们可能会找到...

    angular2 入门和示例书

    它提供了一种强大的方式来处理事件和数据流,如订阅、过滤、合并和转换等操作。在Angular2中,你可以用Observables来替代传统的事件处理和回调函数。 **依赖注入** 依赖注入(Dependency Injection,简称DI)是...

    angular4的框架

    8. **依赖注入(Dependency Injection)**:Angular的DI系统使得组件和服务可以轻松地获取它们所需的依赖,而无需手动实例化。 9. **变更检测(Change Detection)**:Angular4通过检查每次事件(如用户输入或HTTP...

    Angular 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 、事件、表单事件、事件对象、双向数据绑定

    Angular 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 、事件、表单事件、事件对象、双向数据绑定

    angular的表单设计器 angular-form-builder

    5. **数据绑定和同步**: 表单状态与模型实时同步,方便进行数据验证和处理。 6. **表单重用**: 通过创建表单模型并将其保存在服务中,可以轻松重用表单。 总结来说,Angular-Form-Builder为Angular开发者提供了一...

    press-touch-angular:练习触及长按事件

    通过这样的方式,我们就可以在Angular应用中实现对触摸和长按事件的处理。"press-touch-angular"练习旨在帮助开发者熟悉这些技术,通过实践来加深理解和应用。记住,优化用户体验是关键,合理利用触摸和长按事件可以...

    Angular2中select用法之设置默认值与事件详解

    本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一、设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的...

    前端项目-angular-charts.zip

    在这个项目中,开发者可以学习到如何将D3.js与Angular的指令系统相结合,以实现数据绑定和事件处理,从而构建出高性能且用户友好的图表组件。 【标签】"前端项目"表明这是一次关于前端开发的实践,涉及到的技能包括...

    揭秘Angular2 中文扫描版 带书签

    这本书以中文形式呈现,旨在帮助中国开发者轻松掌握Angular2的核心概念和技术细节。书中内容全面,从基础知识到高级架构,再到实际应用,为读者提供了一个全方位的学习路径。 1. **Angular2简介** Angular2是...

    angular7+echarts实现地图缩放和切换

    综上所述,实现"angular7+echarts实现地图缩放和切换"的功能,需要对Angular7的组件和生命周期有深入理解,熟悉ECharts的配置项和事件处理,以及GeoJSON地图数据的使用。通过合理的代码组织和优化,我们可以构建出...

    angular6 中文官方文档

    视图是一组可见的屏幕元素,Angular 可以根据你的程序逻辑和数据来选择和修改它 们。 每个应用都至少有一个根组件。 组件使用服务。服务会提供那些与视图不直接相关的功能。服务提供商可以作为依赖被注入到组件中, ...

    基于angular4和express聊天实例

    在本示例中,Angular4被用来创建用户界面和处理客户端的业务逻辑。 Express4则是Node.js中的一个轻量级后端框架,用于快速构建RESTful API和服务。它简化了HTTP服务器的创建,提供了一系列中间件来处理请求和响应,...

    浅谈angular2子组件的事件传递(任意组件事件传递)

    总结来说,Angular 2中的事件总线服务提供了一种高效且灵活的方式来处理跨组件通信,特别是在具有复杂组件结构和多级路由的应用中。通过创建自定义服务并利用RxJS的Subject,我们可以实现任意组件之间的事件传递,使...

    Angular5AI包含Angular5Material和Dialogflow的一个小型AI应用

    在Angular 5应用中,JavaScript代码用于实现业务逻辑、处理用户事件、调用API等任务。开发者需要熟悉ES6+的语法,包括箭头函数、模板字符串、Promise和async/await等特性。 **文件结构分析** 虽然没有具体的文件...

Global site tag (gtag.js) - Google Analytics