利用ES6里标准化的JavaScript proxy对象拦截SAP C4C页面的HTML div原生操作

简介: 利用ES6里标准化的JavaScript proxy对象拦截SAP C4C页面的HTML div原生操作

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标签的方式实现的。

image.png



使用setTimeout实现busy indicator的动态效果。


image.png

image.png

image.png



image.png

相关文章
|
10天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
4天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
12 0
|
1天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
1天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
8 0
|
2天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
9 0
|
2天前
|
JavaScript 安全 前端开发
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
10 0
|
3天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
13 1
|
4天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
10 0
|
4天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
12 0
|
4天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
9 1