在可視化建站項(xiàng)目中程癌，基于架構(gòu)的原因斟览，所有組件像是樂(lè)高積木一樣，并沒(méi)有冗余在具體的頁(yè)面里汰蜘，通過(guò)運(yùn)營(yíng)配置的JSON去映射對(duì)應(yīng)的組件仇冯，所以對(duì)于單個(gè)組件的各項(xiàng)邏輯完全是無(wú)法預(yù)知的，使用項(xiàng)目中廣泛使用的baselist進(jìn)行加載鉴扫，ImprLogger進(jìn)行曝光埋點(diǎn)的做法就完全不可取了赞枕，因?yàn)樗麄兊某跏蓟枰芏鄥?shù)澈缺，而我們無(wú)法預(yù)知這些參數(shù)坪创，也不能將這些參數(shù)轉(zhuǎn)交給頁(yè)面搭建人員去輸入，因此我們使用了Intersection-Observer這一功能強(qiáng)大的api姐赡，用單一職責(zé)的模式設(shè)計(jì)了很多組件莱预，每個(gè)組件保證一個(gè)功能，雖然功能單一项滑，但是裝載在業(yè)務(wù)組件里依沮，就好像普通的業(yè)務(wù)組件多了左膀右臂，很輕松的增加了各種功能枪狂，而不是在傳統(tǒng)開(kāi)發(fā)中危喉，使用功能強(qiáng)大復(fù)雜的baselist托管一切，通過(guò)復(fù)雜的配置項(xiàng)去驅(qū)動(dòng)州疾，通過(guò)生命周期調(diào)用不同方法來(lái)解決bug辜限。
-
曝光埋點(diǎn)是指在商品或廣告進(jìn)入視口后，發(fā)送給后端這個(gè)商品的相關(guān)信息的一種行為严蓖，在大家的業(yè)務(wù)中非常常見(jiàn)薄嫡，在我的開(kāi)發(fā)體驗(yàn)中應(yīng)該是遇到bug最多的點(diǎn)，大家或多或少會(huì)出現(xiàn)下列的情況 -
下拉加載是移動(dòng)端場(chǎng)景的分頁(yè)加載策略颗胡，后端接口設(shè)計(jì)成分頁(yè)的模型毫深，在滾動(dòng)到頁(yè)面底部時(shí)加載新的數(shù)據(jù)從而達(dá)到無(wú)限滾動(dòng) -
懶加載是移動(dòng)web性能優(yōu)化的常見(jiàn)手段，主要功能是在圖片進(jìn)入視口才進(jìn)行加載毒姨，未加載之前顯示占位圖哑蔫，圖片加載完成后顯示圖片
先看看之前開(kāi)發(fā)的痛點(diǎn)把！
-
使用古老的BaseList2時(shí)弧呐，在BaseList2的開(kāi)發(fā)時(shí)闸迷，將埋點(diǎn)的邏輯直接冗余在列表中，后續(xù)的開(kāi)發(fā)中泉懦，將曝光埋點(diǎn)的方法抽離出來(lái)稿黍，提供幾個(gè)api，在BaseList2組件中進(jìn)行調(diào)用崩哩，但是Ｑ睬颉Ｑ糟濉！并沒(méi)有在原有BaseList2中將過(guò)去的方法刪去酣栈，于是會(huì)遇到兩個(gè)埋點(diǎn)沖突的情況险胰，傳入的props也有好多個(gè)，在文檔匱乏的項(xiàng)目中簡(jiǎn)直難用矿筝！坑捌鸨恪！
image.png
-
BaseList3是目前大家應(yīng)用比較廣泛受到好評(píng)的列表窖维，主要是它功能比較完善榆综，可以做很多邏輯，埋點(diǎn)封裝的很完全铸史，但是１谴！琳轿！他是采用繼承式的寫(xiě)法判沟，對(duì)一一個(gè)通用組件來(lái)講繼承式是api很不友好的，大家需要看源碼才能知道這個(gè)組件都有什么方法崭篡，而且不能開(kāi)箱即用挪哄，必須要繼承列表組件寫(xiě)一個(gè)自己的列表組件才可以使用.可以看到下圖，因?yàn)槁顸c(diǎn)方法抽出來(lái)了琉闪，比上面的強(qiáng)一點(diǎn)迹炼，可以直接調(diào)用曝光埋點(diǎn)的方法，但是還要寫(xiě)很多代碼塘偎。
image.png
使用老代碼該如何曝光埋點(diǎn)呢疗涉，戲稱他為三部曲
- 在父組件初始化曝光器的單例
- 在列表組件對(duì)整塊要曝光的區(qū)域做注冊(cè)
- 每一個(gè)子組件都要把自己注冊(cè)進(jìn)步驟2中的曝光區(qū)塊對(duì)象中去
在考慮項(xiàng)目能不能使用IScroll或者寫(xiě)成類似react-infinite這種回收移出視口的列表組件時(shí)，由于上述的埋點(diǎn)方法吟秩，只能停下腳步咱扣，而且有個(gè)坑！react組件渲染的聲明周期是 父組件willmount - 子組件 willmount - 子組件 didmount - 父組件didmount 這樣導(dǎo)致了步驟三會(huì)在沒(méi)有SSR的靜態(tài)頁(yè)面中出錯(cuò)涵防，因?yàn)楦改K還沒(méi)有didMount闹伪，子組件沒(méi)辦法注冊(cè)到父模塊中去。壮池。偏瓤。。椰憋。
遇到了這么多坑之后厅克，我寫(xiě)了一個(gè)baselistV4，妄圖通過(guò)api的封裝解決了上面的問(wèn)題橙依，把復(fù)雜的邏輯都隱藏在列表中证舟，但是頁(yè)面數(shù)據(jù)加載和埋點(diǎn)邏輯太多了硕旗，也只能涵蓋有限的情況
然后我遇到了Intersection-observer這個(gè)神奇的API，解決了上述問(wèn)題
基本介紹
應(yīng)用
- 曝光埋點(diǎn)
- 商品列表
- 懶加載
