利用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标簽的方式實作的。

使用setTimeout實作busy indicator的動态效果。