技術(shù)都是服務(wù)于業(yè)務(wù)的，技術(shù)的復(fù)雜度其實(shí)都來源于業(yè)務(wù)的復(fù)雜度。任何看上去簡單的技術(shù)，要么是其對(duì)應(yīng)的業(yè)務(wù)本就沒什么復(fù)雜的，要么是有人替你把背后復(fù)雜的問題處理好了。

個(gè)人經(jīng)手過幾個(gè)富交互的應(yīng)用，深有體會(huì)，很多用起來覺得「這有什么」的功能，背后都隱藏著大量不為人所知的復(fù)雜。

舉個(gè)例子，算不上極高吧，但也是一個(gè)容易被低估的功能——評(píng)論列表。反正我經(jīng)手的上一個(gè)評(píng)論列表做了一個(gè)人月……

需求大致如下：一個(gè)面向?qū)I(yè)攝影師、視頻工作室等創(chuàng)意類團(tuán)隊(duì)的產(chǎn)品，提供素材預(yù)覽功能的同時(shí)，支持評(píng)論校審，還能支持一些常見的圈點(diǎn)（類似截圖之后畫個(gè)框之類的）。

首先要有基本的CRUD功能（廢話）

設(shè)計(jì)師不想分頁，覺得體驗(yàn)不好，但長列表依然需要優(yōu)化，那么虛擬列表走起。

評(píng)論包含狀態(tài)（校審中、重制中、已完成、……），要能篩選，但設(shè)計(jì)師不接受接口查詢的延遲，希望能即時(shí)反饋，所以不能「點(diǎn)擊加載更多」，那就只能前端篩選。

評(píng)論和圈點(diǎn)有關(guān)聯(lián)，希望點(diǎn)擊時(shí)候能聯(lián)動(dòng)，點(diǎn)擊評(píng)論（如果有圈點(diǎn)）要能高亮一下對(duì)應(yīng)的圈點(diǎn)，反之，點(diǎn)擊圈點(diǎn)要能滾動(dòng)到對(duì)應(yīng)的評(píng)論。那么除了數(shù)據(jù)上的關(guān)聯(lián)，還要各種DOM操作、滾動(dòng)計(jì)算。

輸入內(nèi)容時(shí)，可以艾特成員；艾特時(shí)要有選人的Dropdown，被艾特的人要收到通知，退格鍵刪除時(shí)候如果遇到艾特的部分，要能刪除整個(gè)而不只是一個(gè)字符，方向鍵要能跨過去，選中的時(shí)候要能整個(gè)選中。那么自定義Dropdown走起、字符串檢測走起、光標(biāo)操作走起、通知服務(wù)走起。

收到通知的成員，點(diǎn)擊通知中的鏈接，要能跳到對(duì)應(yīng)評(píng)論處，并高亮顯示相關(guān)內(nèi)容。那么URL設(shè)計(jì)、滾動(dòng)計(jì)算、各種異步流控制。

輸入過程中，鼠標(biāo)移出去做一些特定操作的時(shí)候，光標(biāo)要能停在輸入框原本的位置，不能失焦（技術(shù)上必然會(huì)失焦，只是事后立即又定位回來，做到視覺上的不失焦），但點(diǎn)擊“頁面空白處”要能正常失焦。那么鼠標(biāo)事件流走起，冒泡路徑管理、焦點(diǎn)位置計(jì)算。

評(píng)論輸了一半，頁面關(guān)掉了，下次回來要還能繼續(xù)編輯，而且不只是最后一次的，要每一條都記錄自己的內(nèi)容。緩存管理走起。

評(píng)論的發(fā)布、刪除、編輯、改狀態(tài)、……都要快，不要卡一下（就是等接口響應(yīng)）。那么樂觀更新走起。

評(píng)論得要是實(shí)時(shí)的，這邊發(fā)完那邊頁面上立即就能顯示，類似IM的感覺。那么Websocket走起。

能夠把「富交互」的操作實(shí)現(xiàn)得符合人類的直覺，讓使用者感受不到計(jì)算的存在，覺得「就應(yīng)該是這樣」，并且能夠完善地處理好使用者大概率不會(huì)遇到（甚至不會(huì)意識(shí)到）的異常場景，本身就是一個(gè)大工程。

很多團(tuán)隊(duì)在面對(duì)這類問題的時(shí)候，都會(huì)在「設(shè)計(jì)驅(qū)動(dòng)」和「技術(shù)驅(qū)動(dòng)」之間扯皮，最后以「先可用，再能用」為結(jié)論，把問題劃進(jìn)「有時(shí)間再說」的類別里，從此塵封。愿意堅(jiān)持把好設(shè)計(jì)落地的團(tuán)隊(duì)，屈指可數(shù)。我們不缺好設(shè)計(jì)，Dribble上有那么多令人驚嘆的好設(shè)計(jì)，但卻很少有團(tuán)隊(duì)愿意花時(shí)間去把這些好設(shè)計(jì)給落地。

國內(nèi)的風(fēng)氣比較注重兩種發(fā)展方向，工程領(lǐng)域和科研領(lǐng)域，大部分偏業(yè)務(wù)的高級(jí)前端都屬于前者，少數(shù)屬于后者，會(huì)在某個(gè)技術(shù)領(lǐng)域深究去造輪子。在一個(gè)凡事都要乘以14億的環(huán)境中，這種思想占據(jù)主流非常正常，畢竟前者是最直接的生產(chǎn)力，后者則是對(duì)未來的投資。

但設(shè)計(jì)的重要性同樣不容忽視。我們討厭廣告，但不討厭優(yōu)秀的廣告；都知道PS很強(qiáng)大，但更多的人選擇美顏相機(jī)。我們不缺好的設(shè)計(jì)，也不是完全沒有審美，但我們需要更多愿意把好設(shè)計(jì)落地的人，來讓這個(gè)世界擁有更多美好的事物。只有良幣自身足夠堅(jiān)挺，才不會(huì)輕易地被劣幣驅(qū)逐。

希望能有更多的人，能夠站在科技與人文的十字路口去看問題。這是當(dāng)前時(shí)代背景下，一個(gè)非常有價(jià)值，很多人都知道，卻依然非?？諘绲牡胤?。

還有些其它相關(guān)的領(lǐng)域，體驗(yàn)過就知道有多不容易了。

嘗試自己實(shí)現(xiàn)一些通用組件，尤其是Table、Dropdown、VirtualList、DatePicker、Toast之類的，記得還有i18n、主題等定制的能力。

上Dribble找?guī)讉€(gè)能讓你Wow的動(dòng)效，嘗試去實(shí)現(xiàn)一下。

去用一下D3，實(shí)現(xiàn)一些效果。不是讓你去實(shí)現(xiàn)一個(gè)D3，只是用一下。

有個(gè)叫Photopea的網(wǎng)站，是一個(gè)牛人實(shí)現(xiàn)的純前端PS，可以想下怎么實(shí)現(xiàn)的。類似的還有Web版的AutoCAD