前端常用插件、工具类库汇总(上)

在这里插入图片描述

前言

在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件。
下面这些是我在工作中积累的一些常用的前端开源插件,这里只是罗列出来,详细的用法各个插件官网或者Gayhub都有介绍。注意:往往一个解决方案会有多个插件,需要读者根据自己的实际业务需求进行甄别选用,欢迎留言交流和补充。
在这里插入图片描述
函数库

Lodash https://github.com/lodash/lodash Underscore
https://underscorejs.org/ Ramda https://github.com/ramda/ramda outils
https://github.com/proYang/outils

动画库

Animate.css:CSS3 动画库,也是目前最通用的动画库。
https://daneden.github.io/animate.css/
Anime.js:一个强大的、轻量级的用来制作动画的javascript库 http://animejs.com/
Hover.css:CSS hover 悬停效果,可以应用于链接、按钮、图片等等。
https://github.com/IanLunn/Hover wow.js:滚动展示动画,WOW.js 依赖
animate.css,所以它支持 animate.css 多达 60 多种的动画效果。
https://github.com/matthieua/WOW Magic.css:css3 animation动画库
https://github.com/miniMAC/magic Waves:点击波纹效果
https://github.com/fians/Waves
move.js:一个小型的JavaScript库,通过JS来控制一系列的CSS动画顺序执行,使CSS3动画变得非常简单和优雅。
https://github.com/visionmedia/move.js

滚动库

iscroll - 平滑滚动插件 https://github.com/cubiq/iscroll BetterScroll:iscroll
的优化版,使移动端滑动体验更加流畅 https://github.com/ustbhuangyi/better-scroll
mescroll:移动端上拉刷新下拉加载 http://www.mescroll.com/api.html jQuery
Scrollbox:图片文字滚动插件 http://www.jq22.com/jquery-info1890
liMarquee:jQuery无缝滚动插件 http://www.dowebok.com/188.html

轮播图

Swiper:常用于移动端网站的内容触摸滑动 https://www.swiper.com.cn/ iSlider:移动端滑动组件
http://eux.baidu.com/iSlider/demo/index_chinese.html
slip.js:移动端跟随手指滑动组件,零依赖。 https://github.com/binnng/slip.js
OwlCarousel2: http://owlcarousel2.github.io/OwlCarousel2/ slick:
http://www.jq22.com/jquery-info406 WebSlides:
https://github.com/webslides/webslides/ jQuery轮播插件slider:
http://www.jq22.com/jquery-info889

滚屏

fullpage: http://www.jq22.com/jquery-info1124

弹出框

layer:独立维护的三大组件之一(layDate、layer、layim) http://layer.layui.com/
Bootbox.js: http://bootboxjs.com/ dialogBox:基于 jQuery
http://www.jq22.com/jquery-info4822 easyDialog:
http://www.h-ui.net/easydialog-v2.0/index.html

消息通知

Notyf:简单的响应式纯js消息通知插件
http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html
PNotify:页面右上角的提示信息(非弹框提示) https://github.com/sciactive/pnotify
https://sciactive.com/pnotify/ overhang.js:是一个JQuery插件显示即时通知、
确认或给定元素中的提示。 http://www.jq22.com/jquery-info9193

下拉框

select2 https://select2.org/

级联选择器

ustbhuangyi/picker:移动端最好用的的筛选器组件、联动筛选
https://github.com/ustbhuangyi/picker
jQueryDistpicker:移动端最好用的的筛选器组件、联动筛选
http://fengyuanchen.github.io/distpicker/
http://www.jq22.com/demo/jQueryDistpicker20160621/

颜色选择器

Bootstrap Colorpicker 2
https://github.com/farbelous/bootstrap-colorpicker

时间选择器

layDate: https://www.layui.com/laydate/

时间日期处理

Moment.js:是一个解析,验证,操作和显示日期和时间的 JavaScript 类库。 http://momentjs.com/
https://github.com/moment/moment timeago.js:轻量级的时间转换 Javascript 库
https://github.com/hustcc/timeago.js

表单验证

validator.js: https://github.com/chriso/validator.js jQuery
Validation:jQuery 表单校验
https://github.com/jquery-validation/jquery-validation
Validform:一行代码搞定整站的表单验证!- Jquery表单验证插件 http://validform.rjboy.cn/

分页插件

pagination: https://github.com/superRaytin/paginationjs

以上有你需要的内容吗?
如果有,不要错过下期内容噢~~

本文内容未完待续…
作者:白小明
来源:
https://juejin.im/post/5ba7d5dd5188255c6140cc9d

订阅号ID:Miaovclass

关注妙味订阅号:“妙味前端”,为您带来优质前端技术干货;

### 后端开发常用工具类汇总 后端开发过程中,开发者通常会借助一些高效的工具来提升工作效率并优化代码质量。这些工具可以分为多个类别,包括但不限于集成开发环境(IDE)、版本控制工具、数据库管理工具以及调试和性能分析工具。 #### 1. 集成开发环境 (IDE) 对于初学者来说,虽然不建议完全依赖于复杂的 IDE 工具[^1],但在熟练掌握基本编程技能之后,使用强大的 IDE 可以显著提高生产力。常见的后端开发 IDE 包括: - **IntelliJ IDEA**: 主要用于 Java 开发,功能强大且支持插件扩展。 - **Eclipse**: 经典的开源 IDE,适合 Java 和其他语言项目。 - **Visual Studio Code**: 轻量级编辑器,通过丰富的插件支持多种后端技术栈。 #### 2. 版本控制系统 版本控制是团队协作的核心部分之一,常用的工具有: - **Git**: 当前最流行的分布式版本控制系统,配合 GitHub 或 GitLab 使用效果更佳。 - **SVN**: 较老式的集中式版本控制系统,仍然被某些企业广泛使用。 #### 3. 数据库管理工具 后端开发离不开数据存储与查询操作,因此需要合适的数据库管理和交互工具: - **MySQL Workbench**: 提供图形化界面方便 MySQL 用户设计和管理数据库。 - **pgAdmin**: PostgreSQL 的官方前端管理应用,适用于复杂的数据建模需求。 - **MongoDB Compass**: 对 NoSQL 数据库 MongoDB 进行可视化操作的理想选择。 #### 4. 编码辅助工具 除了传统的 IDE 外,还有一些专门针对特定场景或者算法实现的小型框架或库可以帮助简化编码流程。例如集合处理方面提到过的 `HashSet` 实现原理基于哈希表结构[^2],它能够提供快速查找能力;而对于仅含整数类型的简单集合则可能考虑使用更加紧凑高效的空间表示形式如 `IntSet`. #### 5. 测试与监控工具 为了确保应用程序稳定运行还需要引入一系列测试手段及实时监测机制: - 单元测试框架:JUnit(Java), PyTest(Python) 等帮助验证单个模块逻辑正确性; - 性能剖析软件:YourKit, JProfiler 用来检测内存泄漏等问题所在区域; - 日志记录解决方案:Logstash 结合 Elasticsearch 构建完整的日志收集平台以便后续排查错误线索。 ```python import logging logging.basicConfig(level=logging.DEBUG) def example_function(): try: result = 1 / 0 except ZeroDivisionError as e: logging.error(f"An error occurred: {e}") example_function() ``` 以上展示了如何利用 Python 内置的日志模块捕获异常并将之写入文件或其他目标位置从而便于追踪问题源头。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值