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的原创文章,请关注公众号"汪子熙":
相关推荐
利用原生循环依赖关系序列化复杂JavaScript对象或ES6类
Javascript 面向对象的JavaScript进阶 Javascript技术
JavaScript(ES6新增、W3C、MDN)最新参考手册.rar
JavaScript ES6函数式编程入门经典
Javali(又名JAVAScript LIbrary)是一个像Create React App这样的CLI,但用于创建JavaScript库。
ES6是下一代JavaScript语言标准的统称,每年6月发布一次修订版,迄今为止已经发布了3个版本,分别是ES2015、ES2016、ES2017。本书根据ES2017标准,详尽介绍了所有新增的语法,对基本概念、设计目的和用法进行了清晰...
| 英语 ES6代理Polyfill 这是ES6 Proxy的polyfill,支持IE6 + ,Node.js等。 到目前为止,它比GoogleChrome的支持更多功能。... script src =" path/to/es6-proxy-polyfill.js " type =" text/javascript " > <
Jewell利用ES6 Proxy的功能提供语法糖,允许您编写更干净的代码
es6学习资料,es6学习资料es6学习资料es6学习资料es6学习资料es6学习资料es6学习资料
ES6标准入门 第3版ES6标准入门 第3版ES6标准入门 第3版
ECMAScript 6 技术扫盲,快速学习ES6,进入Javascript开发ES6时代。
ES6的循环与可迭代对象示例详解 本文将研究 ES6 的 for ... of 循环。 在过去,有两种方法可以遍历 javascript。 首先是经典的 for i 循环,它使你可以遍历数组或可索引的且有 length 属性的任何对象。 for(i=0...
es6标准入门...
es6-ES6概念&新增语法&内置对象拓展1
ES6(又名 ES2105)是 JavaScript 语言的新标准,2015 年 6 月正式发布后,得到了迅速推广,是目前业界超级活跃的计算机语言。《ES6标准入门(第2版)》是国内仅有的一本 ES6 教程,在前版基础上增补了大量内容——...
ES6模块化示例DEMO
ES6标准入门(第三版)pdf电子版,想要学习这方面知识的可以看一下,还是比较清晰的。
JavaScript解析器,用于ES6 的压缩器/优化器和美化工具包
构建html 一键自动化压缩 css js images 支持ES6模块化。减少前端开发重复劳动(不依赖webpack,和gulp)完全利用npmscript
es6标准入门 阮一峰 第三版 这里是第三版 包含es7等语法介绍