項目沒發(fā)版卻出現(xiàn)了bug,咋回事,哭了
前言
農(nóng)歷: 臘月二十五 陽歷: 2023-01-16
過年和年獸
已經(jīng)臨近過年，公司的迭代版本也已經(jīng)封版，大家都在一片祥和又摻雜焦慮的氣氛中等待春節(jié)的到來。
當(dāng)然，等待的人群里面也有我，吼吼哈嘿。
突然企業(yè)微信的一聲響，我習(xí)慣性的抬頭瞅了一眼屏幕，嗯？ 來至線上bug群？。
不過因為最近咱前端項目也沒有發(fā)版，心里多少有點底氣的。
于是懷著好奇的心情點開了群消息, 準(zhǔn)備看看是什么情況。
結(jié)果進(jìn)群看到是某前端頁面元素拖拽功能的位置失效了。晴天霹靂啊，我們有一個類似給運營做自定義活動頁面，說是無法拖拽了。然后需要做活動比較緊急,需要盡快修復(fù)。
這活脫脫就是跟著春節(jié)來的年獸啊。我還沒放煙花打年獸，年獸就先朝我沖過來了，那說什么也得較量較量了。
項目背景
我們這個功能是屬于一個基礎(chǔ)功能，通過npm私有倉庫維護(hù)版本
這個基礎(chǔ)功能呢，很多項目中都在使用。
如果基礎(chǔ)功能發(fā)了新版本，業(yè)務(wù)部門不進(jìn)行升級安裝，那么這個業(yè)務(wù)線的項目也 是不會出問題的。所以只要線上出了問題，那么要滿足兩個條件
- 1、基礎(chǔ)功能進(jìn)行了發(fā)布了npm新版本，且這個版本有問題，
- 2、業(yè)務(wù)部門進(jìn)行了升級，使用了這個新版本
排查問題
一般來說：造成問題的可能性有
- 有人發(fā)過新迭代版本
- 是不是存在莫名的緩存
- 有人在以前的版本里面下毒了，然后現(xiàn)在發(fā)作了（可能性不大）
經(jīng)過粗略排查
問題初見端倪
接著發(fā)生了兩件事情
- 1、然后我本地跑了一下項目的時候，在操作的時候，存在報錯。
- 2、一個測試兄弟反饋說他那兒可以正常操作
這他么莫不是瀏覽器兼容問題了吧。
我去他那看了一下，都是chrome瀏覽器（這個項目我們只支持到chrome就可以）
這時的我感覺可能問題有點大了，莫不是chrome又調(diào)整了吧
點開測試兄弟的版本看了下，是108，而且處于重啟就會升級的狀態(tài)。
我趕緊回到我的工位，打開電腦發(fā)現(xiàn)是109。
在看了下那個報錯, event.path為undefined, 這里先介紹下path是個什么玩意，他是一個數(shù)組，里面記錄著從當(dāng)前節(jié)點冒泡到頂層window的所有node節(jié)點。我們借助這個功能做了一寫事情。。。
這直接被chrome釜底抽薪了。（path屬于非標(biāo)準(zhǔn)api, 這些非標(biāo)準(zhǔn)api慎用，說不定什么時候就嘎了）
解決問題
1、問題一
既然是event.path沒了，那么我們怎么辦呢，首先得找到代替path的方法， 上面我們也說了，path里面記錄的是從當(dāng)前節(jié)點冒泡到頂層window的所有node節(jié)點（我們是拖拽事件）
那么我們可以自己遍歷一下當(dāng)前節(jié)點+他的父節(jié)點+父節(jié)點的父節(jié)點+...+window
????let?path?=?[];
????let?target?=?event.target;
????while(target.parentNode?!==?null){
??????path.push(target);
??????target?=?target.parentNode;
????}
????path.push(document,?window);
????return?path;
在項目里面試了一下，emm，很穩(wěn)定。
1、問題二
但是我們又遇到了第二個問題，使用到event.path的項目還比較多，這就日了狗了 如果沒有更好的方法，那么我只能挨個項目改，然后測試，然后逐個項目發(fā)版
這種原始的方法我們肯定是不會采用的，換個思路，既然event下的path被刪除了，那么我們在event對象下追加個一個path屬性就可以了
當(dāng)然我們要記得判斷下path屬性是否存在，因為有部分用戶的chrome是老版本的，我們只對升級后的版本做一些兼容就可以了
if?(!Event.prototype.hasOwnProperty("path")){
????Object.defineProperties(Event.prototype,?{
??????path:?{
??????????get:?function(){
??????????????var?target?=?this.target;
??????????????console.log('target',?target)
??????????????var?path?=?[];
??????????????while(target.parentNode?!==?null){
??????????????????path.push(target);
??????????????????target?=?target.parentNode;
??????????????}
??????????????path.push(document,?window);
??????????????return?path;
??????????}
??????},
??????composedPath:?{
??????????value:?function(){
??????????????return?this.path;
??????????},
??????????writable:?true
??????}
????});
}
這樣，我們只需要在每個項目的根html，通過script引入這個js文件就可以了
反思
如題，這個事情怪chrome嗎？其實不能怪的。
- 1、chrome在之前就已經(jīng)給出了更新通知，只是我們沒有去關(guān)注這個事情
- 2、本身event.path不是標(biāo)準(zhǔn)屬性，我們卻使用了（其實其他瀏覽器是沒有這個屬性的，只是chrome提供了path屬性, 雖然現(xiàn)在他刪除了）
- 3、總之還是自己不夠警惕，同時使用了不標(biāo)準(zhǔn)的屬性，以此為戒，共勉
作者：大魚敢瞪貓 鏈接：https://juejin.cn/post/7193520080808837180