作者：playboy5566
转发链接：https://segmentfault.com/a/1190000023055412
弹出框
layer：http://layer.layui.com/
独立维护的三大组件之一（layDate、layer、layim）
dialogBox：http://www.jq22.com/jquery-info4822
基于jQuery的弹出框
Bootbox.js：http://bootboxjs.com/
基于Bootstrap的弹出框
SweetAlert：https://sweetalert.js.org/
一个效果非常好的弹层，支持图片、支持输入
轮播图
Swiper：https://www.swiper.com.cn/
开源、免费、强大的触摸滑动插件，常用于移动端。
iSlider：http://eux.baidu.com/iSlider/demo/index_chinese.html
iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素
WebSlides：https://webslides.tv/#slide=1
用HTML来实现网页版的PPT和宣传展示页。
Owl Carousel 2：http://owlcarousel2.github.io/OwlCarousel2/
基于jQuery的轮播
slick：http://kenwheeler.github.io/slick/
jQuery旋转木马插件slick
jQuery slider：http://www.jq22.com/jquery-info889
插件描述：最全最简单最通用的 幻灯片轮播 ，可控制的插件，pc端和移动端都可完美使用
实时刷新
Browsersync：https://www.browsersync.io/
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。
页面调试
AlloyLever：https://github.com/AlloyTeam/AlloyLever
腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。可以通过url参数远程调试客户端定位问题。
vConsole：https://github.com/Tencent/vConsole
同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。与上一个不同的是，不能通过添加url参数远程调试客户端。
函数库
Lodash：https://github.com/lodash/lodash
是一个一致性、模块化、高性能的 JavaScript 实用工具库。很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了。
Underscore：https://underscorejs.org/
Underscore提供了一套完善的函数式编程的接口，让我们更方便地在JavaScript中实现函数式编程。
Ramda：https://github.com/ramda/ramda
与前两者类似，但不同的是参数位置不一样，Ramda的理念是function first，data last。Ramda 还有一个特点：所有方法都支持柯里化。
可以通过阮一峰的文章Ramda 函数库参考教程学习。
outils：https://github.com/proYang/outils
前端业务代码工具库。统一封装常用函数，并发布到npm，以提高开发效率。
手势库
AlloyFinger：https://github.com/AlloyTeam/AlloyFinger
针对多点触控设备编程的Web手势组件，快速帮助你的web程序增加手势支持，也不用再担心click 300ms的延迟了。拥有两个版本，无依赖的独立版和react版本。除了Dom对象，也可监听Canvas内元素的手势。
二维码
jQuery qrcode：https://github.com/jeromeetienne/jquery-qrcode
是一个能够在客户端生成矩阵二维码的jQuery插件，使用它可以很方便的在页面上生成二维码。
模版引擎
doT：https://github.com/olado/doT
doT模板方便快捷的组织页面DOM，特点是快，小，不依赖其他插件。这也是我在项目中经常会使用的一个模版引擎。
handlebars：http://handlebarsjs.com/
Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。
中文版本教程可以参考这篇文章Handlebars.js 模板引擎。
Template7：http://idangero.us/template7/
针对移动端模板引擎，语法很类似Handlebars。它是Framework7 内置模版引擎。另外据官网说，它比Handlebars在移动端Safari中快2-3倍。
入门文章可以看[
template7入门教程及对它的一些看法](https://segmentfault.com/a/1190000005730235)。
Jade Language：http://jade-lang.com/
Node模版引擎，是Express框架内置的模版引擎。中文版的教程可以看这篇Jade模板。
另外可以参考Jade Syntax Documentation，这里整理了Jade模版引擎的使用方法，并且可以实时更新。
颜色选择器
Bootstrap Colorpicker：https://farbelous.io/bootstrap-colorpicker/index.html
Bootstrap 4 中使用的颜色选择器。
spectrum：http://bgrins.github.io/spectrum/
支持移动端的，超小的颜色选择器。不用大量的图片、也不需要其他插件，同时支持自定义。
动画库
Animate.css：https://daneden.github.io/animate.css/
css3动画库，也是目前通用的动画库。只需要引入css，添加css样式即可实现动画。
Anime.js：http://animejs.com/
Anime (/??n.?.me?/)是一个轻量级JavaScript动画库。
Hover.css：http://ianlunn.github.io/Hover/
CSS3 hover 悬停效果，可以应用于链接、按钮、图片、SVG等等。
WOW.js：http://mynameismatthieu.com/WOW/index.html
滚动展示动画，WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果。
另外从官网上下载使用的时候，要注意授权许可。不同的授权许可，价钱可是不一样滴哦。
Magic.css：https://github.com/miniMAC/magic
css3 animation动画库。
Waves：http://fian.my.id/Waves/
点击波纹效果，是一个基于 Google's Material Design 的点击效果。
move.js：http://visionmedia.github.io/move.js/
一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。
图片上传
Fine Uploader：https://github.com/FineUploader/fine-uploader
一个超简单的JS文件上传库。
webuploader：http://fex.baidu.com/webuploader/
由百度开发的以HTML5为主，以FLASH为辅的文件上传组件。兼容IE6+，iOS 6+, android 4+。
正则表达式
regexper：https://regexper.com/
用图形的方式表示正则表达式。
图片无损压缩
tinypng：https://tinypng.com/
图片无损压缩，支持PS软件插件直接压缩，另外提供http、ruby、php、node.js、pyhont、java、.net多种方式API。
提供在线压缩。如果是多张图片压缩需要付费~
图好快：https://www.tuhaokuai.com/
一款国内的在线图片压缩。同样大量图片文件压缩需要付费。
数据Mock
Mock.js：http://mockjs.com/
是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。
官网上没有直接给ajax的请求拦截例子，可以参考这篇[
Mock.js使用](https://segmentfault.com/a/1190000008839142)
Easy Mock：https://easy-mock.com
是一个可视化，并且能快速生成模拟数据的服务，是一个Mock平台，由大搜车维护。Easy Mock也是基于Mock.js，不同的是不用在本地存储文件，直接远程访问接口。接口完成后只需要改变url地址即可。
简单了解Easy Mock使用方法，可以参考如何使用Easy Mock，直接看文章中给出的视频链接即可。
JSON Server：https://github.com/typicode/json-server
基于node服务，可以生成 REST API ,非常的方便。
视频播放器
chimee：http://chimee.org/
Chimee（读“奇米”, [t??'m?:]）是由奇舞团开源的一套 H5 视频播放器解决方案。
支持 MP4、M3U8、FLV 等多种媒体格式，同时它也帮我们解决了大部分的兼容性、差异化问题，包括全屏、自动播放、内联播放、直播解码等常见媒体播放需求。
flv.js：https://github.com/Bilibili/flv.js
Bilibili开源纯JavaScript编写的FLV播放器。
Video.js：https://videojs.com/
开源、免费的HTML5和Flash视频播放器
jPlayer：http://www.jplayer.org/
jQuery的HTML5 音频和视频播放器。另外目前已经添加了React 版本的jPlayer。
滚动库
iScroll：https://github.com/cubiq/iscroll
iScroll是一个高性能、小体积、零依赖、跨平台的js滚动库。它支持PC端、移动端甚至smart TV。
另外支持了多个不同的js版本，可以根据需求选择使用。
beter-scroll：https://github.com/ustbhuangyi/better-scroll
一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现并对其进行了优化。
另外beter-scroll用vue进行了重写，更适合进行移动端的开发。
mescroll：https://github.com/mescroll/mescroll
精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器。
推荐JavaScript学习相关文章
《Angular v10.0.0 正式发布，不再支持 IE9/10》
《「实践」浏览器中的画中画（Picture-in-Picture）模式及其 API》
《「多图」一文带你彻底搞懂 Web Workers （上）》
《「多图」一文带你彻底搞懂 Web Workers （中）》
《webpack4主流程源码解说以及动手实现一个简单的webpack（上）》
《webpack4主流程源码解说以及动手实现一个简单的webpack（下）》
《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）上》
《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）中》
《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）下》
《一文带你搞懂 babel-plugin-import 插件（上）「源码解析」》
《一文带你搞懂 babel-plugin-import 插件（下）「源码解析」》
《教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？》
《细说DOM API中append和appendChild的三个不同点》
《NodeX Component - 滴滴集团 Node.js 生态组件体系「实践」》
《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》
《了不起的 Webpack HMR 学习指南（上）「含源码讲解」》
《了不起的 Webpack HMR 学习指南（下）「含源码讲解」》
《图解 Promise 实现原理（二）：Promise 链式调用》
《图解 Promise 实现原理（三）：Promise 原型方法实现》
《图解 Promise 实现原理（四）：Promise 静态方法实现》
《使用Service Worker让你的 Web 应用如虎添翼（上）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（中）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（下）「干货」》
《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》
《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》
《手把手教你7个有趣的JavaScript 项目-上「附源码」》
《手把手教你7个有趣的JavaScript 项目-下「附源码」》
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《可视化的 js：动态图演示 Promises & Async/Await 的过程》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端开发规范：命名规范、html规范、css规范、js规范》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
作者：playboy5566
转发链接：https://segmentfault.com/a/1190000023055412
本文暂时没有评论，来添加一个吧(●'◡'●)