大家好，我卡頌。

最近我們技術(shù)群發(fā)生個(gè)事兒，我覺(jué)得還挺有代表性的。有時(shí)候，技術(shù)問(wèn)題的最優(yōu)解并不是從技術(shù)考慮。

對(duì)于工作時(shí)間不長(zhǎng)的程序員，這篇文章可能對(duì)你有幫助。

事情起因

事情起因是一位同學(xué)在群里問(wèn)：“怎么獲取react element對(duì)應(yīng)dom中的文本？”

為什么想獲取文本內(nèi)容呢，原來(lái)他是想做「交互的打點(diǎn)上報(bào)功能」。

他希望這個(gè)打點(diǎn)上報(bào)功能是完全自動(dòng)化、業(yè)務(wù)無(wú)感知的。但這里存在一個(gè)悖論：如果打點(diǎn)上報(bào)是“業(yè)務(wù)無(wú)感知的”，那打點(diǎn)功能肯定要和業(yè)務(wù)解耦。既然和業(yè)務(wù)解耦，就無(wú)法記錄“業(yè)務(wù)的完整操作鏈路”。

那么類似“用戶點(diǎn)擊了一個(gè)按鈕，我想知道這個(gè)按鈕是否在對(duì)話框中，如果在，取出對(duì)話框的標(biāo)題上報(bào)”就無(wú)法實(shí)現(xiàn)。

想一想，如果是你，會(huì)怎么實(shí)現(xiàn)這個(gè)功能呢？

功能實(shí)現(xiàn)

這位同學(xué)的做法是 —— 梳理現(xiàn)有業(yè)務(wù)邏輯中的組件層級(jí)，從特定的層級(jí)里拿數(shù)據(jù)。

比如Modal組件的標(biāo)題渲染成HTML是：

<div>
  <h1>這里是標(biāo)題</h1>
</div>

那么他會(huì)按div -> h1這樣的層級(jí)結(jié)構(gòu)取標(biāo)題數(shù)據(jù)。具體實(shí)現(xiàn)還涉及很多hack的方法。

比如，組件沒(méi)有掛載時(shí)如何獲取數(shù)據(jù)？他通過(guò)把組件掛載在一個(gè)離屏DOM上，再分析他：

function analyzeCpn(node: ReactNode) {
  const div = document.createElement('div');
  const root = reactDOM.createRoot(div);
  flushSync(() => root.render(node));
  // ...分析 div.innerHTML
}

再比如，如何根據(jù)DOM不同，增加一些特殊的屬性呢？可以覆寫jsx、React.createElement方法。

問(wèn)題

這么實(shí)現(xiàn)，當(dāng)前項(xiàng)目確實(shí)沒(méi)問(wèn)題。但有個(gè)很現(xiàn)實(shí)的問(wèn)題：隨著業(yè)務(wù)不斷迭代，如果哪天組件結(jié)構(gòu)變了，按以往結(jié)構(gòu)獲取數(shù)據(jù)就會(huì)失敗，難道我還得跟著業(yè)務(wù)一起改打點(diǎn)上報(bào)代碼么？

一個(gè)打點(diǎn)上報(bào)功能硬生生開(kāi)發(fā)成了爬蟲(chóng)功能。

但是，這位同學(xué)并不覺(jué)得這有問(wèn)題。從他的回答看，他的思想是 —— 技術(shù)問(wèn)題就應(yīng)該交給技術(shù)解決。

實(shí)際上有時(shí)候，技術(shù)問(wèn)題的最優(yōu)解并不是從技術(shù)考慮。就像遇到產(chǎn)品的不合理需求，我們首先思考的，不應(yīng)該是“如何實(shí)現(xiàn)他”，而是“從哪個(gè)角度把需求懟回去”。

就本文的例子來(lái)說(shuō)，一種合理的解決方式是：

• 調(diào)研一下主流打點(diǎn)上報(bào)庫(kù)的實(shí)現(xiàn)邏輯。
• 調(diào)研完畢后和領(lǐng)導(dǎo)溝通。
• 溝通好后讓領(lǐng)導(dǎo)拉個(gè)會(huì)，會(huì)上把你的方案跟大家同步一下，讓大家知道上報(bào)方案如何實(shí)現(xiàn)。
• 各個(gè)業(yè)務(wù)同學(xué)認(rèn)領(lǐng)自己那部分的打點(diǎn)上報(bào)需求，遇到技術(shù)問(wèn)題和你溝通，你輔助解決。

總結(jié)

作為搞通用服務(wù)的同學(xué)，要接近業(yè)務(wù)，又不能讓自己陷入業(yè)務(wù)。

回到本文的例子，如果你替業(yè)務(wù)同學(xué)實(shí)現(xiàn)了業(yè)務(wù)邏輯打點(diǎn)上報(bào)還不知會(huì)他們。未來(lái)業(yè)務(wù)需求變化導(dǎo)致代碼變化后，打點(diǎn)上報(bào)有誤，這是誰(shuí)的鍋呢？

業(yè)務(wù)同學(xué)會(huì)說(shuō)：我根本不知道打點(diǎn)這回事兒啊。

到時(shí)候你就欲哭無(wú)淚了。

所以，明確自己的工作職責(zé)，做好向上管理，不是所有技術(shù)問(wèn)題都得靠技術(shù)解決。