前端路上的開源總結(jié)(2021年最新更新...)
從19年到21年,筆者利用空余時間陸陸續(xù)續(xù)做了一些開源項(xiàng)目, 大部分開源項(xiàng)目都立足于企業(yè)實(shí)際業(yè)務(wù)需求, 所以筆者覺得有必要做一個總結(jié)和復(fù)盤,在復(fù)盤的過程中希望也能對大家有所幫助.今后筆者的開源項(xiàng)目都會放在這篇文章中,如果想學(xué)習(xí)的可以多交流.
1. 基于indexedDB封裝的輕量級緩存庫
github地址: https://github.com/MrXujiang/xdb
學(xué)習(xí)資料: 瀏覽器緩存庫設(shè)計總結(jié)（localStorage/indexedDB）
其他: 支持npm安裝或者umd方式引入(npm用戶名@alex_xu)
2. 基于localStorage封裝的輕量級緩存庫
github地址: https://github.com/MrXujiang/dao.js
學(xué)習(xí)資料: 瀏覽器緩存庫設(shè)計總結(jié)（localStorage/indexedDB）
其他: 支持npm安裝或者umd方式引入
github地址: https://github.com/MrXujiang/fileServer
學(xué)習(xí)資料: 30分鐘教你使用nodeJs開發(fā)自己的圖床應(yīng)用
其他: 支持本地部署, 遠(yuǎn)程測試服務(wù)器部署, 配置私有圖床
github地址: https://github.com/MrXujiang/XPCMS
學(xué)習(xí)資料: 基于nodeJS從0到1實(shí)現(xiàn)一個CMS全棧項(xiàng)目（上）
其他: 基于該系統(tǒng)可定制自己的博客或者內(nèi)容發(fā)布平臺
github地址: https://github.com/MrXujiang/xu_ui
學(xué)習(xí)資料: 從0到1教你搭建前端團(tuán)隊(duì)的組件系統(tǒng)（高級進(jìn)階必備）
npm地址: https://www.npmjs.com/package/@alex_xu/xui
github地址: https://github.com/MrXujiang/Xquery
學(xué)習(xí)資料: 如何用不到200行代碼寫一款屬于自己的js框架
其他: 支持?jǐn)U展,定制插件方法
github地址: https://github.com/MrXujiang/xjFile
學(xué)習(xí)資料: 3分鐘教你用原生js實(shí)現(xiàn)具有進(jìn)度監(jiān)聽的文件上傳預(yù)覽組件
其他: 后期可采用es6進(jìn)一步封裝
github地址: https://github.com/MrXujiang/redux_OA
學(xué)習(xí)資料: 《徹底掌握redux》之開發(fā)一個任務(wù)管理平臺
其他: 徹底掌握redux開發(fā)方式, 該任務(wù)管理平臺使用localStorage,數(shù)據(jù)可長效保存
github地址: https://github.com/MrXujiang/crawel
學(xué)習(xí)資料: 基于Apify+node+react/vue搭建一個有點(diǎn)意思的爬蟲平臺
其他: 一款用于JavaScript的可伸縮的web爬蟲模板, 可以基于該平臺實(shí)現(xiàn)任意網(wǎng)站的圖片爬取,網(wǎng)站全屏截圖等功能.并可基于此進(jìn)行二次開發(fā).
github地址: https://github.com/MrXujiang/h5-Dooring
學(xué)習(xí)資料: 基于React+Koa實(shí)現(xiàn)一個h5頁面可視化編輯器－Dooring
其他: H5-Dooring是一款功能強(qiáng)大，開源免費(fèi)的H5可視化頁面配置解決方案，致力于提供一套簡單方便、專業(yè)可靠、無限可能的H5落地頁最佳實(shí)踐。技術(shù)棧以react為主， 后臺采用nodejs開發(fā).
github地址: https://github.com/MrXujiang/pc-Dooring
學(xué)習(xí)資料: 從零搭建一款PC頁面編輯器PC-Dooring
其他: PC Page Maker, PC Editor. Make PC as easy as building blocks. | 讓網(wǎng)頁制作像搭積木一樣簡單, 輕松搭建PC頁面, Web網(wǎng)站, PC端網(wǎng)站.
github地址: https://github.com/MrXujiang/simpleCMS
學(xué)習(xí)資料: 從零打造一款輕量且天然支持SSR的CMS系統(tǒng)——simpleCMS
其他: simpleCMS是一款開源cms系統(tǒng), 主要為個人/團(tuán)隊(duì)快速開發(fā)博客或者知識共享平臺, 類似于hexo, worldpress, 但是他們往往需要復(fù)雜的搭建過程, 我們將復(fù)雜度降到最低, 并且有詳細(xì)的部署教程, 你只需要有一臺服務(wù)器, 就能輕松擁有一個屬于你的博客平臺.
github地址: https://github.com/MrXujiang/rc-drag
學(xué)習(xí)資料: 輕松教你搞定組件的拖拽, 縮放, 多控制點(diǎn)伸縮和拖拽數(shù)據(jù)上報
其他: An React Component for drag and resize, and supports drag and zoom on mobile devices. | 基于react的輕量級拖拽縮放組件, 且支持移動設(shè)備拖拽縮放.
在線地址: http://h5.dooring.cn/qt
學(xué)習(xí)資料: 手把手教你擼一個能生成抖音風(fēng)格動圖的gif制作平臺
其他: 趣圖是一款輕量級生成抖音風(fēng)格動效的在線工具, 支持一鍵導(dǎo)出gif動圖, 手動上傳圖片生成gif動圖等功能.
在線地址: http://h5.dooring.cn/tool/cssTriangle
學(xué)習(xí)資料: 手?jǐn)]一個在線css三角形生成器
其他: 可視化的生產(chǎn)三角形css代碼, 支持3各種形狀各種角度的3角形, 不用敲一行代碼.
展望
后期筆者會在數(shù)據(jù)可視化和工程化上輸出更多實(shí)用的開源項(xiàng)目和框架,如果有其他問題或需求,可以和筆者一起交流研究.