前端进阶:细数2年内我做的15个开源项目

简介: 从19年到21年,笔者利用空余时间陆陆续续做了一些开源项目, 大部分开源项目都立足于企业实际业务需求, 所以笔者觉得有必要做一个总结和复盘,在复盘的过程中希望也能对大家有所帮助.今后笔者的开源项目都会放在这篇文章中,如果想学习的可以多交流.

网络异常,图片无法展示
|


从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…


学习资料:





其他: 基于该系统可定制自己的博客或者内容发布平台


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角形, 不用敲一行代码.


目录
相关文章
|
前端开发 JavaScript CDN
推荐一款稳定快速免费的前端开源项目 CDN 加速服务
推荐一款稳定快速免费的前端开源项目 CDN 加速服务
330 0
|
4月前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
44 8
|
JavaScript 前端开发 API
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(六)
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(六)
102 0
|
6月前
|
缓存 自然语言处理 JavaScript
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(四)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(四)
|
6月前
|
前端开发 JavaScript 程序员
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(三)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(三)
|
6月前
|
Web App开发 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(一)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(一)
|
6月前
|
存储 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(二)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(二)
|
JavaScript 前端开发 API
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶(三)
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶(三)
570 1
|
6月前
|
前端开发 JavaScript
前端Webpack5高级进阶课程
本套视频教程主要内容包含React/Vue最新版本脚手架分析、基于Webpack5编写自己的loader和plugin等,让你开发时选择更多样,最后,用不到一百行的代码实现Webpack打包。通过本套视频教程的学习,可以帮你彻底打通Webpack的任督二脉,技术水平更上一层楼,在开发项目的道路上畅通无阻
32 3
前端Webpack5高级进阶课程
|
JSON JavaScript 前端开发
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶(四)完结撒花✿✿ヽ(°▽°)ノ✿
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶(四)完结撒花✿✿ヽ(°▽°)ノ✿
579 0