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