利用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 trackapply: 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的原创文章，请关注公众号"汪子熙":

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

Javascript Proxy对象简介
Javascript Proxy对象简介本文转载自:众成翻译译者:eJayYoung 链接:http://www.zcfy.cc/article/4755 原文:https://blog.cam ...
关于在WinForm里用HttpWebRequest获得某个页面，并填写页面的textbox及点击button的方法...
方法如下: step1:use HttpWebRequest class to request,and use HttpWebResponse get the response. if you rea ...
【ES6】Proxy对象
[ES6]Proxy对象一.Proxy的基本用法二.Proxy示例的方法 1)get() 2)set() 3)apply() 查看更多ES6教学文章: 参考文献引言:ES6规范里面新增了Prox ...
ES6的Proxy对象
Proxy在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改. ES6原生提供了Proxy构造函数,用来生成Proxy实例.下面代码中p ...
ES6中的reflect和proxy和一个on-change
理解reflect 反射,在运行时获得程序或程序集每一个类型的成员和成员信息. JAVA里程序中一般的对象的类型都是在编译期就确定下来的,而Java反射机制可以动态地创建对象并调用其属性,这样的对象的 ...
ES6新增语法与内置对象扩展
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.什么是ES6 ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项 ...
JavaScript系列-----对象基于哈希存储（Key，Value之Key篇）（1）
1.Hash表的结构首先,允许我们花一点时间来简单介绍hash表. 1.什么是hash表 hash表是一种二维结构,管理着一对对<Key,Value>这样的键值对,Hash表的结构如下图 ...
javascript 本地对象和内置对象_JavaScript 的面向对象
图片来源于 DigitalOcean 1. 什么是类在说 JavaScript 的面向对象的实现方法之前,我们先来看面向对象编程的一个核心概念--类(class).类是对拥有同样属性(propert ...
JavaScript 原型对象和原型链
开篇之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就 ...

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

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

最新文章

热门文章