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