《吐血整理》系列 前端开发工具、组件库集合

序言

Coding 应是毕生的科技事业，而更为重要是 30 岁的热血🍚

小厂后端应用领域软件、模块库的子集，那时，它来了，它踏着彩虹麒麟来了！！！

虚拟化中前台

官方网站门牌号：https://ant.design/index-cn

蚂蚁金服开放源码 React 模块库必选，虚拟化前台间接用它就完事，没小毛病~

官方网站门牌号：https://ice.work/

建模加速构筑企业级中前台后端应用领域，值得称赞试试看~

官方网站门牌号：https://www.antdv.com/docs/vue/introduce-cn/

假如我子公司控制技术栈是 Vue.js，用那个就完事了~

跨端框架

官方网站门牌号：https://nervjs.github.io/taro/

React 合作开发方式的跨端合作开发框架，目前已支持，微信/百度/字节跳动/支付宝/QQ 小程序、快应用领域、H5、React Native 等多端的应用领域。

创业子公司必备，最近刚出的 Taro3.0，真的超级强大。

官方网站门牌号：https://taro-ui.jd.com/

基于上面 Taro 跨端框架开发的多端 UI 模块库，不得不说，京东还是考虑得周到，点赞！

使用 Taro，就可以实现全站控制技术栈统一了~

官方网站门牌号：https://uniapp.dcloud.io/

Vue.js 合作开发方式的跨端合作开发框架，个人还是更推荐 Taro，特别是现在出了 Taro3.0 ,真的很强大，创业子公司必备~

数据建模

官方网站门牌号：https://antv.gitee.io/zh#products

数据建模中的王者，别犹豫了，用它就对了~

PC 端，移动端都给你考虑到了~

图片处理

官方网站门牌号：http://elemefe.github.io/image-cropper/

给图片显示一个裁剪框，裁剪框允许用户调整大小和位置，常用来做用户自定义头像的裁剪功能。

官方网站门牌号：https://github.com/RevillWeb/img-2

使用 web worker 做的图片懒加载~

不过针对自己的子公司，怪怪建议像懒加载、预加载这种东西，还是自己做一套比较好哦~

官方网站门牌号：http://fabricjs.com/

有时候会碰到图片合成类的需求，那个库是基于 canvas 合作开发滴，支持拖拽，有类似需求的小伙伴可以试试~

官方网站门牌号：https://github.com/infinitered/nsfwjs

那个库就有点东西了，鉴定图片是否符合要求，这个我没用过，不过感觉会有点用~

不过像这种不符合要求的图片过滤，真正企业里面，都是风控团队来处理滴，不需要我们后端来搞~

官方网站门牌号：https://squoosh.app/

谷歌在线图片压缩，怪怪经常用~

不过真正项目里面，子公司后端基建小分队一般都会封装一套图片压缩类的模块~

官方网站门牌号：https://spritejs.org/#/

360 团队合作开发的，高性能图形系统，它能够支持 web、node、桌面应用领域和小程序的图形绘制和实现各种动画效果，对 360 的东西还是挺有好感，齐舞周刊有点东西~

UI 样式

官方网站门牌号：https://imgcook.taobao.org/docs

很大程度上减轻了后端的工作量！！！，支持 Sketch、PSD、静态图片间接转 code，也就是大家常说的 ui2code。可以间接转成代码！！

没用过的小伙伴，一定要去试试！！！

官方网站门牌号：https://github.com/daneden/animate.css

这大概是最全的 css 动画库了~

官方网站门牌号：https://nigelotoole.github.io/direction-reveal/#

根据鼠标进入位置，展现从不同方向 展现 hover 效果，pc 端还是会遇到这样的需求。

支持很多种效果，基本上包含了日常所有的情况~

官方网站门牌号：https://github.com/alexfoxy/laxxx

上面的动画库，配上那个滚动特效库，实在完美

压缩完只有 2kb，很轻量

官方网站门牌号：https://github.com/purifycss/purifycss

可以帮助你移除没使用到的 css，也算是一个小优化点~

Vue.js

官方网站门牌号：https://github.com/Akryum/vue-virtual-scroller

基于 vue 的虚拟列表无限滚动，性能还不错~

怪怪子公司基建小分队自己做了一套无限滚动加载滴，没用那个~

官网门牌号：https://github.com/SortableJS/Vue.Draggable

以前怪怪实习的时候，就遇到了运营需要对前台一些元素进行拖拽的场景，就是用的那个~

JavaScript

官方网站门牌号：https://github.com/eslint/eslint

这玩意的出现解决了大部分强迫症程序员的问题，统一 JavaScript 代码风格

这不用犹豫，子公司的代码规范必须统一啊~

官方网站门牌号：https://obfuscator.io/

JavaScript 代码混淆工具，该混淆时就混淆~

官方网站门牌号：https://lodash.com/

lodash 是一套工具库，内部封装了字符串、数组、对象等常见数据类型的处理函数。

很实用，用过你就知道了~

官方网站门牌号：https://jielibang.github.io/jtools/index.html

后端 js 工具库: 封装常用的工具函数，如日期格式化、浏览器判断等，提高合作开发效率

假如是自己的子公司，这种东西一定要有一套封装到脚手架里面，对于合作开发很省事~

官方网站门牌号：https://github.com/facebook/jscodeshift

将 js 内容解析成 AST 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改

有时候，需要去做一些底层的高级处理，那个东西就能派上用场了~

移动端

官方网站门牌号：https://swiperjs.com/

主要用来解决移动端触摸滑动，像什么轮播图啊，上下滑动啊，用它就对了~

官方网站门牌号：https://alvarotrigo.com/fullPage/zh/#page2

非常好用的全屏滑动库，去官方网站看 demo 就能感受到了~

官方网站门牌号：https://github.com/dimsemenov/photoswipe

图片预览模块，支持移动端，相对上面模块库里面自带的，比较轻量~

Swiper + PhotoSwipe + fullPage这 3 个一配合，微信里常见的 H5 页完全不是问题哒！！！

官方网站门牌号：http://hammerjs.github.io/

移动端手势库，挺不错滴~

其它常用小工具

官方网站门牌号：https://github.com/iamkun/dayjs

用 JavaScript 解析、验证、操作和显示日期和时间，很方便哦~

官方网站门牌号：https://github.com/axios/axios

目前最常见的请求库，强推~

官方网站门牌号：https://caniuse.com

合作开发必备，查看浏览器对各种新特性的兼容情况

果然，浏览器还不支持接水怪，伤心

官方网站门牌号：https://regexr.com/

日常自己写一个正则的时候，那个网站很爽~

官方网址：https://github.com/ksky521/nodePPT

用 node 写 ppt，就很有格局~

以那个工具结束，是希望大家都能做得一手好 ppt，都能够顺利晋升！！！

总结

上面的模块库，工具都是怪怪精心挑选滴，希望能帮助小伙伴们减轻工作量，happy work！！

微信搜索【接水怪您不说话，光看聊天记录也是一种成长。（阿里控制技术专家、敖丙作者、Java3y、蘑菇街资深后端、蚂蚁金服安全专家、各路大牛都在）。

有机会一起跑个步🏃↓↓↓