這些年我開源的幾個小項目

語言: CN / TW / HK

theme: v-green

筆者是一個平平無奇的前端打工人,沒有參與過啥熱門開源項目的共建,所以每次説自己熱愛開源都很心虛,充其量就是熱愛使用開源項目,不過這兩年來也陸續做了幾個小項目,雖然只有時不時的來幾個star,不過也給我安靜的github平添了幾分人氣,本文就給大家推薦一下筆者的開源項目,如果覺得可以歡迎給個關注~

豆瓣api

名稱:douban_api

簡介:豆瓣api服務

地址:https://github.com/wanglin2/douban_api

star:109、fork:23

這個項目算是筆者最早上傳到github上的項目了,起因是筆者做了一個電子書網站,需要錄入書籍,最開始是手動去豆瓣搜索,然後複製粘貼書籍信息,不僅累,而且效率很低,於是用豆瓣官方的api做了個搜索的功能,然後一鍵填充,大大解放了筆者的雙手,不過好景不長,很快豆瓣官方的api下線了,並且再也沒有上線。

習慣了一鍵填充的筆者是再也回不去手動複製粘貼的日子了,於是就做了這個小項目。

這個項目實現也很簡單,因為豆瓣的網頁都是後端直出的,所以通過PhantomJS無頭瀏覽器來爬取豆瓣相關頁面,然後再使用cheerio來解析頁面結構,獲取到相關DOM節點的數據通過json數據返回即可,最大的缺點是很慢。

這個項目是三年前上傳的,因為後期筆者的電子書網站基本不維護了,所以這個項目也沒有再維護過,不過時不時的一個star也讓它成了筆者第一個突破100star的項目,另外這個項目現在也是可以正常運行的,足以説明這麼多年豆瓣的網頁版基本沒有改動過。

markjs(標註庫)

名稱:markjs

簡介:一個插件化的多邊形標註庫

地址:https://github.com/wanglin2/markjs

star:29、fork:11

這個項目是一個框架無關的庫,主要功能就是用來手動繪製多邊形,一般用於在圖片上進行標註:

這個項目來源於工作上的需求,記得那時剛入職新公司不久,就來了一個要在圖片上繪製多邊形的需求,這種顯然是要用svgcanvas來實現,雖然這兩個東西之前基本都沒有用過,不過因為對canvas稍微有過一點了解,於是果斷選擇使用canvas

最開始完全沒有考慮複用性,直接和業務代碼耦合在一起,不過隨着需求的反覆變動,從單純的畫一個多邊形到需要可編輯、到需要可以繪製多個多邊形、再到一會要支持編輯一個多邊形的時候隱藏其他多邊形一會又不需要隱藏,於是筆者一氣之下就決定單獨做成一個庫,通過配置化支持所有這些需求,另外因為當時受各種插件化思想的影響,於是也把各個相對獨立的功能做成了一個個插件,按需註冊使用,不過最終的實現上有點問題,如果在一個頁面上同時創建多個實例,插件註冊會在所有實例上生效。

做這個項目的過程中也有一些小收穫,一個是解決了自己之前的一個疑惑,怎麼判斷鼠標是否點擊到了一個多邊形,實現其實就是繪製和多邊形同樣的路徑,然後通過isPointInPath()方法來判斷一個點是否在當前路徑中;另一個是使用一些簡單的數學知識實現了一些有意思的小功能,比如判斷線段交叉、吸附功能等。

mind-map(思維導圖)

名稱:mind-map

簡介:一個web思維導圖的實現

地址:https://github.com/wanglin2/mind-map

star:68、fork:18

這個項目的起因比較迷惑,筆者已經有點記不清了,應該是筆者在使用百度腦圖的時候意外發現了它是開源的,然後就準備看看它的源碼,但是發現這個項目已經4年多沒更新了,並且代碼的組織方式筆者不是很喜歡,重要的是看不懂,另外也發現市面上有很多在線的思維導圖產品,還要收費,筆者很震驚,覺得這有什麼難的,於是就決定自己做一個開源版的,讓所有人都能用上免費的思維導圖~~~

理想很美好,水平很慚愧,確實很難,難點主要有二:

1.性能問題,節點少的情況下很完美,但是節點多了就變得卡頓,尤其是多選的情況下,應該跟節點佈局的實現算法有關,雖然每次重新渲染加上了分批渲染的優化,但也只是治標不治本。另外因為這些對性能的優化,導致代碼的實現上也變得比較亂。

2.筆者能力有限,沒有實現魚骨圖,這應該是實現思路不對,目前都是單獨思考每種結構的圖形實現,沒有從一個更高的層次來思考,如果把每個小結構都拆分出來單獨實現,再來進行組合,這樣可能更容易實現。

tiny_whiteboard(白板)

名稱:tiny_whiteboard

簡介:一個在線小白板,類似excalidraw

地址:https://github.com/wanglin2/tiny_whiteboard

star:38、fork:10

筆者之前寫文章畫圖用的是一個在線的手繪風格白板excalidraw,功能很強大,用着用着就會想自己也實現一下,最開始並沒有打算做一個完整的項目,只是想以一個矩形的繪製、拖動、旋轉、伸縮為題來寫一篇小文章,但是寫着寫着,發現就算只是實現這幾個功能代碼量就挺大的,而且既然已經實現了矩形的全生命週期,那不如再順便加一下圓形、折線、文字、圖片什麼的,就這樣,參照excalidraw的功能就完成了這個項目。

這個庫也是框架無關的,畢竟現在reactvue兩個框架基本可能大概平分天下,所以不依賴特定框架是最好的。

這個小項目實現了白板的一些基本功能,但是也有一些很明顯的缺陷:

1.因為圖形的點擊檢測是依賴於兩點之間的距離以及點到直線的距離來實現的,所以不支持貝塞爾曲線或橢圓之類的圖形,因為無法知道它們的每一個點,所以也就無法進行檢測。

2.選中多個圖形,同時進行旋轉,目前沒有思考出很好的實現方式,像是自由書寫和折線這些圖形是沒有問題的,因為旋轉就是旋轉構成它們的每一個點,但是其他圖形的渲染不是通過一個個點,而是通過位置寬高之類的共同確定的,所以沒辦法旋轉圖形上的點。

3.不支持鏡像,這個在最初的設計時沒有考慮到,導致後期想實現也很困難。

code-run(代碼在線運行工具)

名稱:code-run

簡介:一個代碼在線編輯預覽工具,類似codepen、jsbin、jsfiddle等

地址:https://github.com/wanglin2/code-run

star:186、fork:62

這個項目是筆者star數量最多的一個項目了,它是一個類似CodePen的前端代碼在線運行工具,基於Vue3.x版本。

筆者所在公司內部最開始有一個基於codepan這個開源項目部署的一個內網使用版,但是它的界面實在是太醜了,而且功能簡陋的可憐,而CodePen就要好的多,但是人家是商業產品,也不開源,於是筆者就決定參考CodePen來做一個開源版的。

整體實現是比較清晰的,單獨編輯htmljscss三部分代碼,然後組裝成一個完整的html結構,最後通過iframesrcdoc屬性傳入這個html字符串進行預覽。

頁面佈局上基本還原了CodePen,支持切換結構,而且支持的結構比CodePen多。

代碼編輯器沒有使用CodeMirror,而是選擇Monaco Editor,因為它很強大,畢竟是和VSCode同源的,開箱自帶代碼輸入提示,缺點是很複雜很龐大,文檔對於筆者來説着實是太簡陋了,使用起來比較困難。不過筆者在一番折騰下成功支持移植VSCode的主題,所以在顏值方面還是很能打的,慚愧,筆者就是一個十分看中外表的人,做什麼都愛做主題。

支持編輯的代碼語言上除了基礎的htmljscss外,通過各種預處理語言、擴展語言的官方編譯工具來支持諸如PugLessTypeScript等的輸入。

最後就是對於Vue單文件的特別支持,因為筆者就很喜歡通過Vue單文件來寫demo,所以直接支持Vue單文件的編輯就很方便了。

當然,其他還有很多有意思的小功能,有興趣的可以自行體驗~

目前這個項目也在筆者公司內部成功淘汰了之前的工具。

總結

以上就是筆者開源的幾個小項目了,坦率的説,除了code-run比較成熟外,其他的幾個坑都很多,並不推薦在實際項目上使用,不過對於簡單的使用場景還是能勝任的,就像tiny_whiteboard目前已經是筆者的官方畫圖工具了哈哈哈(自己做的,流着淚也要用)。