轻量高效的开源JavaScript插件和库
---
<!-- TOC -->
- [图片](#图片)
- [布局](#布局)
- [轮播图](#轮播图)
- [弹出层](#弹出层)
- [音频视频](#音频视频)
- [编辑器](#编辑器)
- [字符串](#字符串)
- [表单](#表单)
- [存储](#存储)
- [动画](#动画)
- [时间](#时间)
- [其它](#其它)
- [加载器](#加载器)
- [构建工具](#构建工具)
- [测试](#测试)
- [包管理器](#包管理器)
- [CDN](#cdn)
<!-- /TOC -->
## 图片
- [baguetteBox.js](https://github.com/feimosi/baguetteBox.js) - 是一个简单易用的响应式图像灯箱效果脚本。[demo](https://feimosi.github.io/baguetteBox.js/)
- [Lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) - 是一个功能齐全的JavaScript图像灯箱插件。[demo](https://sachinchoolur.github.io/lightgallery.js/)
- [viewerjs](https://github.com/fengyuanchen/viewerjs) - 是一个图像预览插件。[demo](https://fengyuanchen.github.io/viewerjs/)
- [cropperjs](https://github.com/fengyuanchen/cropperjs) - 是一个图片编辑器插件。[demo](https://fengyuanchen.github.io/cropperjs/)
- [photo-editor](https://github.com/fengyuanchen/photo-editor) - 是一个本地图片编辑器插件。[demo](https://fengyuanchen.github.io/photo-editor/)
- [blazy.js](https://github.com/dinbror/blazy/) - 是一个懒惰加载插件。[demo](http://dinbror.dk/blazy/)
## 布局
- [SuperEmbed.js](https://github.com/corbindavenport/superembed.js) - 是一个Javascript库，可检测出网页上的内嵌视频并使他们能够变成响应式元素。[demo](https://jsfiddle.net/h6x04LuL/)
- [ScrollReveal](https://github.com/jlmakes/scrollreveal) - ScrollReveal插件使用户能够无比轻松地创建桌面和移动浏览器的网页滚动动画。[demo](https://scrollrevealjs.org/)
- [Bricks.js](https://github.com/callmecavs/bricks.js) - 是一款超快的用于固定宽度元素的“砖石”布局生成器。[demo](http://callmecavs.com/bricks.js/)
## 轮播图
- [Swipe](https://github.com/thebird/Swipe) - 准确的触摸滑块。[demo](http://thebird.github.io/Swipe/)
- [Lory](https://github.com/meandmax/lory/) - 是一个由 Vanilla JavaScript 编写的拥有触摸功能的简约滑块。[demo](http://meandmax.github.io/lory/)
- [baguetteBox.js](https://github.com/feimosi/baguetteBox.js) - 是一个简单、易用的响应式 Lightbox 图片库，它支持移动端上触滑动手势操作，无依赖。[demo](https://feimosi.github.io/baguetteBox.js/)
## 弹出层
- [Popper.js](https://github.com/FezVrasta/popper.js) - 是一个轻量级的库用于管理工具提示和弹窗效果。[demo](https://popper.js.org/)
- [SweetAlert2](https://github.com/limonte/sweetalert2) - 是一个颜值很高而且可以自定义的警告弹出窗口插件，可以代替Javascript的弹出窗口。[demo](https://limonte.github.io/sweetalert2/)
- [artDialog](https://github.com/aui/artDialog) - 是一个经典、优雅的网页对话框控件。[demo](http://aui.github.io/artDialog/doc/index.html)
- [layer](https://github.com/sentsin/layer) - 是一个web弹层组件。[demo](http://layer.layui.com)
## 音频视频
- [Loud Links](https://github.com/mahdif/loud-links) - 是一个轻量级的JavaScript库用于添加交互声音到您的站点。[demo](http://loudlinks.rocks/#examples)
- [flv.js](https://github.com/Bilibili/flv.js) - B 站 HTML5 播放器内核开源。
- [Loud Links](https://github.com/mahdif/loud-links/) - 是一个轻量级 JavaScript 库，用于向您的网站添加交互音频。。[demo](https://loudlinks.rocks/)
## 编辑器
- [MediumEditor](https://github.com/yabwe/medium-editor) - 仿Medium.com的所见即所得在线编辑器工具栏。[demo](https://yabwe.github.io/medium-editor/)
- [Substance](https://github.com/yabwe/medium-editor) - 是一个基于Web的内容自定义编辑器。[demo](http://substance.io/examples/)
- [flatpickr](https://github.com/chmln/flatpickr) - 是一个轻量级的代码高亮库，适用于任何编程语言。[demo](https://chmln.github.io/flatpickr)
- [pen](https://github.com/sofish/pen) - 是一个Markdown编辑器工具。[demo](http://sofish.github.io/pen)
- [aceAce](https://github.com/ajaxorg/ace)（Ajax.org Cloud9 Editor）。[demo](https://ace.c9.io/)
- [CodeMirror](https://github.com/codemirror/CodeMirror)浏览器端的代码编辑器。[demo](http://codemirror.net/)
- [esprima](https://github.com/ariya/esprima)用于综合分析的 ECMAScript 解析器。[demo](https://yabwe.github.io/medium-editor/)
- [quill](https://github.com/quilljs/quill)一个带有 API 的跨浏览器富文本编辑器。([demo](http://quilljs.com/))
- [ckeditor-releases](https://github.com/ckeditor/ckeditor-releases) 适用于每个人的 web 文本编辑器。[demo](http://ckeditor.com/demo)
- [editor](https://github.com/lepture/editor) 一个 markdown 编辑器，但仍在开发中。[demo]( http://lab.lepture.com/editor/)
- [EpicEditor](https://github.com/OscarGodson/EpicEditor) 一个可嵌入的 js Markdown的编辑器，拥有全屏编辑、即时预览、自动保存草稿和离线支持等功能。[demo](http://epiceditor.com)
- [jsoneditor](https://github.com/josdejong/jsoneditor) 查看、编辑和格式化 JSON 的 web 工具。[demo](http://jsoneditoronline.org/)
- [vim.js](https://github.com/coolwanglu/vim.js) 拥有持久化 ~/.vimrc 的 Vim 编辑器的 JavaScript 移植版本。[demo](http://coolwanglu.github.io/vim.js/emterpreter/vim.html)
- [Squire](https://github.com/neilj/Squire) HTML5 富文本编辑器。[demo](http://neilj.github.io/Squire/)
- [TinyMCE](https://github.com/tinymce/tinymce) JavaScript 富文本编辑器。[demo](https://www.tinymce.com/)
- [trix](https://github.com/basecamp/trix) 由 Basecamp 制作，适用于每天写作的富文本编辑器。[demo](https://trix-editor.org/)
- [Editor.md](https://github.com/pandao/editor.md) 由 Basecamp 制作，适用于每天写作的富文本编辑器。[demo](https://trix-editor.org/)
## 字符串
- [selecting](https://github.com/EvandroLG/selecting) - 一个允许你获取用户选定文本的库。
- [string.js](https://github.com/jprichardson/string.js) - 额外的 JavaScript 字符串方法。[demo](http://stringjs.com/)
- [he](https://github.com/mathiasbynens/he) - 健壮的 HTML 实体编码/解码器。
- [multiline](https://github.com/sindresorhus/multiline) - 多行字符串。
- [query-string](https://github.com/sindresorhus/query-string) - 解析和字符串化 URL 查询字符串。
- [URI.js](https://github.com/medialize/URI.js/) - URL 操作库。[demo](http://medialize.github.io/URI.js/)
- [jsurl](https://github.com/Mikhus/jsurl) - 轻量的 URL 操作库。
- [sprintf.js](https://github.com/alexei/sprintf.js) - 实现字符串格式化。
- [url-pattern](https://github.com/snd/url-pattern) - 让 url 和其它字符串进行比正则表达式匹配更简单。字符串和数据可相互转化。
- [Numeral.js](https://github.com/adamwdraper/Numeral-js) - 格式化和操作数字的 JS 库。 [demo](http://numeraljs.com/)
## 表单
- [validator.js](https://github.com/jaywcjlove/validator.js) - 轻量级的JavaScript表单验证，字符串验证。[demo](http://jaywcjlove.github.io/validator.js)
- [List.js](https://github.com/javve/list.js) - 是一个轻量级的为列表、表格或其他任何HTMLL标签增加了搜索，排序，过滤器和灵活性等元素。[demo](http://listjs.com/)
- [Algolia Places](https://github.com/algolia/places/) - 是一个能让你在网页轻易实现搜索栏自动完成功能。[demo](https://community.algolia.com/places/)
- [Cleave.js](https://github.com/nosir/cleave.js) - 是一个会在你输入时格式化你的`<input/>`标签里面的内容。[demo](http://nosir.github.io/cleave.js/)
- [validator.js](https://github.com/sofish/validator.js) - 是一个简单、轻量级，但功能强大的 Validator 组件。[demo](http://sofish.github.io/validator.js/)
- [axios](https://github.com/mzabriskie/axios) - 是一个基于浏览器和node的HTTP请求库，绿色环保只有12kb。
## 存储
- [store.js](https://github.com/jaywcjlove/store.js) - 本地存储localstorage的封装，提供简单的API。[demo](http://jaywcjlove.github.io/store.js)
- [cookie.js](https://github.com/jaywcjlove/cookie.js) - 对操作cookie的封装，提供简单的AIP 兼容IE6。[demo](http://jaywcjlove.github.io/cookie.js)
- [store.js](https://github.com/marcuswestin/store.js) - 为所有浏览器封装了LocalStorage，隐秘地使用localStorage、globalStorage和用户数据。
- [localForage](https://github.com/mozilla/localForage) - 改善后的离线存储。封装了IndexedDB、WebSQL和localStorage。[demo](https://localforage.github.io/localForage)
- [cross-storage](https://github.com/zendesk/cross-storage) - 获得权限后，能跨域名本地存储。
- [basket.js](https://github.com/addyosmani/basket.js) - 用 localStorage 加载和缓存脚本的资源加载器。[demo](https://addyosmani.com/basket.js/)
- [bag.js](https://github.com/nodeca/bag.js) - 可以缓存脚本和加载资源，增加了键值对接口和对localStorage/websql/indexedDB 的支持。
- [basil.js](https://github.com/Wisembly/basil.js) - 智能的 JavaScript 数据持久层库。
- [Cookies](https://github.com/ScottHamper/Cookies) - 客户端 Cookie 操作库。
- [DB.js](https://github.com/aaronpowell/db.js/) - 基于 Promise 的、封装了 IndexedDB 的库。[demo](http://aaronpowell.github.io/db.js/)
- [lawnchair.js](https://github.com/brianleroux/lawnchair/) - 简单的客户端 JSON 存储。[demo](http://brian.io/lawnchair/)
## 动画
- [anime.js](https://github.com/juliangarnier/anime) - 是一个灵活轻便的JavaScript动画库。[demo](http://codepen.io/collection/XLebem/)
- [three.js](https://github.com/mrdoob/three.js) - 是一个JS 3D库。[demo](https://threejs.org/)
- [loaders.css](https://github.com/ConnorAtherton/loaders.css) - CSS 动画加载效果。[demo](https://connoratherton.com/loaders)
- [Hover.css](https://github.com/IanLunn/Hover) - 一款基于 CSS3 的悬停特效合集。[demo](http://ianlunn.github.io/Hover/)
- [Effeckt.css](https://github.com/h5bp/Effeckt.css) - 一个包含众多精妙的 CSS3 切换和动画效果库。[demo](http://h5bp.github.io/Effeckt.css/)
- [Magic Animations](https://github.com/miniMAC/magic) - 一个独特的 CSS3 动画特效包。[demo](https://minimamente.com/example/magic_animations/)
- [Transformicons](https://github.com/grayghostvisuals/transformicons) - 一个结合 SVG、CSS 和 HTML 技术，让图标、按钮和符号具有变种（特殊）动画效果的库。[demo](http://www.transformicons.com/)
- [SpinKit](https://github.com/tobiasahlin/SpinKit) - 一款 CSS 加载动画合集，可高度自定义动画效果。[demo](http://tobiasahlin.com/spinkit/)
- [d3-ease](https://github.com/d3/d3-ease) - 这是一个让动画更为平滑的 Easing 库。
- [ScrollMagic](https://github.com/janpaepke/ScrollMagic) - 一个用来创建魔幻滚动交互的 JavaScript 库，可以像使用进度条一样使用滚动条。[demo](http://scrollmagic.io/)
- [ScrollReveal](https://github.com/jlmakes/scrollreveal) - 一款页面滚动显示动画，可以播放一次也可以播放无限次，能让页面更加有趣，更吸引用户眼球。。[demo](https://scrollrevealjs.org/)
- [RELLAX.js](https://github.com/dixonandmoe/rellax) - 是一款主打轻量级的纯 JavaScript 视差效果库。[demo](https://dixonandmoe.com/rellax/)
- [CountUp.js](https://github.com/inorganik/CountUp.js) - 可以用来快速创建以一种更有趣的动画方式显示数值数据。[demo](https://inorganik.github.io/countUp.js/)
- [Dynamics.js](http://dynamicsjs.com/) - 可以创建物理运动动画效果 JavaScript 库。[demo](https://github.com/michaelvillar/dynamics.js)
- [Mojs](https://github.com/legomushroom/mojs) - 一个拥有极简的声明式 API ，能够轻松掌控运动轨迹，为运动图形而生的工具库。[demo](http://mojs.io/)
- [React FLIP Move](https://github.com/joshwcomeau/react-flip-move) - 一个翻转移动的库，旨在解决当列表的顺序发生变化时，项目列表动画化的问题。[demo](http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle?_k=og3e8m)
- [tween.js](https://github.com/tweenjs/tween.js) - 是一个JS 平滑动画库。[demo](http://tweenjs.github.io/tween.js/examples/12_graphs_custom_functions.html)
- [vivus](https://github.com/maxwellito/vivus) - JavaScript库，使SVG绘制动画。[demo](http://maxwellito.github.io/vivus/)
- [Choreographer-js](https://github.com/christinecha/choreographer-js) - 是一个用于处理复杂动画的简单库。[demo](https://christinecha.github.io/choreographer-js/)
- [minirefresh](https://github.com/minirefresh/minirefresh) - 优雅的H5下拉刷新。零依赖。[demo](https://minirefresh.github.io/minirefresh-doc/minirefresh-doc/guid/guid_effect.html)
## 时间
- [moment](https://github.com/moment/moment) - 是一个日期处理类库,用于解析、检验、操作、以及显示日期。[demo](http://momentjs.com)
- [timesheet.js](https://github.com/sbstjn/timesheet.js) - 是一个时间展示片段插件。[demo](https://sbstjn.github.io/timesheet.js)
- [date.js](https://github.com/jaywcjlove/date.js) - 是一个格式化时间、过去时间展示、解决因时区变更插件。
- [timeago.js](https://github.com/hustcc/timeago.js) - 格式化时间显示多久以前的插件。 [demo](http://timeago.org/)
- [rome](https://github.com/bevacqua/rome) - 可定制的日期（和时间）选择器。无依赖，可选 UI。 [demo](https://bevacqua.github.io/rome/)
- [moment-timezone](https://github.com/moment/moment-timezone) - 基于 moment.js 的时区库。[demo](http://momentjs.com/timezone)
- [date](https://github.com/MatthewMueller/date) - 拥有人性化的 Date() 方法。[demo](http://matthewmueller.github.io/date/)
- [ms.js](https://github.com/rauchg/ms.js) - 小巧的毫秒转换工具。
## 其它
- [hotkeys](https://github.com/jaywcjlove/hotkeys) - 是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键。[demo](http://jaywcjlove.github.io/hotkeys/ )
- [clipboard.js](https://github.com/zenorocha/clipboard.js) - 现代复制到剪贴板。没有Flash，gzip压缩只有3KB 。[demo](https://clipboardjs.com/)
- [translater.js](https://github.com/jaywcjlove/onlinenetwork) - 这是一个利用HTML注释的页面翻译解决方案。[demo](https://jaywcjlove.github.io/translater.js/)
- [Push.js](https://github.com/jaywcjlove/translater.js) - 是一个跨浏览器的Javascript桌面通知插件。[demo](http://nickersoft.github.io/push.js/)
- [onlinenetwork](https://github.com/jaywcjlove/onlinenetwork) - js判断是否断网了。
- [iNotify](https://github.com/jaywcjlove/iNotify) - 是一个实现浏览器的 title 闪烁、滚动、声音提示、chrome、等系统通知。[demo](http://jaywcjlove.github.io/iNotify)
- [tesseract.js](https://github.com/naptha/tesseract.js) - 是一个文字识别转换，可以运行在浏览器和服务器NodeJS上。[demo](http://tesseract.projectnaptha.com/)
- [Leaflet.js](http://github.com/Leaflet/Leaflet) - 是一个开源的移动友好交互式地图 JavaScript 库。体积仅有 33 KB。[demo](http://leafletjs.com/)
- [CurrencyFormatter.js](https://github.com/osrec/currencyFormatter.js/) - 是一款简单纯JS格式化155种不同国家货币格式库，gzip压缩后仅7KB。[demo](https://osrec.github.io/currencyFormatter.js/)
- [Feature.js](https://github.com/osrec/currencyFormatter.js/) - 是一个快速、简单、轻量级的浏览器功能检测库。它没有任何的依赖，并且 gzip 压缩后仅有1kb。[demo](hhttp://featurejs.com/)
- [screenfull.js](https://github.com/sindresorhus/screenfull.js) - 极小、跨平台的 JavaScript 全屏插件。[demo](https://sindresorhus.com/screenfull.js/)
## 加载器
- [requirejs](https://github.com/requirejs/requirejs) - JS模块化工具
- [SeaJS](https://github.com/seajs/seajs) - JavaScript模块加载框架
- [loadjs](https://github.com/muicss/loadjs) - JavaScript模块加载框架
- [ESL](https://github.com/ecomfe/esl) - 浏览器端AMD标准加载器
## 构建工具
- [webpack](https://github.com/webpack/webpack) - 前端构建工具
- [Gulp](https://github.com/gulpjs/gulp) - 自动化构建工具
- [Babel](https://github.com/babel/babel) - 下一代JavasScript语法编译器
- [PostCSS](https://github.com/postcss/postcss) - 利用JS插件转换CSS样式的工具
- [Grunt](https://github.com/gruntjs/grunt) - JavaScript世界的构建工具
- [rollup.js](https://github.com/rollup/rollup) - JS模块打包器
- [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard) - webpack开发服务器的CLI仪表板
- [traceur-compiler](https://github.com/google/traceur-compiler) - 支持ES6的JS编译器
- [brunch](https://github.com/brunch/brunch) - 超快的HTML5构建工具
- [Helium-css](https://github.com/geuis/helium-css) - 显示网站中未使用的CSS
## 测试
- [mocha](https://github.com/mochajs/mocha) - JavaScript 测试框架
- [ESLint](https://github.com/eslint/eslint) - JavaScript代码检查工具
- [JSHint](https://github.com/jshint/jshint) - JavaScript语法和风格检查工具
- [casperjs](https://github.com/casperjs/casperjs) - 开源的导航脚本处理和测试工具
- [Nightwatch](https://github.com/nightwatchjs/nightwatch) - 用户界面自动化测试框架
- [istanbul](https://github.com/gotwarlost/istanbul) - JS代码覆盖工具
- [intern](https://github.com/theintern/intern) - JavaScript测试系统
- [benchmark.js](https://github.com/bestiejs/benchmark.js) - 强大的JavaScript基准库
- [loadtest](https://github.com/alexfernandez/loadtest) - HTTP或WebSockets URL的负载测试
- [JSCover](https://github.com/tntim96/JSCover) - JavaScript代码覆盖测量工具
## 包管理器
- [yarn](https://github.com/yarnpkg/yarn) - 新的 Hadoop 资源管理器
- [bower](https://github.com/bower/bower) - web包管理器
- [npm](https://github.com/npm/npm) - NodeJS包安装的管理模块
- [ndm](https://github.com/720kb/ndm) - npm桌面管理器
## CDN
- https://cdnjs.com
- http://cdnjs.net
- http://www.jsdelivr.com
- http://unpkg.com
- http://rawgit.com
- http://staticfile.org
- http://www.bootcdn.cn
- http://cdn.baomitu.com
- http://lib.sinaapp.com
- http://cdn.code.baidu.com
- http://jscdn.upai.com
- https://www.asp.net/ajax/cdn
- http://libs.sun0769.com
- https://css.net
- https://developers.google.com/speed/libraries/