筆者是一個平平無奇的前端打工人，沒有參與過啥熱門開源項目的共建，所以每次說自己熱愛開源都很心虛，充其量就是熱愛使用開源項目，不過這兩年來也陸續(xù)做了幾個小項目，雖然只有時不時的來幾個star，不過也給我安靜的github平添了幾分人氣，本文就給大家推薦一下筆者的開源項目，如果覺得可以歡迎給個關(guān)注~
豆瓣api
名稱：douban_api
簡介：豆瓣api服務(wù)
地址：https://github.com/wanglin2/douban_api
star：109、fork：23
這個項目算是筆者最早上傳到github上的項目了，起因是筆者做了一個電子書網(wǎng)站，需要錄入書籍，最開始是手動去豆瓣搜索，然后復(fù)制粘貼書籍信息，不僅累，而且效率很低，于是用豆瓣官方的api做了個搜索的功能，然后一鍵填充，大大解放了筆者的雙手，不過好景不長，很快豆瓣官方的api下線了，并且再也沒有上線。
習(xí)慣了一鍵填充的筆者是再也回不去手動復(fù)制粘貼的日子了，于是就做了這個小項目。
這個項目實現(xiàn)也很簡單，因為豆瓣的網(wǎng)頁都是后端直出的，所以通過PhantomJS無頭瀏覽器來爬取豆瓣相關(guān)頁面，然后再使用cheerio來解析頁面結(jié)構(gòu)，獲取到相關(guān)DOM節(jié)點的數(shù)據(jù)通過json數(shù)據(jù)返回即可，最大的缺點是很慢。
這個項目是三年前上傳的，因為后期筆者的電子書網(wǎng)站基本不維護了，所以這個項目也沒有再維護過，不過時不時的一個star也讓它成了筆者第一個突破100個star的項目，另外這個項目現(xiàn)在也是可以正常運行的，足以說明這么多年豆瓣的網(wǎng)頁版基本沒有改動過。
markjs（標(biāo)注庫）
名稱：markjs
簡介：一個插件化的多邊形標(biāo)注庫
地址：https://github.com/wanglin2/markjs
star：29、fork：11
這個項目是一個框架無關(guān)的庫，主要功能就是用來手動繪制多邊形，一般用于在圖片上進行標(biāo)注：
這個項目來源于工作上的需求，記得那時剛?cè)肼毿鹿静痪?，就來了一個要在圖片上繪制多邊形的需求，這種顯然是要用svg或canvas來實現(xiàn)，雖然這兩個東西之前基本都沒有用過，不過因為對canvas稍微有過一點了解，于是果斷選擇使用canvas。
最開始完全沒有考慮復(fù)用性，直接和業(yè)務(wù)代碼耦合在一起，不過隨著需求的反復(fù)變動，從單純的畫一個多邊形到需要可編輯、到需要可以繪制多個多邊形、再到一會要支持編輯一個多邊形的時候隱藏其他多邊形一會又不需要隱藏，于是筆者一氣之下就決定單獨做成一個庫，通過配置化支持所有這些需求，另外因為當(dāng)時受各種插件化思想的影響，于是也把各個相對獨立的功能做成了一個個插件，按需注冊使用，不過最終的實現(xiàn)上有點問題，如果在一個頁面上同時創(chuàng)建多個實例，插件注冊會在所有實例上生效。
做這個項目的過程中也有一些小收獲，一個是解決了自己之前的一個疑惑，怎么判斷鼠標(biāo)是否點擊到了一個多邊形，實現(xiàn)其實就是繪制和多邊形同樣的路徑，然后通過isPointInPath()方法來判斷一個點是否在當(dāng)前路徑中；另一個是使用一些簡單的數(shù)學(xué)知識實現(xiàn)了一些有意思的小功能，比如判斷線段交叉、吸附功能等。
mind-map（思維導(dǎo)圖）
名稱：mind-map
簡介：一個web思維導(dǎo)圖的實現(xiàn)
地址：https://github.com/wanglin2/mind-map
star：68、fork：18
這個項目的起因比較迷惑，筆者已經(jīng)有點記不清了，應(yīng)該是筆者在使用百度腦圖的時候意外發(fā)現(xiàn)了它是開源的，然后就準(zhǔn)備看看它的源碼，但是發(fā)現(xiàn)這個項目已經(jīng)4年多沒更新了，并且代碼的組織方式筆者不是很喜歡，重要的是看不懂，另外也發(fā)現(xiàn)市面上有很多在線的思維導(dǎo)圖產(chǎn)品，還要收費，筆者很震驚，覺得這有什么難的，于是就決定自己做一個開源版的，讓所有人都能用上免費的思維導(dǎo)圖~~~
理想很美好，水平很慚愧，確實很難，難點主要有二：
1.性能問題，節(jié)點少的情況下很完美，但是節(jié)點多了就變得卡頓，尤其是多選的情況下，應(yīng)該跟節(jié)點布局的實現(xiàn)算法有關(guān)，雖然每次重新渲染加上了分批渲染的優(yōu)化，但也只是治標(biāo)不治本。另外因為這些對性能的優(yōu)化，導(dǎo)致代碼的實現(xiàn)上也變得比較亂。
2.筆者能力有限，沒有實現(xiàn)魚骨圖，這應(yīng)該是實現(xiàn)思路不對，目前都是單獨思考每種結(jié)構(gòu)的圖形實現(xiàn)，沒有從一個更高的層次來思考，如果把每個小結(jié)構(gòu)都拆分出來單獨實現(xiàn)，再來進行組合，這樣可能更容易實現(xiàn)。
tiny_whiteboard（白板）
名稱：tiny_whiteboard
簡介：一個在線小白板，類似excalidraw
地址：https://github.com/wanglin2/tiny_whiteboard
star：38、fork：10
筆者之前寫文章畫圖用的是一個在線的手繪風(fēng)格白板excalidraw，功能很強大，用著用著就會想自己也實現(xiàn)一下，最開始并沒有打算做一個完整的項目，只是想以一個矩形的繪制、拖動、旋轉(zhuǎn)、伸縮為題來寫一篇小文章，但是寫著寫著，發(fā)現(xiàn)就算只是實現(xiàn)這幾個功能代碼量就挺大的，而且既然已經(jīng)實現(xiàn)了矩形的全生命周期，那不如再順便加一下圓形、折線、文字、圖片什么的，就這樣，參照excalidraw的功能就完成了這個項目。
這個庫也是框架無關(guān)的，畢竟現(xiàn)在react和vue兩個框架基本可能大概平分天下，所以不依賴特定框架是最好的。
這個小項目實現(xiàn)了白板的一些基本功能，但是也有一些很明顯的缺陷：
1.因為圖形的點擊檢測是依賴于兩點之間的距離以及點到直線的距離來實現(xiàn)的，所以不支持貝塞爾曲線或橢圓之類的圖形，因為無法知道它們的每一個點，所以也就無法進行檢測。
2.選中多個圖形，同時進行旋轉(zhuǎn)，目前沒有思考出很好的實現(xiàn)方式，像是自由書寫和折線這些圖形是沒有問題的，因為旋轉(zhuǎn)就是旋轉(zhuǎn)構(gòu)成它們的每一個點，但是其他圖形的渲染不是通過一個個點，而是通過位置寬高之類的共同確定的，所以沒辦法旋轉(zhuǎn)圖形上的點。
3.不支持鏡像，這個在最初的設(shè)計時沒有考慮到，導(dǎo)致后期想實現(xiàn)也很困難。
code-run（代碼在線運行工具）
名稱：code-run
簡介：一個代碼在線編輯預(yù)覽工具，類似codepen、jsbin、jsfiddle等
地址：https://github.com/wanglin2/code-run
star：186、fork：62
這個項目是筆者star數(shù)量最多的一個項目了，它是一個類似CodePen的前端代碼在線運行工具，基于Vue3.x版本。
筆者所在公司內(nèi)部最開始有一個基于codepan這個開源項目部署的一個內(nèi)網(wǎng)使用版，但是它的界面實在是太丑了，而且功能簡陋的可憐，而CodePen就要好的多，但是人家是商業(yè)產(chǎn)品，也不開源，于是筆者就決定參考CodePen來做一個開源版的。
整體實現(xiàn)是比較清晰的，單獨編輯html、js、css三部分代碼，然后組裝成一個完整的html結(jié)構(gòu)，最后通過iframe的srcdoc屬性傳入這個html字符串進行預(yù)覽。
頁面布局上基本還原了CodePen，支持切換結(jié)構(gòu)，而且支持的結(jié)構(gòu)比CodePen多。
代碼編輯器沒有使用CodeMirror，而是選擇Monaco Editor，因為它很強大，畢竟是和VSCode同源的，開箱自帶代碼輸入提示，缺點是很復(fù)雜很龐大，文檔對于筆者來說著實是太簡陋了，使用起來比較困難。不過筆者在一番折騰下成功支持移植VSCode的主題，所以在顏值方面還是很能打的，慚愧，筆者就是一個十分看中外表的人，做什么都愛做主題。
支持編輯的代碼語言上除了基礎(chǔ)的html、js、css外，通過各種預(yù)處理語言、擴展語言的官方編譯工具來支持諸如Pug、Less、TypeScript等的輸入。
最后就是對于Vue單文件的特別支持，因為筆者就很喜歡通過Vue單文件來寫demo，所以直接支持Vue單文件的編輯就很方便了。
當(dāng)然，其他還有很多有意思的小功能，有興趣的可以自行體驗~
目前這個項目也在筆者公司內(nèi)部成功淘汰了之前的工具。
總結(jié)
以上就是筆者開源的幾個小項目了，坦率的說，除了code-run比較成熟外，其他的幾個坑都很多，并不推薦在實際項目上使用，不過對于簡單的使用場景還是能勝任的，就像tiny_whiteboard目前已經(jīng)是筆者的官方畫圖工具了哈哈哈（自己做的，流著淚也要用）。
