溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
手頭在維護一個比較老的項目，由于頁面的重組，一些不同頁面的 js 被加載到了同一個頁面，導致一個頁面里可能有一個以上的 window.onload ，這樣做的后果就是前面的回調函數會被后面的覆蓋掉。
上網搜了一下，絕大部分的解決方案有兩種：
這兩種方法要么只能預防，要么需要更改老代碼。我的情況比較特殊，老代碼是采用 webpack 打包過的，但是配置文件不見了，之前的維護人員直接修改了打包后的代碼，導致重新打包的工作量巨大，只能慢慢來。
思前想后，決定利用 Object.defineProperty 劫持 window.onload 的賦值行為，把對應的回調函數放到一個隊列中集中處理。
代碼如下：
/**
* @function windowLoadInit - 劫持 window.onload 的賦值行為，防止覆蓋
* @desc 函數調用前產生的覆蓋不可逆轉
* @throw {Any} 所有回調執行完畢之后，會拋出 catch 到的第一個錯誤
* 錯誤將被異步拋出，避免影響初始化函數的繼續執行
* @return {Function}
*/
function windowLoadInit(){
const eventQueue = [];
// 防止覆蓋之前的 window.onload
window.onload instanceof Function && eventQueue.push(window.onload);
window.onload = e => {
const errQueue = [];
// 逐個處理回調事件
while(!!eventQueue.length){
try{
eventQueue.shift()(e);
} catch(err){
errQueue.push(err);
}
}
if(!!errQueue.length) {
setTimeout(() => {
throw errQueue.shift();
},0);
};
};
// 每次賦值時，將回調函數添加到隊列
Object.defineProperty(window, 'onload', {
set: eventQueue.push
});
return window.onload
}
測試代碼：
// 此 testCase 需在頁面加載完成前執行
function testCase(){
const arr = [];
window.onload = () => arr.push(-1); // 這個回調的覆蓋不可避免
window.onload = () => arr.push(0);
windowLoadInit();
window.onload = () => arr.push(1);
window.onload = () => arr.push(2);
return new Promise(resolve => {
window.onload = () => resolve(arr.join('') === '012')
})
}
testCase().then(console.log); // true
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
