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

徐小夕 等级 471 2 1

从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,如有侵权,请联系删除。

收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
【Golang】Golang + jwt 实现简易用户认证
<p本文已同步发布到我的个人博客:<a href"https://links.jianshu.com/go?tohttps%3A%2F%2Fglorin.xyz%2F2019%2F11%2F23%2FGolangjwtsimpleauth%2F" target"_blank"https://glorin.xyz/2019/11/23/Golang
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
双指针问题
一、双指针之左右指针相关题目 1.1 题目要求:给定一个升序排列的整数数组,找到两个数,使它们的和等于给定的数,有且仅有一个满足条件的解,返回索引。 题目分析:需要两个指针,一个指向开头,一个指向末尾,然后向中间遍历,如果指向的两个数相加正好等于target的话,直接返回两个指针的位置即可,若小于target,左指针右移一位,若大于target,右
Angular vs React 最全面深入对比
Angular vs React 最全面深入对比 Angular vs React 最全面深入对比 本文参考文章:https://www.sitepoint.com/reactvsangul
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
React 之设计原则
编写该文档的目的是,使开发者更易于了解我们如何决策 React(应该做哪些,不应该做哪些),以及我们的开发理念。我们非常欢迎来自社区的贡献,但如若违背这些理念,实非我们所愿。 注意: 文章描述了 React 自身的设计原则,而非 React 组件或应用,阅读者需要对 React 有深入的理解。 如需 React 的入门文档,查看 。
商业数据分析从入门到入职(3)Excel进阶应用
一、数据分类汇总与验证 1.分类汇总Excel中的数据可以通过组合实现折叠部分数据,还可以打开数据,如下: 如需获取数据进行测试学习,可以直接点击加QQ群 <a target"_blank" href"https://qm.qq.com/cgibin/qm/qr?krgE7cwG7OGHgfEucpRIQoSlYCTOEkmEr&j
React 灵魂 23 问,你能答对几个?
1、setState 是异步还是同步? 1. 合成事件中是异步 2. 钩子函数中的是异步 3. 原生事件中是同步 4. setTimeout中是同步 相关链接:你真的理解setState吗?: 2、聊聊 react@16.4 的生命周期相关连接:React 生命周期 我对 React v16.4 生命周期的
Vue3.0 高频出现的几道面试题
1、Vue 3.0 性能提升主要是通过哪几方面体现的? 1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineprope
前端进阶:细数2年内我做的15个开源项目
从19年到21年,笔者利用空余时间陆陆续续做了一些开源项目, 大部分开源项目都立足于企业实际业务需求, 所以笔者觉得有必要做一个总结和复盘,在复盘的过程中希望也能对大家有所帮助.今后笔者的开源项目都会放在这篇文章中,如果想学习的可以多交流.1\. 基于indexedDB封装的轻量级缓存库github地址: 学习资料:](https://zhuanlan.zh
后浪2.0:我不想做这样的人
大家好,我是小五🚀今天是“五四”青年节,B站发布了一个视频,标题为《我不想做这样的人:来自全国955位初中生的演讲》。视频中两名初中学生走上台,分享年轻一代对于“我不想做这样的人”这个话题的所见所思。 这也是B站继去年的《后浪》视频之后,第二次在“5·4”青年节上发布以年轻人为主题的视频。与《后浪》相比,《我不想做这样的人》从成年人对年轻人的看法转变为年轻
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
2分钟做一个Vue实时直播系统
前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下。第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱,练手的话,几十块钱就够了。这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成。记住下面生成的地址,下面会用到。第二步,下载本地推流工具https://obspr