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的原創文章，請關注公眾號"汪子熙":

利用ES6標準化JavaScript proxy物件攔截SAP C4C頁面的HTML div原生操作

相關文章