前端進階：細數2年內我作的15個開源項目

從19年到21年,筆者利用空餘時間陸陸續續作了一些開源項目, 大部分開源項目都立足於企業實際業務需求, 因此筆者以爲有必要作一個總結和覆盤,在覆盤的過程當中但願也能對你們有所幫助.從此筆者的開源項目都會放在這篇文章中,若是想學習的能夠多交流.

1. 基於indexedDB封裝的輕量級緩存庫

github地址: github.com/MrXujiang/x…

學習資料:

徐小夕：瀏覽器緩存庫設計總結

其餘: 支持npm安裝或者umd方式引入(npm用戶名@alex_xu)

2. 基於localStorage封裝的輕量級緩存庫

github地址: github.com/MrXujiang/d…

學習資料: 瀏覽器緩存庫設計總結（localStorage/indexedDB）

其餘: 支持npm安裝或者umd方式引入

3. 基於node開發的免費圖牀服務器

github地址: github.com/MrXujiang/f…

學習資料:

徐小夕：如何使用nodeJs開發本身的圖牀應用?

其餘: 支持本地部署, 遠程測試服務器部署, 配置私有圖牀

4. 基於node的cms系統

github地址: github.com/MrXujiang/X…

學習資料:

• 徐小夕：基於nodeJS從0到1實現一個CMS全棧項目（上）
• 基於nodeJS從0到1實現一個CMS全棧項目（中）（含源碼）
• 基於nodeJS從0到1實現一個CMS全棧項目的服務端啓動細節

其餘: 基於該系統可定製本身的博客或者內容發佈平臺

5. 基於react的輕量級可擴展組件庫

github地址: github.com/MrXujiang/x…

學習資料:

徐小夕：如何從0到1教你搭建前端團隊的組件系統

npm地址: www.npmjs.com/package/@al…

6. jquery庫的輕量級封裝

github地址: github.com/MrXujiang/X…
其餘: 支持擴展,定製插件方法, 原生javascript封裝面向對象的jquery類庫.

學習資料:

如何用不到200行代碼寫一款屬於本身的js類庫

7. 原生文件上傳組件

github地址: github.com/MrXujiang/x…

學習資料:

徐小夕：3分鐘教你用原生js實現具備進度監聽的文件上傳預覽組件

其餘: 後期可採用es6進一步封裝

8. 基於react+redux+redux-thunk+localStorage的開源實戰項目

github地址: github.com/MrXujiang/r…

學習資料:

徐小夕：完全掌握redux並開發一個react實戰項目

其餘: 完全掌握redux開發方式, 該任務管理平臺使用localStorage,數據可長效保存

9.基於Apify+node+react/vue搭建一個有點意思的爬蟲平臺

github地址: github.com/MrXujiang/c…

學習資料:

徐小夕：基於Apify+node+react/vue搭建一個有點意思的爬蟲平臺

其餘: 一款用於JavaScript的可伸縮的web爬蟲模板, 能夠基於該平臺實現任意網站的圖片爬取,網站全屏截圖等功能.並可基於此進行二次開發.

10.基於React+Koa實現一個h5頁面可視化編輯器－Dooring

github地址: github.com/MrXujiang/h…

學習資料:

徐小夕：基於React+Koa實現一個h5頁面可視化編輯器

其餘: H5-Dooring是一款功能強大，開源免費的H5可視化頁面配置解決方案，致力於提供一套簡單方便、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以react爲主， 後臺採用nodejs開發.

11. 開源PC端頁面可視化編輯器－PC-Dooring

github地址: github.com/MrXujiang/p…

學習資料:

徐小夕：從零搭建一款PC頁面編輯器PC-Dooring

其餘: PC Page Maker, PC Editor. Make PC as easy as building blocks. | 讓網頁製做像搭積木同樣簡單, 輕鬆搭建PC頁面, Web網站, PC端網站.

12. 開源全棧CMS系統－simpleCMS

github地址: github.com/MrXujiang/s…

學習資料:

徐小夕：如何從零打造一款輕量且自然支持SSR的我的博客系統

其餘: simpleCMS是一款開源cms系統, 主要爲我的/團隊快速開發博客或者知識共享平臺, 相似於hexo, worldpress, 可是他們每每須要複雜的搭建過程, 咱們將複雜度降到最低, 而且有詳細的部署教程, 你只須要有一臺服務器, 就能輕鬆擁有一個屬於你的博客平臺.

13. 開源簡約自由拖拽庫－rc-drag

github地址: github.com/MrXujiang/r…

學習資料:

徐小夕：如何實現組件的拖拽, 縮放, 多控制點伸縮和拖拽數據上報

其餘: An React Component for drag and resize, and supports drag and zoom on mobile devices. | 基於react的輕量級拖拽縮放組件, 且支持移動設備拖拽縮放.

14. 趣圖－qt

在線地址: h5.dooring.cn/qt

學習資料:

徐小夕：手把手教你擼一個能生成抖音風格動圖的gif製做平臺

其餘: 趣圖是一款輕量級生成抖音風格動效的在線工具, 支持一鍵導出gif動圖, 手動上傳圖片生成gif動圖等功能.

15. 在線三角形代碼生成器－cssTriangle

在線地址: h5.dooring.cn/tool/cssTri…

學習資料:

徐小夕：如何手擼一個在線css三角形生成器

其餘: 可視化的生產三角形css代碼, 支持3各類形狀各類角度的3角形, 不用敲一行代碼.

展望

後期筆者會在數據可視化和工程化上輸出更多實用的開源項目和框架,若是有其餘問題或需求,能夠和筆者交流學習. 更多技術乾貨, 大前端技術實戰, 歡迎微信搜索 趣談前端 , 一塊兒突破前端瓶頸.

less code is everything.