利用ES6里标准化的JavaScript proxy对象拦截SAP C4C页面的HTML div原生操作
发布日期:2021-06-30 14:17:37
浏览次数:3
分类:技术文章
本文共 687 字,大约阅读时间需要 2 分钟。
SAP Cloud for Customer的UI实现里,有不少使用JavaScript在运行时动态创建div标签的例子。
如果想研究这些情形发生的上下文,我们可以使用ES6提供的标准Proxy对象,给浏览器原生的document.createElement方法注入一个proxy,里面设置一个断点。这样每当div标签页被动态创建时,我们注入的proxy将会取代标准的document.createElement被浏览器调用。从断点停下来的调用上下文,我们即可观测到更多信息。
const handler = { // Our hook to keep the track apply: function (target, thisArg, args){ console.log("Jerry Intercepted a call tocreateElement with args: " + args); debugger; return target.apply(thisArg, args) }}document.createElement= new Proxy(document.createElement, handler);
比如每次SAP Cloud for Customer UI出现busy indicator的动画效果时,其实浏览器就是残躯新建一个div标签的方式实现的。
使用setTimeout实现busy indicator的动态效果。
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
转载地址:https://jerry.blog.csdn.net/article/details/105252756 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月09日 00时06分46秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Spring Boot 注解@EnableAutoConfiguration的解析
2019-05-01
SpringApplication执行流程
2019-05-01
Spring Boot Quartz 动态任务实现方式
2019-05-01
Spring MVC Quartz 动态任务实现方式
2019-05-01
自定义Starter
2019-05-01
插入排序
2019-05-01
选择排序
2019-05-01
Spring Batch 入门之 CSV-to-DB
2019-05-01
快速排序 - 学习记录
2019-05-01
日志写入数据库:Log4j2-JDBCAppender
2019-05-01
日志写入数据库:Logback-DBAppender
2019-05-01
分布式事务原理探究(一)
2019-05-01
MySQL 中基于 XA 实现的分布式事务-学习记录
2019-05-01
Java 并发学习记录之synchronized
2019-05-01
Java 并发学习记录之 wait/notify 机制
2019-05-01
Java 并发学习记录之线程间通信
2019-05-01
Java并发学习记录之volatile
2019-05-01
Docker + mysql主从配置
2019-05-01
Java集合学习之LinkedList
2019-05-01
Spring Security Oauth2 令牌增加额外信息
2019-05-01