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

徐小夕 等级 1060 2 1
标签: httpsreacttarget

从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 之设计原则
编写该文档的目的是,使开发者更易于了解我们如何决策 React(应该做哪些,不应该做哪些),以及我们的开发理念。我们非常欢迎来自社区的贡献,但如若违背这些理念,实非我们所愿。 注意: 文章描述了 React 自身的设计原则,而非 React 组件或应用,阅读者需要对 React 有深入的理解。 如需 React 的入门文档,查看 。
前端进阶:细数2年内我做的15个开源项目
从19年到21年,笔者利用空余时间陆陆续续做了一些开源项目, 大部分开源项目都立足于企业实际业务需求, 所以笔者觉得有必要做一个总结和复盘,在复盘的过程中希望也能对大家有所帮助.今后笔者的开源项目都会放在这篇文章中,如果想学习的可以多交流.1\. 基于indexedDB封装的轻量级缓存库github地址: 学习资料:](https://zhuanlan.zh
Android常见错误
1、Unable to resolve target 'android-2' 安装低版本的api,再default.properties 这个文件中把target=android-2 改成 target=android-7终于就没有问题了。 2、Invalid start tag LinearLayout main.xml放错文件夹了,应该在\\res\
Authing 新版登录表单组件上线啦
同时支持 **React** 、 **Vue** 、 **Angular** 及 **原生 JavaScript** 命令式调用的 Authing 新版登录表单(即 [Guard2.0](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdocs.authing.cn%2Fsdk%2F
CodePush中的staging deployment如何设置
我们集成react-native的热更新主要是用来做一些小修复,直接用了微软的CodePush。CodePush默认的deployment分为Staging和Production,一个可以用来测试,一个用来为部署生产更新。本文记录了关键步骤和一些问题的解决方法。 我们项目react-native的版本是0.47.2 参考文档[CodePush](https:
ES6的Object.assign()基本用法
`Object.assign`方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。   例如:   const target = {a:1},   const source1 = {b:2}   const source2 = {c:3}; Object.assign(target, source1,sou
Linux 命令 mv
mv 命令 ===== \--no-target-directory 参数确保对目录进行重命名而不是移动 ---------------------------------------- [https://www.gnu.org/software/coreutils/manual/html\_node/Target-directory.html#Targ
React Native (一) react
React Native (一) react-native-video实现音乐播放器和进度条的功能 ------------------------------------------------- 功能: --- 1.卡片滑动切歌 2.显示进度条 效果图: ---- ![](https://oscimg.oschina.net/oscnet/3c
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React 安装教程
我是windows系统  提前安装好了node 1.安装好node 不多介绍,百度 2.安装react 根据react 官网提示,在命令提示符输入 npm install -g create-react-app ![](https://oscimg.oschina.net/oscnet/4bf5c4917aa9e45e056654f406955c
React.render和reactDom.render的区别
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。  新的react包包含了React.crea
React16.4 开发简书项目 从零基础入门到实战
第1章 课程导学 本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。 1-1 课程导学 第2章 React初探 本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。 2-1 React简介 2-2 React开发环境准备 2-3 工程目录
React中的这三个点是做什么的?
### 问题: `...`在此React(使用JSX)代码中做什么?它叫什么? <Modal {...this.props} title='Modal heading' animation={false}> * * * ### 解决方案: 参考一: [https://stackoom.com/question/26HFZ/Reac
TiKV 源码解析系列文章(二十一)Region Merge 源码解析
Region Merge 是 Range 相邻的两个的 Region 合并的过程,我们把一个 Region 称为 Source Region,另一个称为 Target Region,在 Merge 过程结束后,Target Region 管理的 Range 会扩大到 Source Region 的部分,Source Region 则被删除。 在上一篇 [R
Vue axios调用第三方接口跨域解决
1. == 在config目录下index.js文件中设置proxyTable: proxyTable: { '/v1': { target: 'https://api.douban.com', changeOrigin: true, pathRewrit