2025年常用前端开发插件总结清单

常用前端开发插件总结清单日常前端开发的时候 尤其在使用一些常用的功能的时候 例如 表单 动画效果 时间选择 文件上传 下拉框等功能 直接用插件可以让自己节省更多的开发时间 更多的去关心业务 自己封装还要更多的去解决各种兼容性问题 为此总结一些常用的插件

大家好,我是讯享网,很高兴认识大家。

日常前端开发的时候,尤其在使用一些常用的功能的时候,例如:表单,,动画效果,时间选择,文件上传,下拉框等功能。直接用插件可以让自己节省更多的开发时间,更多的去关心业务,自己封装还要更多的去解决各种兼容性问题。为此总结一些常用的插件,方便日后开发的时候,可以拿来就用。

插件集合代码仓库:https://gitee.com/SteveRocket/practice_fronted

_注意:_ 此处插件库排序按照字母排序。

ace
Git地址 下载地址
Ace(基于浏览器的编辑器)是透过JavaScript所开发的线上程序语言编辑器插件,无论功能和性能都类似一般编辑器(Sublime、Vim和TextMate等),导入进任何网页或JavaScript应用程序都相当容易。值得一提的是Ace是由Cloud9 IDE的团队维护,并且是Mozilla Skywriter(Bespin)项目的延伸品,品质值得信赖。

特点:

超过120种语言的语法突出显示(可导入TextMate/Sublime/.tmlanguage 文件)。
超过20个主题(可导入TextMate/Sublime/.tmtheme文件)。
自动缩进和突出。
可选的命令行。
处理大量文件(最后检查,4,000,000 行是上限)。
完全可定制的键绑定,包括VIM和Emacs模式。
搜索并替换正则表达式。
突出显示匹配的括号。
在软标签和真实标签之间切换。
显示隐藏的字符。
使用鼠标拖放文本。
换行。
代码折叠。
多个游标和选择。
实时语法检查器(目前是 JavaScript / CoffeeScript / CSS / XQuery)。
剪切,复制和粘贴功能。
Ace admin
Git地址
Ace Admin是一款轻量且功能丰富的管理模板,干净且易于使用。

特点:

4种不同的皮肤。
基于Bootstrap 3的响应式设计(特别是3.1.1)。
使用Javascript和CSS构建器来构建您自己的最小文件。
在页面帮助中,您可以轻松选取任何元素并查看其工作原理。
自定义元素和插件。
Bootstrap,jQuery UI和第三方插件和元素。
alertify.js
Github地址: https://github.com/fabien-d/alertify.js.git

alertify.js是为了美化通知信息而生的JavaScript框架。

amp-what HTML字符实体图标
animatable
仅仅依靠 border-width 和 background-position 实现的各种动态效果。

Animate.css
Github地址: https://github.com/daneden/animate.css 预设了很多动画。
这款插件能让你的网页端拥有更加丰富的动画。纯CSS制作的动画效果的CSS集合,无需JavaScript,支持多浏览器的动画特效,即插即用。
animate.css把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类animated和相应的类添加到元素上就行了。
主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类

下载https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
或安装
npm install animate.css

放大镜功能。

异步流程控制。

让文本域(textarea) 的高度随着文字内容的变高而变高。

bacon.js
GitHub地址: https://github.com/baconjs/bacon.js/
函数式编程,是一个小型 JavaScript 函数式响应编程库。

Bootstrap,来自Twitter,是一个用于快速开发 Web 应用程序和网站的前端框架,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。

下载https://github.com/twbs/bootstrap/archive/v5.3.0-alpha1.zip
或安装
npm i bootstrap@5.3.0-alpha1

china-area-data
chosen
官网:Chosen Github:chosen
Chosen是一个jQuery的插件,目的是让又长又笨重的下拉式选单变得更友善。

clipboard.js
GitHub地址: https://github.com/zenorocha/clipboard.js
Modern copy to clipboard. No Flash. Just 3kb gzipped.
下载地址:https://github.com/zenorocha/clipboard.js/archive/master.zip
复制内容到剪切板的小工具,不依赖Flash或任何臃肿的框架,大小只要3KB。

特点:

1、Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
2、分页,即时搜索和排序。
3、几乎支持任何数据源:DOM,javascript,Ajax 和 服务器处理。
4、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。
5、各式各样的扩展: Editor, TableTools, FixedColumns….
6、丰富多样的option和强大的API。
7、支持国际化。
8、免费开源。
1
2
3
4
5
6
7
8
库下载地址:http://datatables.net/releases/DataTables-1.10.12.zip
官网地址:https://datatables.net/
DataTables中文网:http://datatables.club/

datejs
day.js
和 Moment.js 一样的API。只有2KB。

echarts
一个基于 JavaScript 的开源可视化图表库。
企业级图表库,百度开发。
editor_md
http://editor.md.ipandao.com/

FileAPI
GitHub地址: https://github.com/mailru/FileAPI
对文件选择框内的文件的一些处理。前端用户处理文件(拖放、多文件上传等)。

flexible.js
阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。
flexible.js实现了rem自适应,有了flexible.js,就不必再为移动端各种设备兼容烦恼。
flexible.js是如何通过rem实现自适应的呢?通过rem与px的换算,可以把设计稿从px转到rem。再也不用为各种设备横行而担忧。rem是相对于根元素,这样就意味着,只需要在根元素确定一个px字号,则可以来算出元素的宽高。1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则1rem=64px来运算。
flippant.js
一款能够漂亮的网页元素翻转效果库。

greensock
Hammer.js
是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。

下载地址:https://s3.amazonaws.com/builds.handlebarsjs.com/handlebars.min-v4.7.7.js
或安装
npm install handlebars

hightchart
hover_css
多项针对链接、按钮、Logo、SVG和图片的移入CSS3特效。

iScroll.js
iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。它可以在桌面,移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。
功能强大,支持各种事件,不依赖任何的库,且插件丰富。
isotope
可以用来过滤、排列布局,实现美观的动态布局切换效果。

jquery-mobile
jQuery 团队开发的用于辅助手机端web app开发的库,基于HTML5。
是一个基于html5的用户界面系统,旨在使所有智能手机、平板电脑和桌面设备合集都能访问到响应性的网站和应用程序。

jquery-qrcode
GitHub地址: https://github.com/jeromeetienne/jquery-qrcode
生成二维码图片的jQuery 插件,很好用。该插件是基于 QR Code Generator 开发的。


讯享网

jquery.scrollTo(平滑滚动)
GitHub地址: https://github.com/flesler/jquery.scrollTo
在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等。
能够使得定位的时候更有体验感。

kendo
knockout
前端 MVVM 框架,用于开发富前端应用。

LazyLoad
官网:Lazy Load 延伸:Vanilla JavaScript Lazy Load Plugin
Lazy Load帮助高度较长的网页进行延迟载入图片,尚未浏览到该部分时,不会载入视角外的图片,提高效率。

lightSlider
官网:JQuery lightSlider Github:sachinchoolur/lightslider
JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片,附有缩图导览。另外还有相本功能、垂直跑马灯,应用层面广泛。

lunr.js
magicbox_tencent
markdown-it
新型 Markdown 解析器,快速,支持插件。

mustache
Github地址: https://github.com/janl/mustache.js/
下载地址:https://codeload.github.com/janl/mustache.js/zip/refs/tags/v4.2.0
GitHub示例:https://github.com/mustache/mustache.github.com

前端模板渲染引擎。
如果希望像传统模板引擎一样可以有函数和参数处理等等的功能,那么Mustache就不是好的选择。
Nano ID
Github地址: https://github.com/ai/nanoid/
生成 uuid。

pagination.js 分页
parallax.js
一个用于响应智能手机 orientation 的库。

qrcode.js(二维码生成)
GitHub地址: https://github.com/davidshimjs/qrcodejs
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

regexp-frequent正则工具库。
regulex
用于生成 正则表达式 的可视化流程图。
类似于Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用。

skrollr
GitHub地址: https://github.com/Prinzhorn/skrollr
是一款轻量级且强大的js库,实现异步滚动的开源库。

stellar.js
GitHub地址: https://github.com/markdalgleish/stellar.js
视差滚动效果,前端用于实现异步滚动效果的库,现已不再维护。可轻松创建视差滚动站点。

swiper
GitHub地址: https://github.com/nolimits4web/swiper/
Swiper中文网

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
PPT动态播放效果。幻灯片/跑马灯插件,使用效能高,并可运用在移动设备上及混合式App上,不但在最新版本的IOS上运行良好,在Android、Windows Phone 8和PC设备上一样表现优秀。要注意的是,Swiper并不兼容所有平台设备,而是专注于当下主流平台设备的兼容性和效能上。
同时Swiper也是Framework7和Ionic Framework的组件的一部分。
支持硬件加速。性能良好。
switchery
IOS 7上Switch的JS实现, 支持 IE8 及以上浏览器。

TheaterJS
GitHub地址: https://github.com/Zhouzi/TheaterJS
一个用于模拟人输入状态的JS库。

Tocbot(目录生成)
GitHub地址: https://github.com/tscanlin/tocbot/releases
根据文章的标题级别自动生成目录对一篇文章来说是一个比较实用的功能。

手势库专为移动设备设计,请在Webkit内核浏览器中使用。
原生出色的加速度感知与缓动效果,优秀的单指旋转手势。
无侵入设计,与现有代码与框架共存。
基于原生事件,支持事件代理, 性能更好。
极简的API,秒速上手,玩转手势。
trix
Basecamp 公司出品的富文本编辑器,简洁小巧。

underscore.js
中文文档:https://www.underscorejs.cn/
GitHub地址: https://github.com/jashkenas/underscore

一个 JavaScript 实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。
Underscore 提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript 模板功能,创建快速索引, 强类型相等测试, 等等.
Underscore 是 DocumentCloud 的一个开源组件。
vivus
可以动态描绘 SVG 的 JS 库, 支持多种动画。

一个jQuery插件,每当您滚动到某个元素时,该插件都会执行一个函数。这使站点上的导航可以根据滚动条的位置突出显示我们正在播放的幻灯片。

能够侦测滚动时,现在正显示的内容,可以根据需要改变组件的显示与隐藏。
当滚动到某个元素时,Waypoints是触发函数的最简单方法。
下载 https://github.com/imakewebthings/waypoints/zipball/latest
或安装
npm install waypoints

Zepto.js
用于现代浏览器的兼容jQuery的库。
Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery。是一个轻量级的针对现代高级浏览器的JavaScript库,与JQuery有着类似的API。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API,所以能把主要的精力放到应用开发上。

zTree – jQuery 树插件
https://treejs.cn/v3/main.php#_zTreeInfo
文件树形视图控件
 

小讯
上一篇 2025-02-25 21:39
下一篇 2025-04-04 22:19

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/120195.html