把游戲里面的 UI 做成前端組件庫(kù)會(huì)怎么樣？

在研究生的時(shí)候用 Vue2.0 做過(guò)一個(gè)守望先鋒UI庫(kù)。

當(dāng)時(shí)很沉迷《守望先鋒》，有一天突發(fā)奇想：我要把游戲里面的 UI 做成前端組件庫(kù)會(huì)怎么樣？ 然后就一步步開(kāi)始做了，最后也算把它給實(shí)現(xiàn)了。

• Overwatch UI 官網(wǎng)
• Github: overwatch-ui

當(dāng)然，純靠個(gè)人寫(xiě)是很難的，所以在實(shí)現(xiàn)過(guò)程中也看了不少博客、文章、視頻。

唉，時(shí)間過(guò)得真快，算下來(lái)已經(jīng)過(guò)去快3年了。當(dāng)時(shí)只是想發(fā)在 v2ex 上騙騙贊，今天正好看到這個(gè)話題就來(lái)分享一下做這個(gè)組件庫(kù)的心得吧，希望可以給你一點(diǎn)靈感~

調(diào)研

首先，第一步，F(xiàn)irst of all，要想清楚自己的組件庫(kù)是用來(lái)干嘛的。程序員最怕需求不明確，然而自己造輪子的時(shí)候也經(jīng)常犯同樣的毛病。

一般來(lái)說(shuō)，造輪子無(wú)非就幾個(gè)目的：

• 裝個(gè)逼，寫(xiě)簡(jiǎn)歷。由于面試持續(xù)內(nèi)卷，沒(méi)造過(guò)輪子的都不好意思說(shuō)自己是前端了。
• 解決問(wèn)題。發(fā)現(xiàn)市面上的不好用，自己寫(xiě)一個(gè)。
• 為了好玩。我就是這一類，誒，就是玩兒。

有人說(shuō)：我就造個(gè)輪子呀。那就要想想市面上有沒(méi)有現(xiàn)成的輪子，現(xiàn)成的輪子有沒(méi)有解決你當(dāng)前面臨的問(wèn)題？

到這，很多人就開(kāi)始打退堂鼓了：唉，別人都實(shí)現(xiàn)了，我還是回去打游戲吧。這是因?yàn)槟氵€沒(méi)有用透這個(gè)工具，也沒(méi)有看過(guò)源碼才會(huì)這么想的。其實(shí)所有的項(xiàng)目多少都會(huì)有瑕疵的，不管有多少個(gè) Star，都會(huì)有無(wú)窮無(wú)盡的 Issue 等著處理。你只需要解決其中一個(gè)點(diǎn)就好了，不多，就一個(gè)點(diǎn)就行了。

當(dāng)時(shí)的我是受了 codepen 一個(gè)項(xiàng)目的靈感想到要做這個(gè) UI 庫(kù)的，而且當(dāng)時(shí)市面上也沒(méi)有以游戲風(fēng)格為主的前端 UI 庫(kù)，好正可以填補(bǔ)一個(gè)空缺。

要說(shuō)我的 UI 庫(kù)有沒(méi)有用，我覺(jué)得是鬼用都木有哇，僅僅是想看看實(shí)現(xiàn)出來(lái)是怎么樣的。誒，就是玩兒~

代碼

打鐵還需自身硬，平常寫(xiě)業(yè)務(wù)時(shí)，就多練習(xí)組件的封裝能力嘍。不強(qiáng)求啥都封裝成輪子，至少在 API 的使用層面和市面上的組件庫(kù)提供的 API 差不多就可以了。

除此之外，CSS 的功底也需要硬。CSS 的兼容性真的會(huì)逼瘋一個(gè)人：自己測(cè)試好好的，一旦放到某些環(huán)境下樣式就直接飛了。這個(gè)我是真有體會(huì)，平常寫(xiě)管理后臺(tái)嘛，Ant Design 一把梭，<Button/> 一放完事了，很少遇到奇葩的 CSS 布局。

然而組件庫(kù)的要求就是要所有環(huán)境下 CSS 的樣式要保持一致。

抄襲/創(chuàng)新

以前一提到造輪子，大家都覺(jué)得牛逼，但是到了 1202 年再提起造輪子，大家更多的是惶恐：求求你別“發(fā)明”輪子了！正是因?yàn)榍捌诤芏嗳恕鞍l(fā)明”了一堆奇奇怪怪的輪子，導(dǎo)致后來(lái)者用得苦不堪言。

可以先拿 80% 模仿市面上的實(shí)現(xiàn)和 API 設(shè)計(jì)，再留 20% 給創(chuàng)新。千萬(wàn)別自己“發(fā)明”輪子。過(guò)于奇怪的創(chuàng)新會(huì)顯得不倫不類， 不僅給使用者造成很大的心智負(fù)擔(dān)，而且使用的人也不信任你的輪子。 使用者會(huì)這么想：這都什么陰間用法，怕不是有坑，算了還是用 Ant Design 吧。

再來(lái)說(shuō)一點(diǎn)：很多程序員都下不去手抄襲別人的作品。我也不推薦做真實(shí)產(chǎn)品時(shí)，像素級(jí)地抄襲。我給的建議是先“抄襲式”地實(shí)現(xiàn)基礎(chǔ)功能，基礎(chǔ)東西市面上大家伙們的實(shí)現(xiàn)都差不多，比如按鈕大家都 border-radius: 4px，就別整 7px。關(guān)鍵在于有那么一丟丟創(chuàng)新出來(lái)就可以了。

說(shuō)回我的那個(gè) UI 庫(kù)，非常慚愧，實(shí)現(xiàn)和 API 設(shè)計(jì)抄 Ant Design，UI 抄守望先鋒，只是我的 idea 算比較創(chuàng)新，至少那個(gè)時(shí)候沒(méi)人這么做過(guò)，我覺(jué)得這就是創(chuàng)新了。

審美

大家都是做前端的，都是外貌者協(xié)會(huì)會(huì)長(zhǎng)，沒(méi)有好看的皮膚幾乎沒(méi)有會(huì)看下去的。

現(xiàn)在看我的 UI 庫(kù)的 CSS 也寫(xiě)得一般般，不過(guò)好在我用“游戲皮膚”這個(gè)噱頭可以轉(zhuǎn)移一部分注意力，算比較雞賊吧。

審美這東西說(shuō)難也難，說(shuō)容易也容易。容易的地方在于：放眼望去，國(guó)內(nèi)的 UI 庫(kù)的樣式幾乎差不多，以小清新為主，國(guó)外則是以 Material 風(fēng)格為主，大家你抄我我抄你。難的地方在于沒(méi)法突破這樣的審美：你的組件庫(kù)和 Ant Design 差不多的，我為什么不用 Ant Design 呢？

找樣式靈感可以多看看下面兩個(gè)網(wǎng)站

• dribbble 應(yīng)該很多人都聽(tīng)說(shuō)過(guò)了，里面有很多優(yōu)秀的設(shè)計(jì)稿
• behance 和上面的 dribbble 差不多，也有很多好看的設(shè)計(jì)稿
• lottiefiles 這是我最近才發(fā)現(xiàn)的，雖然這是個(gè) lottie 文件市場(chǎng)，但是上面好看的設(shè)計(jì)也可以給很多創(chuàng)作的靈感

平常有空就多逛逛這幾個(gè)網(wǎng)站，找找靈感。

測(cè)試

無(wú)測(cè)試，無(wú)下載量。 做業(yè)務(wù)的時(shí)候幾本沒(méi)人寫(xiě)測(cè)試，一個(gè)是沒(méi)時(shí)間，另一方面是功能一迭代，所有測(cè)試代碼全部重寫(xiě)，導(dǎo)致很多業(yè)務(wù)都是人工點(diǎn)點(diǎn)點(diǎn)來(lái)測(cè)試。

但是寫(xiě)庫(kù)就不一樣了，自動(dòng)化測(cè)試是個(gè)必須項(xiàng)。不管你的輪子解決了什么高級(jí)問(wèn)題，只要沒(méi)有測(cè)試覆蓋，那幾乎是沒(méi)人用你的代碼的。而且組件庫(kù)的代碼基本都不變的，所以不用擔(dān)心一迭代就推到重來(lái)。

哦，要寫(xiě)測(cè)試呀，那就學(xué)一下 Jest 嘍。但是真實(shí)的前端組件單測(cè)并不就是

expect(1 + 1).toEquals(2)

這么簡(jiǎn)單了。個(gè)人認(rèn)為前端測(cè)試是所有技術(shù)里測(cè)試最難寫(xiě)的，太多東西要 Mock 了，一個(gè)東西沒(méi) Mock 好，抱歉，failed。除了簡(jiǎn)單的 assertion 操作，還要懂很多的 Mock 操作，比如瀏覽器的 Mock，異步 timer 的 Mock。這些對(duì)于沒(méi)寫(xiě)過(guò)單測(cè)的新人來(lái)說(shuō)簡(jiǎn)直比登天還難。

當(dāng)時(shí)剛上手前端組件單測(cè)的時(shí)候，真的非常痛苦，調(diào)了好幾天了，就是 failed, failed, failed！終于有一天調(diào)好了 Mock 環(huán)境，看到終端 success 的那一刻都要哭出來(lái)了！

測(cè)試能力可以先從 utils 工具函數(shù)的單測(cè)開(kāi)始練習(xí)，然后過(guò)渡到組件 props 的測(cè)試，比如 props 有沒(méi)有傳過(guò)來(lái)啦，onClick 有沒(méi)有被調(diào)用啦之類的，再之后練習(xí)一下異步函數(shù)的測(cè)試和 Mock 一些特殊環(huán)境，最后在 Travis 上搞個(gè)自動(dòng)化測(cè)試。

發(fā)布

這一步也是很多人第一次寫(xiě)庫(kù)會(huì)遇到的大難題：沒(méi)日沒(méi)夜終于把功能實(shí)現(xiàn)了，到了發(fā)布最后一步拉稀了。

我自己也很討厭這一步：我都這么辛苦寫(xiě)代碼了，還要自己去調(diào)流水線。而且這玩意和上面單測(cè)一樣，一個(gè)不行，全部涼涼。

發(fā)布一塊只能多看關(guān)于 npm 的發(fā)布流程的文章，npm publish，打 tag，自動(dòng)更新版本號(hào)之類的，本地測(cè)試要熟悉 npm link 這些命令。現(xiàn)在 Github 上也有很多 repo 有自己的流水線，可以多參考別人的部署和發(fā)布流程，看到好用的先搬過(guò)來(lái)，再改改效率會(huì)比較高。

這一步我也沒(méi)做太好，主要也沒(méi)想過(guò)這個(gè)庫(kù)別人會(huì)用，所以只有自動(dòng)化測(cè)試一個(gè) pipline，發(fā)布還是直接走 npm run release 命令，真就裸奔發(fā)布。

README（文案）

README 是所有 repo 的海報(bào)，一定要寫(xiě)的美美的！想想自己在選 VsCode 插件時(shí)，多少次就因?yàn)橐粋€(gè)好看的 Logo，或者一份易讀的 README 就選擇那個(gè)插件了？README 的重要性不言而喻。

README 能精簡(jiǎn)就精簡(jiǎn)，切忌弄成 redux 文檔那樣前因后果解釋一遍，說(shuō)完背景，說(shuō)概念，說(shuō)完概念說(shuō)第三方工具，蛋疼。

少點(diǎn)文字，多用圖、Gif、代碼來(lái)秀出你的 UI 組件庫(kù)吧！

分享一下我寫(xiě) README 的套路：

• 標(biāo)題
• 產(chǎn)品圖、Logo
• 是什么（1~2句話），加上官網(wǎng)（哪怕只是個(gè)靜態(tài)網(wǎng)頁(yè)也好過(guò)沒(méi)有）
• 解決了什么問(wèn)題（1~2句話）
• 怎么用（帶簡(jiǎn)單代碼 Demo，最好有 CodeSandbox，CodePen 動(dòng)態(tài)的 Demo）+ 效果圖片/Gif動(dòng)圖或者視頻最佳
• 更多高級(jí)用法（一般到這沒(méi)人有耐心看下去了）
• Future/為什么做這個(gè)東西（一些個(gè)人凡爾賽的廢話） README 對(duì)于所有的庫(kù)來(lái)說(shuō)是很重要的一步，不亞于組件庫(kù)的功能實(shí)現(xiàn)，不要總想著寫(xiě)完代碼、收工、回家、打游戲去了。排面你得支棱起來(lái)啊。

宣傳

如果說(shuō)文案能力已經(jīng)是重要一步，那么宣傳能力就是爆炸重要的一步了。

再香的酒也怕巷子深。分享一下我自己的宣傳渠道吧，其實(shí)也沒(méi)那么復(fù)雜：

第一步去 v2ex.com 發(fā)一波帖子，先試試水收集一下反饋。這網(wǎng)站上面的人一般不是小白選手，你的那些想法騙不了任何人，幾乎沒(méi)人會(huì)嘴下留情的，所以這也是反饋?zhàn)钫鎸?shí)的論壇，發(fā)完后看看反饋如何。如果被噴了，說(shuō)明你的輪子還不行，有待提高，如果有人提出更好的解決方案，說(shuō)明你的輪子沒(méi)亮點(diǎn)。假如有人點(diǎn)贊了，那可以進(jìn)一步推廣了。

第二步去知乎、掘金之類的技術(shù)論壇里發(fā)帖嘍，大概的意思就是自己做了個(gè)輪子之類的。發(fā)貼也不要這么蒼白：“我做了個(gè)XXX”就完了，很無(wú)聊。多學(xué)習(xí)一下 B 站何同學(xué)的視頻，整個(gè)故事，一波三折，或者加一些技術(shù)前遙：比如做守望UI庫(kù)是因?yàn)槲彝嬗螒虻臅r(shí)候突發(fā)奇想地想到了這個(gè)點(diǎn)子，要說(shuō)真的玩游戲的想的么？也不是，想法其實(shí)很早就有了，只是有一天玩游戲的時(shí)候決定將這個(gè)想法落地和實(shí)現(xiàn)。

第三步，終極殺手锏，就是去阮一峰的《技術(shù)愛(ài)好者周刊》去投稿，如果被推薦，而且你的輪子也有實(shí)力來(lái)托住這樣的推薦，那么你的 Star 數(shù)一定不會(huì)令你失望的。

ruanyf/weekly

最后

如果真要實(shí)現(xiàn)好一個(gè)組件庫(kù)，就不應(yīng)該僅僅把它看成一個(gè)組件庫(kù)，而是看成一個(gè)產(chǎn)品，技術(shù)部分反而沒(méi)那么重要。

當(dāng)然，上面這些東西我自己不是全都弄懂了再去做的，也是一邊寫(xiě)一邊摸索出來(lái)的。無(wú)論你的組件庫(kù)成功了還是失敗了，你都會(huì)有很大的收獲的。享受過(guò)程，而非結(jié)果。

如果有好的想法，Go for it! Just do it!

公眾號(hào)：【寫(xiě)代碼的海怪】，隨緣關(guān)注一下嘍~

參考資料

往期推薦