利用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的動態效果。

要獲取更多Jerry的原創文章，請關注公衆號"汪子熙":