js rewrite native function All In One

js 方法重寫/ 方法重載

js 方法覆寫

ts 方法重寫/ 方法重載

ts 方法覆寫

enhanced function, wrapped function, proxy function, logger function

    function rewriteHistory(type) {
        const origin = window.history[type];
        return function () {
            console.log(`arguments =`, arguments, this);
            console.log(`type =`, type, type.toLocaleLowerCase());
            const rs = origin.apply(this, arguments);
            // custom event
            const e = new Event(type.toLocaleLowerCase());
            e.arguments = arguments;
            // 手動觸發事件 
            window.dispatchEvent(e);
            return rs;
        };
    }

🚀 在原來的方法上添加不存在的方法


    changeRouter (cb) {
        // rewrite function 🚀, why❓
        window.history.pushState = rewriteHistory('pushState');
        window.history.replaceState = rewriteHistory('replaceState');
        // popstate, 點擊-瀏覽器的前進后退
        window.addEventListener('popstate', () => {
            this._emit(cb, '瀏覽器的前進后退 popstate');
        });
        // TODO: pushstate event ??? 不存在
        window.addEventListener('pushstate', () => {
            this._emit(cb, '❓單頁路由變化 pushstate');
        });
        window.addEventListener('replacestate', () => {
            this._emit(cb, '❓單頁路由替換 replacestate');
        });
        window.addEventListener('hashchange',(e) => {
            // console.log('hashchange event', e);
            const timeDiff = this._getTimestamp() - this.beginTimestamp;
            this.beginTimestamp = this._getTimestamp();
            console.log(`hashchange 待了時長: ${timeDiff}`);
            this._emit(cb, '單頁路由 hashchange');
        });
    }

demos

https://cdn.xgqfrms.xyz/HTML5/history-api/pushstate-event.html

https://codepen.io/xgqfrms/pen/PobObbJ

rewirte pushstate & custom event

https://cdn.xgqfrms.xyz/HTML5/history-api/rewirte-pushstate-event.html

js multi events overwrite bug

https://cdn.xgqfrms.xyz/HTML5/history-api/url-change-event.html

    (function(history){
      var pushState = history.pushState;
      history.pushState = function(state) {
        // YOUR CUSTOM HOOK / FUNCTION
        log('called from pushStateHook', state, arguments);
        // func();
        return pushState.apply(history, arguments);
      };
    })(window.history);

ES5 Object.defineProperty

數據劫持

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

ES6 proxy


const target = {
  message1: "hello",
  message2: "everyone"
};

const handler3 = {
  get: function (target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
};

const proxy3 = new Proxy(target, handler3);

console.log(proxy3.message1); // hello
console.log(proxy3.message2); // world

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy

https://javascript.info/proxy

TypeScript functions overloads

function overloading / method overloading

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x: any): any {
  // Check to see if we're working with an object/array
  // if so, they gave us the deck and we'll pick the card
  if (typeof x == "object") {
    let pickedCard = Math.floor(Math.random() * x.length);
    return pickedCard;
  }
  // Otherwise just let them pick the card
  else if (typeof x == "number") {
    let pickedSuit = Math.floor(x / 13);
    return { suit: suits[pickedSuit], card: x % 13 };
  }
}

let myDeck = [
  { suit: "diamonds", card: 2 },
  { suit: "spades", card: 10 },
  { suit: "hearts", card: 4 },
];

let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);

https://www.typescriptlang.org/docs/handbook/functions.html#overloads

https://www.typescriptlang.org/docs/handbook/functions.html

https://www.tutorialsteacher.com/typescript/function-overloading

https://howtodoinjava.com/typescript/function-overloading/

https://stackoverflow.com/questions/13212625/typescript-function-overloading