一、一次點(diǎn)擊換來三張圖的不同反應(yīng)鎮(zhèn)里那面大屏有三米寬左邊一張地圖鋪滿上面標(biāo)著轄區(qū)內(nèi)十四個(gè)村的點(diǎn)位右邊豎著三張圖產(chǎn)量趨勢(shì)、人口結(jié)構(gòu)、積分排行。需求很樸素鼠標(biāo)點(diǎn)某個(gè)村的點(diǎn)位右邊三張圖同時(shí)換成這個(gè)村的數(shù)據(jù)。做第一版的時(shí)候我們想當(dāng)然地讓點(diǎn)位組件直接去調(diào)那三張圖。頁面上的組件一共十四個(gè)除了地圖和三張圖還有滾動(dòng)的通知條、指標(biāo)卡、視頻窗、彈窗列表。第一版做完之后組件之間的調(diào)用關(guān)系畫出來是一張網(wǎng)互相引用的連線有十七條改一個(gè)圖表的數(shù)據(jù)字段名要跟著改三處調(diào)用方。那個(gè)版本上線兩周出現(xiàn)了三次同一個(gè)毛病。點(diǎn)一次點(diǎn)位產(chǎn)量圖刷新了人口圖沒動(dòng)排行圖刷了兩遍。排查下來是彈窗里也放了一份圖表它在組件銷毀時(shí)沒有把之前的調(diào)用關(guān)系清理掉一次點(diǎn)擊觸發(fā)了多路響應(yīng)。二、依賴的方向比組件寫得好不好更要緊拆開看問題不在組件寫得好不好在依賴的方向。地圖不該知道右邊有幾張圖、圖里畫的是什么字段它只知道用戶選了哪個(gè)村。圖表也不該知道點(diǎn)位是從哪里來的它只知道現(xiàn)在要展示哪個(gè)村的數(shù)據(jù)。兩端各少知道一點(diǎn)耦合就斷開了。直覺做法是父組件統(tǒng)管把數(shù)據(jù)和回調(diào)都放在頁面頂層一層層往下傳。這在小頁面上很干凈一旦層級(jí)深了就會(huì)出現(xiàn)層層透?jìng)髦虚g的容器組件自己不用這些數(shù)據(jù)卻要為下面幾層聲明一堆屬性。另一個(gè)直覺是全局狀態(tài)把選中的村放進(jìn)共享狀態(tài)里圖表監(jiān)聽它。這條路可行代價(jià)是任何一個(gè)字段變化都會(huì)觸發(fā)一批訂閱者去判斷而大屏上的狀態(tài)有很多刷新頻率也不一樣混在一份狀態(tài)里容易互相牽著走。這三個(gè)做法我們都試過一小段。第一版用的是直接調(diào)用第二版換成全局狀態(tài)跑起來之后發(fā)現(xiàn)大屏上有三塊內(nèi)容并不需要跟著點(diǎn)位變比如滾動(dòng)通知和視頻窗它們?cè)跔顟B(tài)變化時(shí)也會(huì)被通知一遍雖然每次判斷很輕但一個(gè)下午的觀察里它們的重繪次數(shù)從零變成了兩百多次。三、三條路和各自的代價(jià)第一條路是組件直接互相調(diào)用通過引用拿到對(duì)方的方法。實(shí)現(xiàn)最短一個(gè)事件加一個(gè)引用就能通缺點(diǎn)是依賴方向被寫死在組件里組件一多就成了網(wǎng)狀結(jié)構(gòu)新增一塊圖表要回到點(diǎn)位組件里改代碼。第二條路是全局狀態(tài)管理。所有組件從同一份狀態(tài)里讀。好處是數(shù)據(jù)來源只有一處調(diào)試時(shí)能一眼看到當(dāng)前選中了誰壞處是狀態(tài)粒度不好切粗了會(huì)連坐細(xì)了要維護(hù)一堆訂閱關(guān)系而且它更適合描述狀態(tài)不太適合表達(dá)一次動(dòng)作。第三條路是事件總線。發(fā)布者只管拋出一次動(dòng)作并帶上載荷訂閱者各自決定要不要響應(yīng)、怎么響應(yīng)。地圖不知道有幾張圖圖表也不知道點(diǎn)位在哪。代價(jià)是鏈路變隱式出問題要靠日志和事件名回溯所以得配一份事件名常量表和一份訂閱登記否則時(shí)間長了沒人說得清有哪些人在聽。四、事件名常量表與載荷我們選了事件總線配一份事件名常量表。所有事件名寫成常量文本只在一處定義拋出和接收都引用常量拼錯(cuò)的時(shí)候構(gòu)建階段就能攔住不用等運(yùn)行時(shí)才發(fā)現(xiàn)沒人響應(yīng)。載荷是一個(gè)約定好的對(duì)象里面三個(gè)字段就夠用。scope 放區(qū)劃碼metric 放指標(biāo)名range 放時(shí)間區(qū)間。發(fā)布者把自己知道的那部分填上訂閱者按需取字段不需要的字段不讀也不假定別的訂閱者讀了什么。組件訂閱的時(shí)候把銷毀函數(shù)登記下來銷毀時(shí)調(diào)用一次反注冊(cè)。這套事件約定后來寫進(jìn)了萬村樂數(shù)字鄉(xiāng)村的大屏開發(fā)規(guī)范新組件按約定接入就行。規(guī)范里只有一頁寫清楚事件名怎么起、載荷怎么填、銷毀時(shí)做什么。五、載荷結(jié)構(gòu)、登記與批量派發(fā)一次選擇的載荷長這樣區(qū)劃碼是十二位村級(jí)碼指標(biāo)名用枚舉時(shí)間區(qū)間是起止兩個(gè)時(shí)間戳。如果某個(gè)訂閱者只需要區(qū)劃它讀 scope 就夠了需要看指標(biāo)的讀 metric需要按區(qū)間算的讀 range。字段是穩(wěn)定的加字段只往后加不改已有字段的含義。派發(fā)改成微任務(wù)批量處理。一次選擇可能連著拋出兩三個(gè)事件比如選中村之后要同時(shí)通知數(shù)據(jù)刷新和標(biāo)題更新如果同步逐個(gè)調(diào)用渲染線程會(huì)被占住點(diǎn)位的高亮要等所有訂閱者跑完才出現(xiàn)肉眼看得出有延遲。六、三個(gè)坑的現(xiàn)場(chǎng)記錄第一個(gè)坑是切頁之后舊組件沒有反注冊(cè)。現(xiàn)象是從大屏切到臺(tái)賬頁再切回來點(diǎn)一次點(diǎn)位圖表刷新兩遍。根因是組件銷毀時(shí)只銷毀了實(shí)例沒把當(dāng)初登記的訂閱清掉總線里還留著上一份回調(diào)。改法是訂閱時(shí)把銷毀函數(shù)返回出來銷毀鉤子里統(tǒng)一調(diào)用并且給總線加一個(gè)按頁面標(biāo)識(shí)批量清理的入口切頁時(shí)兜底清一次。第二個(gè)坑是事件風(fēng)暴。現(xiàn)象是拖動(dòng)畫布連續(xù)選村的時(shí)候圖表被刷新了幾十次接口也發(fā)出了幾十個(gè)請(qǐng)求。根因是每次選擇都立刻拋事件而訂閱者的響應(yīng)里有網(wǎng)絡(luò)請(qǐng)求。改法是在發(fā)布側(cè)做合并兩百毫秒內(nèi)連續(xù)的同類事件只保留最后一次同時(shí)在訂閱側(cè)對(duì)請(qǐng)求做取消新的進(jìn)來時(shí)把上一個(gè)未完成的取消掉。第三個(gè)坑是同步派發(fā)阻塞渲染?，F(xiàn)象是點(diǎn)位高亮比圖表刷新慢半拍點(diǎn)下去要過三四百毫秒才變色。根因是事件用同步方式逐個(gè)調(diào)用訂閱者訂閱者里又有同步計(jì)算主線程被占滿。改法是把派發(fā)改成微任務(wù)先把高亮和交互狀態(tài)更新完再批量執(zhí)行訂閱者的邏輯計(jì)算量大的訂閱者自己往下一幀放。七、解耦之外的兩件事事件總線解決的是解耦解決不了數(shù)據(jù)的一致性。三張圖分別向不同接口取數(shù)取到的時(shí)刻不一樣用戶看到的就是三個(gè)人口數(shù)的短暫時(shí)差。這是異步取數(shù)本身的特性我們只能把同一屏用到的數(shù)據(jù)合成一次請(qǐng)求來減少時(shí)間差不能消除它。它也管不了誰該響應(yīng)。事件是廣播的任何訂閱者都能聽如果沒有約定新來的同事可能給一個(gè)與它無關(guān)的事件掛上訂閱短期內(nèi)看不出問題出了問題也很難歸因所以約定和評(píng)審比總線本身更要緊。八、每塊大屏都靠這套總線串起來現(xiàn)在這套總線在開發(fā)上的好處是加一塊圖表不用去動(dòng)地圖那塊代碼。新組件在掛載時(shí)聲明自己關(guān)心哪個(gè)事件取到載荷自己去拿數(shù)據(jù)刪掉它的時(shí)候別人也不受影響改動(dòng)的范圍被壓在一個(gè)文件里。現(xiàn)在萬村樂數(shù)字鄉(xiāng)村的每塊大屏都靠這套事件總線串起來最復(fù)雜的一屏掛了十四個(gè)組件。約定那一頁紙從寫完到現(xiàn)在沒改過倒是新組件一直在往里加。