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

徐小夕
• 阅读 1609

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

1. 基于indexedDB封装的轻量级缓存库

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

github地址: https://github.com/MrXujiang/xdb

学习资料:

徐小夕:浏览器缓存库设计总结(localStorage/indexedDB)​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: 支持npm安装或者umd方式引入(npm用户名@alex_xu)

2. 基于localStorage封装的轻量级缓存库

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

github地址: https://github.com/MrXujiang/dao.js

学习资料: 浏览器缓存库设计总结(localStorage/indexedDB)

其他: 支持npm安装或者umd方式引入

3. 基于node开发的免费图床服务器

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

github地址: https://github.com/MrXujiang/fileServer

学习资料:

徐小夕:如何使用nodeJs开发自己的图床应用?​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: 支持本地部署, 远程测试服务器部署, 配置私有图床

4. 基于node的cms系统

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

github地址: https://github.com/MrXujiang/XPCMS

学习资料:

徐小夕:基于nodeJS从0到1实现一个CMS全栈项目(上)​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目徐小夕:基于nodeJS从0到1实现一个CMS全栈项目(中)(含源码)​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目徐小夕:CMS全栈项目之Vue和React篇(下)(含源码)​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

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

5. 基于react的轻量级可扩展组件库

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

github地址: https://github.com/MrXujiang/xu_ui

学习资料:

徐小夕:如何从0到1教你搭建前端团队的组件系统​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

npm地址: https://www.npmjs.com/package/@alex_xu/xui

6. jquery库的轻量级封装

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

github地址: https://github.com/MrXujiang/Xquery
其他: 支持扩展,定制插件方法, 原生javascript封装面向对象的jquery类库.

7. 原生文件上传组件

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

github地址: https://github.com/MrXujiang/xjFile

学习资料:

徐小夕:3分钟教你用原生js实现具有进度监听的文件上传预览组件​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: 后期可采用es6进一步封装

8. 基于react+redux+redux-thunk+localStorage的开源实战项目

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

github地址: https://github.com/MrXujiang/redux_OA

学习资料:

徐小夕:彻底掌握redux并开发一个react实战项目​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: 彻底掌握redux开发方式, 该任务管理平台使用localStorage,数据可长效保存

9.基于Apify+node+react/vue搭建一个有点意思的爬虫平台

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

github地址: https://github.com/MrXujiang/crawel

学习资料:

徐小夕:基于Apify+node+react/vue搭建一个有点意思的爬虫平台​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: 一款用于JavaScript的可伸缩的web爬虫模板, 可以基于该平台实现任意网站的图片爬取,网站全屏截图等功能.并可基于此进行二次开发.

10.基于React+Koa实现一个h5页面可视化编辑器-Dooring

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

github地址: https://github.com/MrXujiang/h5-Dooring

学习资料:

徐小夕:基于React+Koa实现一个h5页面可视化编辑器-Dooring​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: H5-Dooring是一款功能强大,开源免费的H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发.

11. 开源PC端页面可视化编辑器-PC-Dooring

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

github地址: https://github.com/MrXujiang/pc-Dooring

学习资料:

徐小夕:从零搭建一款PC页面编辑器PC-Dooring​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: PC Page Maker, PC Editor. Make PC as easy as building blocks. | 让网页制作像搭积木一样简单, 轻松搭建PC页面, Web网站, PC端网站.

12. 开源全栈CMS系统-simpleCMS

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

github地址: https://github.com/MrXujiang/simpleCMS

学习资料:

徐小夕:如何从零打造一款轻量且天然支持SSR的个人博客系统?​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: simpleCMS是一款开源cms系统, 主要为个人/团队快速开发博客或者知识共享平台, 类似于hexo, worldpress, 但是他们往往需要复杂的搭建过程, 我们将复杂度降到最低, 并且有详细的部署教程, 你只需要有一台服务器, 就能轻松拥有一个属于你的博客平台.

13. 开源简约自由拖拽库-rc-drag

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

github地址: https://github.com/MrXujiang/rc-drag

学习资料:

徐小夕:如何实现组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: An React Component for drag and resize, and supports drag and zoom on mobile devices. | 基于react的轻量级拖拽缩放组件, 且支持移动设备拖拽缩放.

14. 趣图-qt

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

在线地址: http://h5.dooring.cn/qt

学习资料:

徐小夕:手把手教你撸一个能生成抖音风格动图的gif制作平台​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: 趣图是一款轻量级生成抖音风格动效的在线工具, 支持一键导出gif动图, 手动上传图片生成gif动图等功能.

15. 在线三角形代码生成器-cssTriangle

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

在线地址: http://h5.dooring.cn/tool/cssTriangle

学习资料:

徐小夕:如何手撸一个在线css三角形生成器?​zhuanlan.zhihu.com前端进阶:细数2年内我做的15个开源项目

其他: 可视化的生产三角形css代码, 支持3各种形状各种角度的3角形, 不用敲一行代码.

展望

后期笔者会在数据可视化和工程化上输出更多实用的开源项目和框架,如果有其他问题或需求,可以和笔者交流学习. 更多技术干货, 大前端技术实战, 欢迎微信搜索 趣谈前端 , 一起突破前端瓶颈.

本文转自 https://zhuanlan.zhihu.com/p/372503408,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这