《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]上一期的《吐血整理》系列 大厂前端必备工具集合(抓包、调试、Mock 数据等等),获得大家一致好评,于是怪怪我加班加点,写下了这一期。 微信搜索【接水怪】或扫描下面二维码回复”加群“,我会拉你进技术交流群。讲真的,在这个群,哪怕您不说话,光看聊天记录也是一种成长。(阿里技术专家…

大家好,欢迎来到IT知识分享网。

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

前言

Coding 应当是一生的事业,而不仅仅是 30 岁的青春饭
本文已收录 GitHub https://github.com/ponkans/F2E,欢迎 Star,持续更新

上一篇《吐血整理》系列 大厂前端必备工具集合(抓包、调试、Mock 数据等等)发布之后,很多小伙伴问怪怪有没有大厂前端开发工具组件库的集合,今天,它来了,它踏着七彩祥云来了!!!

企业级中后台

Ant Design

  • 官网地址:ant.design/index-cn

蚂蚁金服开源 React 组件库首选,企业级中后台就直接用它就完事儿,准没错~
组件很齐全,开发起来简直神速~

估计已经是很多公司的标配了,我们公司也用~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

飞冰

  • 官网地址:ice.work/

可视化快速搭建企业级中后台前端应用,还是很值得试一试滴~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

Ant Design Vue

  • 官网地址:www.antdv.com/docs/vue/in…

如果你们公司技术栈是 Vue.js,用这个就完事儿了~

虽然有 Element UI,以及一些其它的组件库,但挂怪还是推荐这个~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

跨端框架

Taro

  • 官网地址:nervjs.github.io/taro/

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

怪怪一直都觉得,前端侧本来就不应该分这么多端,多端统一是大趋势~

怪怪好几个朋友的公司都在用这个了~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

Taro UI

  • 官网地址:taro-ui.jd.com/

基于上面 Taro 跨端框架开发的多端 UI 组件库,不得不说,京东还是考虑得周到,点赞!

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

uni-app

  • 官网地址:uniapp.dcloud.io/

Vue.js 开发方式的跨端开发框架,有多强大,去用用就知道啦~

最近这玩意儿好像有点火~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

数据可视化

AntV

  • 官网地址:antv.gitee.io/zh#products

数据可视化中的王者,别犹豫了,用它就对了~

pc 端,移动端都给你考虑到了~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

图片处理

Image Cropper

  • 官网地址:elemefe.github.io/image-cropp…

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

其实就是一个图片裁剪工具啦~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

img-2

  • 官网地址:github.com/RevillWeb/i…

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

Fabric.js

  • 官网地址:fabricjs.com/

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

nsfwjs

  • 官网地址:github.com/infinitered…

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

Squoosh

  • 官网地址:squoosh.app/

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

不过真正项目里面,公司前端基建小分队一般都会封装一套图片压缩类的组件~

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

SpriteJS

  • 官网地址:spritejs.org/#/

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

UI 样式

imgcook

  • 官网地址:imgcook.taobao.org/docs

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

没用过的小伙伴,一定要去试试!!!

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

animate.css

  • 官网地址:github.com/daneden/ani…

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

direction-reveal

  • 官网地址:nigelotoole.github.io/direction-r…

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

lax.js

  • 官网地址:github.com/alexfoxy/la…

上面的动画库,配上这个滚动特效库,简直完美

压缩完只有 2kb,很轻量

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

purifycss

  • 官网地址:github.com/purifycss/p…

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

Vue.js

vue-virtual-scroller

  • 官网地址:github.com/Akryum/vue-…

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

Vue.Draggable

  • 官网地址:github.com/SortableJS/…

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

JavaScript

eslint

  • 官网地址:github.com/eslint/esli…

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

JavaScript Obfuscator Tool

  • 官网地址:obfuscator.io/

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

lodash

  • 官网地址:lodash.com/

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

jlb-tools

  • 官网地址:github.com/Pasoul/jtoo…

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

jscodeshift

  • 官网地址:github.com/facebook/js…

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

移动端

Swiper

  • 官网地址:swiperjs.com/

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

fullPage

  • 官网地址:alvarotrigo.com/fullPage/zh…

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

PhotoSwipe

  • 官网地址:github.com/dimsemenov/…

图片预览组件,支持移动端,相对上面组件库里面自带的,比较轻量~

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

HAMMER.JS

  • 官网地址:hammerjs.github.io/

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

其它常用小工具

Day.js

  • 官网地址:github.com/iamkun/dayj…

用 JavaScript 解析、验证、操作和显示日期和时间,很方便哦~
和 Moment.js 一样的API,但是比 Moment.js 轻量、小很多

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

axios

  • 官网地址:github.com/axios/axios

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

Can I use

  • 官网地址:caniuse.com

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

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

regexr

  • 官网地址:regexr.com/

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

nodeppt

  • 官方网址:github.com/ksky521/nod…

用 node 写 ppt,就很有格局~

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

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

总结

本文已收录 GitHub https://github.com/ponkans/F2E,欢迎 Star,持续更新

上一期的《吐血整理》系列 大厂前端必备工具集合(抓包、调试、Mock 数据等等),获得大家一致好评,于是怪怪我加班加点,写下了这一期。

上面的组件库,工具都是怪怪精心挑选滴,希望能帮助到小伙伴减轻工作,happy work!!

近期原创热文传送门,biubiu~:

  • 《吐血整理》系列 大厂前端必备工具集合(抓包、调试、Mock数据等等)
  • 《大前端进阶 Node.js》系列 必知、必会、必问
  • 《大前端进阶 Node.js》系列 双十一秒杀系统(进阶必看)
  • 《大前端进阶 Node.js》系列 50行多进程爬虫
  • 《大前端进阶 Node.js》系列 P6 前端必备脚手架/CI 构建能力(上)

喜欢的小伙伴麻烦加个关注,点个赞哦,感恩💕😊

联系我 / 公众号

微信搜索【接水怪】或扫描下面二维码回复”加群“,我会拉你进技术交流群。讲真的,在这个群,哪怕您不说话,光看聊天记录也是一种成长。(阿里技术专家、敖丙作者、Java3y、蘑菇街资深前端、蚂蚁金服安全专家、各路大牛都在)。

接水怪也会定期原创,定期跟小伙伴进行经验交流或帮忙看简历。加关注,不迷路,有机会一起跑个步🏃 ↓↓↓

《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)[通俗易懂]

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/9455.html

(0)
上一篇 2023-02-04 16:00
下一篇 2023-02-04 18:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信