Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/iamjoel/front-end-plugins

:whale2: Web 前端常用插件
https://github.com/iamjoel/front-end-plugins
collection front-end plugins
Last synced: 10 days ago
JSON representation
:whale2: Web 前端常用插件
Host: GitHub
URL: https://github.com/iamjoel/front-end-plugins
Owner: iamjoel
Created: 2015-01-11T01:35:49.000Z (almost 10 years ago)
Default Branch: master
Last Pushed: 2022-05-20T00:36:55.000Z (over 2 years ago)
Last Synced: 2024-10-22T10:30:49.266Z (17 days ago)
Topics: collection, front-end, plugins
Language: JavaScript
Homepage:
Size: 2.49 MB
Stars: 999
Watchers: 74
Forks: 320
Open Issues: 1
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

awesome-github-star - front-end-plugins
README

        # Web 前端常用插件

## 目录

* [工具类](#tool)

* [浏览器增强类](#browser-strong)

* [表单类](#form)

* [图片类](#img)

* [图标类](#icon)

* [UI 框架](#ui-framework)

* [UI 组件类](#ui)

* [用户体验增强](#ux)

* [动画](#anim)

* [SVG](#svg)

* [测试](#test)

* [其他类](#other)

* [Bootstrap相关类](#bootstrap)

* [Vue.js 相关](#vue)

* [React 相关](#react)

* [小程序](#min-app)

* [GraphQL](#graphql)

* [JS Plugins仓库](#repository)

## 工具类

* 方便操作对象，数组等的工具库

    * [underscore.js](http://underscorejs.org/)

    * [lo-dash](https://lodash.com/) 与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建

    * [Sugar](https://github.com/andrewplummer/Sugar/) 在原生对象上增加一些工具方法

    * [functional.js](https://github.com/leecrossley/functional-js/) 提够了一些Curry的支持

    * [bacon.js](https://github.com/baconjs/bacon.js/) 函数式编程，cool

    * [streamjs](https://github.com/winterbe/streamjs) 用流的方式来对数组，对象进行系列操作

    * [clone.js](https://github.com/pvorb/clone) 对各种对象的深度复制。

    * [deepmerge](https://github.com/TehShrike/deepmerge) 深度合并数组和对象。

* 数据类型

    * 字符串

        * [strman](https://github.com/dleitee/strman) 字符串操作库。它为各种实用程序、格式选项和字符串转换，提供了超过 60 种实用的方法。

    * 数字

        * [BigDecimal.js](https://github.com/dtrebbien/BigDecimal.js) 提高精度的数字操作

    * 对象

        * [Watch.js](https://github.com/melanke/Watch.JS) 监视对象或属性的变化

    * 时间

        * [Moment.js](http://momentjs.com/)

        * [day.js](https://github.com/iamkun/dayjs) 和 Moment.js 一样的 API。只有 2KB。

        * [date-fns](https://date-fns.org/docs/) 现代时间库。

        * [datejs](http://www.datejs.com/)

    * 正则

        * [rewrap](https://github.com/taijiweb/rewrap) 正则工具库。相关插件[regexp-frequent](https://github.com/taijiweb/regexp-frequent),[rewrap-patch](https://github.com/taijiweb/rewrap-patch)

    * [parameter](https://github.com/node-modules/parameter) 验证参数的格式

* 生成 uuid

  * [Nano ID](https://github.com/ai/nanoid/)

* 与服务器端交互

  * [axios](https://www.npmjs.com/package/axios) 支持浏览器和 Node.js 的HTTP请求工具。axios 不支持jsonp。

  * [jsonp](https://github.com/webmodules/jsonp)

* 异步流程控制

    * 发布订阅

        * [eventproxy](https://github.com/JacksonTian/eventproxy) 朴灵出品

        * [Arbiter.js](http://arbiterjs.com/) [详细](detail/Arbiter)

    * [q](https://github.com/kriskowal/q/) Promise风格的

    * [Async.js](https://github.com/caolan/async/)

* 加载器

    * [little-loader](https://github.com/walmartlabs/little-loader) JS 加载器。Webpack 不支持加载外部js，可用这个。

* mock

    * [Mock.js](https://github.com/nuysoft/Mock) 生成随机数据和mock Ajax 请求

    * [jquery-mockjax](https://github.com/jakerella/jquery-mockjax) [mock](http://baike.baidu.com/view/2445748.htm) ajax请求

* 浏览器探测

    * [Bowser](https://github.com/ded/bowser) 探测具体浏览器和版本

    * [ua-parser-js](https://github.com/faisalman/ua-parser-js) 探测具体浏览器和版本，操作系统，设备类型等

* 调试

    * [Eruda](https://github.com/liriliri/eruda/blob/master/doc/README_CN.md) Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。

    * [vConsole](https://github.com/WechatFE/vConsole) 轻量、可拓展、针对手机网页的前端开发者调试面板插件。微信前端做。

    * [console-polyfill](https://github.com/paulmillr/console-polyfill/) 能放心的使用 console.log()之类的console方法

    * [log](https://github.com/adamschwartz/log) 让控制台输出的log有样式

* [uri.js](https://github.com/medialize/URI.js) uri操作

* [Cookie](https://github.com/ScottHamper/Cookies) 增删改cookie的工具库

* [store.js](https://github.com/marcuswestin/store.js/) 对 localStorage 的封装。兼容 IE6+。

* [director](https://github.com/flatiron/director) 前端路由库 [详细](detail/director)

* [JSDoc](http://usejsdoc.org/) 根据javascript文件中注释的信息，生成API文档 [详细](detail/JSDoc)

* [hotkeys](http://jslite.io/hotkeys/) 键盘事件的封装

* [MD5](https://github.com/pvorb/node-md5) 用 MD5 的方式加密文件的库

* [Exif.js](https://github.com/exif-js/exif-js) 读取 JPEG 图片的拍摄信息。可以通过拍摄信息中的 Orientation 来解决 ios 手机上传竖拍照片会逆时针旋转90度的问题。

* [download](https://github.com/kevva/download) 实现下载的库。支持 url 和流。 [详细](detail/download)

* 模板引擎

  * [Handlebar](http://handlebarsjs.com/installation.html)

  * [Ejs](http://www.embeddedjs.com/)

  * [Jade](http://jade-lang.com/)

* 生成pdf

  * [jsPDF](https://github.com/MrRio/jsPDF) 在浏览器端生成 pdf。

  * [pdfkit](http://pdfkit.org/)

* Excel库

  * [Node XLSX](https://github.com/mgcrea/node-xlsx) 支持解析和生成 xlsx 的问题。

  * [js-xlsx](https://github.com/SheetJS/js-xlsx)

* 打印

  * [vuePlugs_printjs](https://github.com/xyl66/vuePlugs_printjs) 基于 Vue。

* [compass.js](http://ai.github.io/compass.js/) 指南针。只有在手机浏览器上才能用。

* [中国行政区域数据](https://github.com/airyland/china-area-data)

* canvas

  * [jcanvas](https://projects.calebevans.me/jcanvas) 基于 jQuery 的 canvas 工具库，支持托拽。[画画的Demo](https://projects.calebevans.me/painter/)

* [lerna](https://github.com/lerna/lerna) 对一个项目中包含若干个 npm 包的管理。对这几个npm包内部依赖版本的管理和npm包的发布比较方便。

* [TimeCat](https://github.com/oct16/TimeCat/blob/master/README.cn.md) 一套网页录屏的解决方案，利用其独特的算法，提供超高性能，超高压缩比的网页无损录制。可以广泛运作于监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景。

## 浏览器增强类

### 让一些旧浏览器变牛逼的库

* [Selectivizr](https://github.com/keithclark/selectivizr)  让IE 6-8一些的css3选择器

* [ieBetter](https://github.com/zhangxinxu/ieBetter.js) 让ie6-8有高级浏览器的特性

* [ExplorerCanvas](https://github.com/arv/ExplorerCanvas) 让IE8-的浏览器支持canvas

* [CSS3 Pie](http://css3pie.com/) 让IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js时，box-radious的元素有背景色时，不显示背景色。。。

* [formFive](http://etiennetalbot.github.io/formFive/) 让旧的浏览器支持HTML5表单的一些特性，如 placeholder,autofocus

* [https://github.com/anselmh/object-fit](https://github.com/anselmh/object-fit) 让浏览器支持`object-fit`这css规则

* [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) 一堆Polyfills

* [flexibility](https://github.com/jonathantneal/flexibility) 让旧的 IE 也支持 Flexbox

### 选择器增强

* [Lining.js](https://github.com/zmmbreeze/lining.js) 让浏览器实现类似`::nth-line(), ::nth-last-line()`的效果

### CSS 兼容性

* [prefixfree](https://github.com/LeaVerou/prefixfree/) 根据 caniuse.com 数据库自动补全 CSS 私有前缀

* [stickybits](https://github.com/dollarshaveclub/stickybits) `position: sticky` polyfills。

## 表单类

* [jquery-file-upload](https://github.com/blueimp/jQuery-File-Upload) 上传文件组件 [详细](detail/fileUpload)

* [zTree](http://www.treejs.cn/v3/main.php) 文件树形视图控件 [详细](detail/ztree)

* [Treed](http://colorify.rocks/index.html) 树编辑器。感觉展示的感觉很像思维导图

* [FileAPI](https://github.com/mailru/FileAPI) 对文件选择框内的文件的一些处理

* [autosize](https://github.com/jackmoore/autosize) 让 文本域(textarea) 的高度随着文字内容的变高而变高。

### 表单验证

* [.Validate](https://github.com/jzaefferer/jquery-validation) [详细](detail/validate)

* [jQuery-Validation-Engine](http://posabsolute.github.io/jQuery-Validation-Engine/)

* 身份证验证

  * [id-card-uitls](libs/id-card-uitls.js)

  * [IdCard](https://github.com/NoBey/IdCard) 身份证的工具库，支持身份证号验证，获取地址，生日，男女等信息。

### 表单元素美化

* [uniform](http://uniformjs.com/) 提供对下拉框，单，复选框，按钮等表单元素的美化

* [select2](http://ivaynberg.github.io/select2/index.html) 多选下拉框

* [selectivity](http://arendjr.github.io/selectivity/) 和unfirom比较类似

* [DropKick](http://robdel12.github.io/DropKick/) 下拉框，单，多选。外观比uniform好

* [switchery](http://abpetkov.github.io/switchery/) ios7风格的开关组件

* [nouislider](https://refreshless.com/nouislider/) 用滚动条来设置/控制（音量等）

* 滑块/Range

  * [vue slider component](https://github.com/NightCatSama/vue-slider-component) 基于 Vue。

  * [slider](https://github.com/react-component/slider) 基于 React。

  * [range.css](http://danielstern.ca/range.css/) 美化`input[type=range]`元素的外观

* [Colorion](http://gradientbuttons.colorion.co/) 背景是渐变色的按钮。hover 时有动画效果。

## 图片类

* [holderjs](http://imsky.github.io/holder/) 生成占位图片

* [imagesLoaded](http://desandro.github.io/imagesloaded/) 选取的图片都加载好后执行调回

* [gif.js](https://github.com/jnordberg/gif.js) 生成 gif 文件。

* [core-video-to-gif](https://github.com/JackPu/core-video-to-gif) 将视频截取为 gif 的前端 JavaScript 类库。

* [CSSgram](https://github.com/una/CSSgram) 用CSS3的Filter实现Instagram滤镜的库

## 图标类

* [Icon Font汇总](https://github.com/lvwzhen/iconpark)

* SVG做的图标

    * [svgicons](http://svgicons.sparkk.fr/)

    * [iconic](https://useiconic.com/icons/)

    * [hybicon.js](http://hybicon.softwaretailoring.net/documentation.html) 带交互效果。如 hover, click。 [详细](detail/hybicon)

* HTML字符实体图标

    * http://www.amp-what.com/

* [transformicons](http://www.transformicons.com/) 图标点击时，会有一些变换效果。如，加号变成叉号

* [css3patterns](http://lea.verou.me/css3patterns/) css3 做的可平铺纹理。浏览器兼容性不好。

### 浏览图片

* [fancybox](http://fancyapps.com/fancybox/) 弹出查看图片，视屏等等 [demo](http://fancyapps.com/fancybox/demo/)

* [yoxview](http://www.yoxigen.com/yoxview/) 弹出查看图片，图片尺寸缩放很自然

### 图片墙

* [wookmark](http://www.wookmark.com/jquery-plugin)

## UI 框架

* [WeUI](https://github.com/weui/weui) 由微信官方设计团队为微信 Web 开发量身设计。

* [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile) 阿里巴巴国际UED前端出品的移动端UI库。

* [Framework7](http://framework7.io/)

* [UIKit](https://getuikit.com/) Web 组件库，不依赖任何框架，组件类型多、功能强。

* [wired elements](https://github.com/wiredjs/wired-elements) 手绘效果的组件库。它的底层是 Web components。

## UI 组件类

### 拖拽

* [dragula](https://github.com/bevacqua/dragula) 支持Draggable，Dropable和Sortable。感觉比jqueryUI的轻量级，好用的样子

* [angular-dragula](http://bevacqua.github.io/angular-dragula/) dragular 官方的 angular 版本

* [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) 支持托拽和自定义大小网格系统。

### 数据可视化(图表)

* [F2](https://github.com/antvis/f2/blob/master/README.zh-CN.md) 阿里出品。为移动端而生。

* [Echarts](http://echarts.baidu.com/) 百度出品。 [Vue 版 Echart](https://github.com/ecomfe/vue-echarts)。

* [D3.js](https://d3js.org/) 超灵活的做数据可视化的工具。

* [highcharts](http://www.highcharts.com/) 功能强大。是收费的。

* [Plottable.JS](http://plottablejs.org/) 基于D3的一个图表库

* [flot](http://www.flotcharts.org/) 文档不给力

* [chartJs](http://www.chartjs.org/) [中文文档](http://www.bootcss.com/p/chart.js/docs/)  demo很漂亮，很清晰。比较轻量级。

* [ichartJs](http://www.ichartjs.com/) 中国的一个家伙搞的，感觉还不错。

* k线图(k line)

  * [Echarts的k线图](http://echarts.baidu.com/echarts2/doc/doc.html#K) 功能比较简单

  * [kline](https://github.com/chxj1992/kline) 功能比较多，支持 webpack 等。

* 流程图&脑图

   * [GGEditor](https://ggeditor.com/zh-CN) 基于 G6 和 React 的可视化图编辑器。支持流程图和脑图。阿里出品。

### 时间选取组件

* [foundation-datepicker](http://foundation-datepicker.peterbeno.com/example.html)

* [DatePicker](https://github.com/foxrunsoftware/DatePicker/) 一个简单的日历 [详细](detail/datepicker)

* [full calendar](http://fullcalendar.io/) 支持脱放的方式来改变待办事宜的时间

* [Simple Events Calendar](http://preview.codecanyon.net/item/simple-events-calendar-js/full_screen_preview/462149?ref=themespotters) 外观很喜欢。收费 5$

* [jQuery ui datepicker](http://jqueryui.com/datepicker/) 经典，不是很好看

* [pickadate](http://amsul.ca/pickadate.js/) 轻量级，手机友好的，漂亮。但貌似只能在弹出层中显示，而没有下拉这种方式显示。

* [zebra-datepicker](http://stefangabos.ro/jquery/zebra-datepicker/) 可配置性很强。但貌似只能在弹出在右上方。。。

* [bootstrap-datepicker](http://www.eyecon.ro/bootstrap-datepicker/) bootstrap风格。

* [dateRangePicker](https://github.com/dangrossman/bootstrap-daterangepicker) 选取时间段。bootstrap风格。该组件依赖Twitter Bootstrap, Moment.js和jQuery.

* [v-calendar](https://github.com/nathanreyes/v-calendar) 基于Vue (版本需要 2.5+)。单日历，双日历，日期范围。

### 滚动无限加载

* [vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll) 饿了么出品。

* [vue-recyclerview](https://github.com/hilongjw/vue-recyclerview) 高性能的滚动无限列表加载。为了提高性能，代码有重复利用 DOM。

* [React Infinite Scroller](https://github.com/CassetteRocks/react-infinite-scroller) 基于 React。

### 自定义/美化滚动条

* [better scroll](https://github.com/ustbhuangyi/better-scroll) [文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/) 在PC上使用时的推荐配置： `{scrollbar:true,mouseWheel: {speed: 20,invert: false}}`

* [perfect scrollbar](https://github.com/noraesae/perfect-scrollbar) 轻量级的滚动条。外观与mac上chrome的滚动条一样。 对 IE11- 兼容性不好。

* [iscroll](http://iscrolljs.com) 在移动设备上用不错

### 滚动条其他

* [ScrollFix](https://github.com/joelambert/ScrollFix) 对 IOS 的滚动优化：局部滚动。配合使用： `overflow-y: scroll; /* has to be scroll, not auto */-webkit-overflow-scrolling: touch`。

* [xscroll](https://github.com/huxiaoqi567/xscroll) 滚动相关的一堆牛逼功能。

### 加载(Loding)效果

* [CSS Spinners](https://github.com/jlong/css-spinners) CSS做的

* [Loaders.css](https://connoratherton.com/loaders) CSS做的

### 表格组件

* [jsGrid](http://js-grid.com/) Data Grid。 [详细](detail/jsGrid)

* [backgrid](http://backgridjs.com/) 基于Backbone.js的DataGrid

* [excellentexport](https://github.com/jmaister/excellentexport) 把表格的内容生成excel。兼容 Firefox, Chrome, IE6+

* [datatables](https://www.datatables.net/) 表格可交互（对内容进行排序，删除等）

* [handsontable](https://handsontable.com/) 生成Excel外观的数据

* [JSpreadsheets](http://jspreadsheets.com/) 表格数据的组件库

* [jQuery Grid](http://gijgo.com/grid) by gijgo.com

### 选取颜色

* [Spectrum](http://bgrins.github.io/spectrum/?color=&color2=%233355cc&color3=%23000000#toc0)

### 分享到SNS

* [JiaThis](http://www.jiathis.com/) 生成分享代码。

### 富文本编辑器

* [Vue-Quill-Editor](https://github.com/surmon-china/vue-quill-editor) 将 [Quill](https://github.com/quilljs/quill) 封装成 Vue 组件。图片上传默认是把图片转成Base64来存，也支持监听上传事件，来将图片上传到服务器。

* [ace](https://ace.c9.io/) 代码编辑器，可以用来做demo演示

* [ckeditor](http://ckeditor.com/)

* [ueditor](http://ueditor.baidu.com/website/) 百度做的。

* [tinymce](https://www.tinymce.com/tryit/full.php) 对html内容进行实时的编辑

* [summernote](https://github.com/summernote/summernote) 在移动设备上用不错

### 通知组件

* [notie.js](https://github.com/jaredreich/notie)

### HTML5播放器

* [jwplayer](https://www.jwplayer.com/) 被大量网站使用

* [html5media](https://html5media.info/) 简单的h5player，轻量级

* [jplayer](http://jplayer.org/) 功能强大，可换肤

## 地图

* [Leaflet](https://leafletjs.com/index.html) 开源的对移动端友好的地图工具库。

### 展示

* [Impress.js](https://developer.cdn.mozilla.net/media/uploads/demos/b/a/bartaz/54e3827142e4149a5c01db64c9517c84/impressjs_1333223745_demo_package/index.html#/bored) 各种旋转，和奇特的体验

* [fullPage](http://alvarotrigo.com/fullPage/) 全屏显示。用滚轮来翻页 [详细](detail/fullpage) [2.9.7](https://github.com/alvarotrigo/fullPage.js/releases/tag/2.9.7) 以后的版本是收费的。

* [zepto.fullpage](https://github.com/yanhaijing/zepto.fullpage) 专注于移动端的fullPage.js，依赖Zepto

* [pagePiling](http://alvarotrigo.com/pagePiling/) 和fullPage类似

* [turn.js](https://github.com/blasten/turn.js) 做一本书，带漂亮的翻页的效果

* [timelinejs](https://github.com/ilkeryilmaz/timelinejs/) 用时间轴方式展示信息。

* [coverflow](https://github.com/quietshu/coverflow)  苹果上唱片封面的效果（Apple Cover Flow UI effect）。

### 幻灯

* [vue-easy-slider](https://github.com/shhdgit/vue-easy-slider) 基于 Vue。

* [SuperSlide](http://www.superslide2.com/)/[TouchSlide](http://www.superslide2.com/) 国产库！兼容IE6，焦点图/幻灯片/Tab标签切换/图片滚动/无缝滚动等常见效果，支持移动端

* [slidesjs](http://slidesjs.com/) 挺好用的，只是那幻灯导航的CSS都要自己写，呵呵 [详细](detail/jquery.slide)

* [iSlider](https://github.com/BE-FE/iSlider) 无任何插件依赖的手机平台javascript滑动组件 [详细](detail/iSlider)

* [bgstretcher](http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html) 全屏幻灯，会随着页面大小的变化而变化。

* [Swiper](https://github.com/nolimits4web/swiper/) 开源、免费、强大的移动端触摸滑动插件 [Swiper中文网](http://www.swiper.com.cn/)

* [coin-slider](https://github.com/kopipejst/coin-slider/) 兼容IE6，不过其切换方式是一块块的。不能配置切换方式

* [wowslider](http://wowslider.com/rq/jquery-image-viewer/)  幻灯切换时各种很炫的效果。收费。

* [cycle2](http://jquery.malsup.com/cycle2/) 普通的幻灯，竟然不支持垂直滚动

* [jcarousel](http://sorgalla.com/jcarousel/) 普通的幻灯，不兼容IE6

* [reveal](https://github.com/hakimel/reveal.js) 3d滚动。做ppt相当不错

* [nodePPT](https://github.com/ksky521/nodePPT) 国人做的，做ppt也相当不错。有些方面比 reveal做的还好。但生成导出的html有些问题

* [roundabout](https://github.com/fredleblanc/roundabout) 3d切换，看的后面图片的边

* [SmartPhoto](https://github.com/appleple/SmartPhoto) 专为移动设备打造的响应式图像查看器，它易于使用，并支持手势触摸操作，例如捏合或者滑动。同时，它还具备对初学者友好的大量实用的事件处理器，以及用户自定义选项。

### 弹出框

* [Magnific-Popup](https://github.com/dimsemenov/Magnific-Popup) 兼容PC，Mobile。还不错，有5k+的star

* [layer](https://github.com/sentsin/layer) 国人开发的，兼容ie6+。不喜欢其调用方式。

### 二维码

* [QR Code Generator](https://github.com/kazuhikoarase/qrcode-generator/tree/master/js)

* [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode) 生成二维码图片的jQuery 插件，很好用。该插件是基于 QR Code Generator 开发的。

### 动画效果

* [animate.css](https://github.com/daneden/animate.css) 预设了很多动画。

* [transformjs](https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs) Made css3 transform super easy。腾讯出品。

* [Scence.js](https://scene.js.org/) 做基于时间线的动画库。具体的若干时间点，给元素设置指定的样式。

* [mixitup](https://mixitup.kunkalabs.com/) 用漂亮的动画效果来完成排序和筛选

* [jQuery.Marquee](https://github.com/aamirafridi/jQuery.Marquee) 跑马灯效果

* [quickflip](http://jonraasch.com/blog/quickflip-jquery-plugin) 卡片翻转效果

* [卡片翻转效果2](http://nnattawat.github.io/flip/) 兼容性可以。写的比较简单：1，只支持x方向翻转 2,类名都是规定好的 3，只能被调用一次。 需要改写一下。我的改进版见[这里](https://github.com/iamjoel/be-grace-front-end-developer/tree/master/my-lib/flip/quickflip.js)

* [TheaterJS](https://github.com/Zhouzi/TheaterJS) 模拟两个人在屏幕上对话

* [midnight.js](https://github.com/Aerolab/midnight.js) 文字颜色随着背景变，屌炸了

* [color-animation](http://www.bitstorm.org/jquery/color-animation/) jquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。

* [transit](https://github.com/rstacruz/jquery.transit) 对元素进行css的变换

* [tagcanvas](http://www.goat1000.com/tagcanvas.php) 3D标签云效果 [详细](detail/tagcanvas)

* [iconate](https://github.com/bitshadow/iconate) 图片切换动画

* [Snap.js](https://github.com/jakiestfu/Snap.js/) 左/右侧导航的出现效果

* [CSS shake](http://elrumordelaluz.github.io/csshake/) 抖动动画

* [ClickSpark.js](http://www.ymc.ch/sandbox/clickspark/demo.html) 点击后的一些酷炫的效果

#### 视觉差插件

* [ScrollMagic](https://github.com/janpaepke/ScrollMagic) 对 superscrollorama 的重写。

* [scrollorama](https://github.com/johnpolacek/scrollorama) 比较简单

* [superscrollorama](https://github.com/johnpolacek/superscrollorama) 能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。

* [scrolldeck](https://github.com/johnpolacek/scrolldeck.js)

* [stellar.js](https://github.com/markdalgleish/stellar.js) 让图片或背景图以不同速率移动，已停止维护。

* [lax.js](https://github.com/alexfoxy/lax.js)

### flash

* [swfobj](https://code.google.com/archive/p/swfobject/wikis/documentation.wiki) 能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。 [详细](detail/flash)

### 抽奖

* [wScratchPad](https://github.com/websanova/wScratchPad) 刮刮卡刮奖效果

* [jqueryrotate](http://beneposto.pl/jqueryrotate/) 旋转插件。可以用来做转盘抽奖效果

### 其他工具类

* [vue-clickaway](https://github.com/simplesmiler/vue-clickaway) 点击元素外侧，元素隐藏。

## 用户体验增强类

* [Intro.js](http://usablica.github.io/intro.js/) 用来介绍网站的功能很不错。也可以做新手引导。

* [blockUI](http://jquery.malsup.com/block/) Lolding组件。

* [simple-hint](https://github.com/catc/simple-hint) 提示信息。用css做的。兼容性IE 9+。

* [dotdotdot](https://github.com/FrDH/jQuery.dotdotdot) 文字溢出时，添加在文字末尾加省略号

* [jQuery-menu-aim](https://github.com/kamens/jQuery-menu-aim) 二级菜单的切换如Amazon主页上一样迅速

* [AnythingZoomer](https://github.com/CSS-Tricks/AnythingZoomer/) 放大镜功能

* [PRISM](http://prismjs.com/) 代码高亮

* [please](http://www.checkman.io/please/) 按要求随机舒服的颜色

* [Awesomplete](http://leaverou.github.io/awesomplete/) 输入的智能提示，自动补全

* [proTip](http://protip.rocks/) 提示。感觉比 Bootstrap 的 tip 好

* [Hammerjs](http://hammerjs.github.io/) 手势库。封装了 Swipe, Tap, Pinch, Pan等手势

* [favico.js](http://lab.ejci.net/favico.js/) 动态改 favicon。牛逼是可以放视频~

* [elevator.js](https://github.com/tholman/elevator.js) 用做电梯的方式，伴着背景乐，返回到页面顶部。 Just for fun。

* [panorama_viewer](https://github.com/peachananr/panorama_viewer) 轻量级全景图。 代码不足两百行，基于 jQuery。

* Toast

  * [cxlt](https://github.com/chengxulvtu/cxlt-vue2-toastr) 基于 Vue2。

* [Darkmode.js](https://github.com/sandoche/Darkmode.js) 给网站加上 dark 模式。

* [vue-countTo](https://github.com/PanJiaChen/vue-countTo) 动画到跳到某个数字。Vue 组件。

* [pagemap](https://larsjung.de/pagemap/) 给长页面加网页的缩略图。

## 动画

* [velocity](https://github.com/julianshapiro/velocity) 提高Jquery动画的性能。以及颜色动画之类的新特性。

## SVG

* [Snap.svg](http://snapsvg.io/) 操作 SVG 的 JS 库。号称 SVG 的 jQuery。[demo](detail/snap)

* [walkway](https://github.com/ConnorAtherton/walkway) 以动画的方式，渐渐地画出 SVG 的路径。

## 测试

* 测试框架

  * [Jest](https://jestjs.io/)

  * Mocha

* 断言库

  * [Power Assert](https://github.com/power-assert-js/power-assert)

  * Chai

  * Should

* Snoion

* [DeviceMock.js](http://rm-labo.com/labo/devicemock/) mock 设备。

* 端到端测试

  * Puppeteer

  * [BackstopJS](https://github.com/garris/BackstopJS)

  * 录制浏览器交互并生成测试脚本

    * [Puppeteer Recorder](https://github.com/checkly/puppeteer-recorder) 生成 Puppeteer 的。

    * [softest](https://github.com/prprprus/softest/blob/master/README-zh.md) 基于 Puppeteer 构建的。支持多 Tab，截图等 Puppeteer Recorder 不支持的功能。

## 其他类

* 复制到剪贴板

  * [clipboard.js](https://github.com/zenorocha/clipboard.js) Modern copy to clipboard. No Flash. Just 3kb gzipped.

  * [ZeroClipboard](https://github.com/zeroclipboard/ZeroClipboard) 将内容复制到剪切板兼容主流浏览器的解决方案 [详细](http://www.jianshu.com/p/1a74c112f962)

* [html2canvas](http://html2canvas.hertzen.com/) html转化成canvas，可以用来做截图。[详细](detail/html2canvas)

* [Ink](http://zurb.com/ink/) 响应式html邮件框架

* [性能测试](https://benchmarkjs.com/)

* 抓取，解析RSS内容（不能跨域，所以后台要做代理，所谓的解析Rss其实就是解析xml）

    * [jFeed](https://github.com/jfhovinne/jFeed)

    * [jRss](https://github.com/malderete/jRss)  简单版的jFeed

* [scriptcam](http://www.scriptcam.com/) 与摄像头交互

* [cylon.js](https://cylonjs.com/) 机器人框架，支持35个平台

* 图片的瀑布流展示

  * [Masonry](https://github.com/desandro/masonry) 依赖 jQuery。

  * [bricks.js](https://github.com/callmecavs/bricks.js) 高性能版 Masonry。不依赖 jQuery。

* [devices.css](https://github.com/marvelapp/devices.css) 移动设备边框的外观。做原型的时候用不错。

* [city](https://github.com/basecss/city) 国家行政区划分数据。从国家统计局拿的。 [城市数据](https://github.com/basecss/city/blob/master/lib/citydata.json)

* [全栈JavaScript错误监控](https://fundebug.com/) 提供监控报错的服务。

## Bootstrap相关类

* [Bootbox.js](http://bootboxjs.com/) 对bootstrap的弹出框做的一些封装

* 免费皮肤

    * [AdminLTE](https://github.com/almasaeed2010/AdminLTE)

    * [gentelella](https://github.com/puikinsh/gentelella)

## Vue相关

* 全家桶

  * [vue-router](https://github.com/vuejs/vue-router) 官方提供的路由插件

  * vuex

* 手机 UI 库

    * [Vant](https://www.youzanyun.com/zanui/vue#/zh-CN/component/quickstart) 有赞出品。组件比 Mint UI 多。

    * [Nut UI](https://nutui.jd.com/#/intro) 京东出品。

    * [Weex Ui](https://alibaba.github.io/weex-ui/#/cn/) 阿里出品。有些业务组件是 Vant 没有的。

    * [Cube UI](https://didi.github.io/cube-ui/#/zh-CN) 滴滴出品。基于 Vue.js 实现的精致移动端组件库。

    * [Mand Mobile](https://didi.github.io/mand-mobile/#/home) 滴滴出品。面向金融场景的Vue移动端UI组件库。 有些业务组件值得参考。

    * [Mint UI](https://github.com/ElemeFE/mint-ui) 饿了么出品。

    * [vux](https://github.com/airyland/vux) 一个凑合的 Vue.js 移动端 UI 组件库。

    * [vue-weui](https://github.com/aidenZou/vue-weui) weui 的 vue 实现。

* 管理后台

    * [Element UI](https://github.com/ElemeFE/element) 饿了么出品。

    * [iView Admin](https://github.com/iview/iview-admin) 基于 [iView](https://www.iviewui.com/) 做的后台。 Talking Data 出品。

    * [Vue Admin](https://github.com/fundon/vue-admin)

    * [Vue Manage System](https://github.com/lin-xin/vue-manage-system) 基于 Element UI。支持多 Tab 选项卡等功能。

    * [D2 Admin](https://github.com/FairyEver/d2admin-vue-element) 基于 Element UI。简约主题。支持 首屏加载等待动画等。

    * [avue](https://github.com/nmxiaowei/avue) 对 Element UI 的二次封装，收费。

* [Muse UI](https://github.com/museui/muse-ui) Material Design 的 Vue 实现。

* [buefy](https://github.com/buefy/buefy) 基于 Vue 的轻量级 UI 组件库。

* [Vue-head](https://github.com/ktquez/vue-head) 管理head标签中的信息。

* [vue-i18n](https://github.com/kazupon/vue-i18n) 多语言解决方案。

## React 相关

* 管理后台

    * [Zent](https://www.youzanyun.com/zanui/react/guides/install) 有赞出品。Zent ( \ˈzent\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。 

## 小程序

* 其他框转小程序(转译型框架)

  * [mpvue](http://mpvue.com/) 美团出品。 Vue 转微信小程序、百度智能小程序、头条小程序 和 支付宝小程序。

  * [WePY](https://github.com/Tencent/wepy) 类 Vue 写法转 小程序。

  * [Taro](https://github.com/NervJS/taro) 京东出品。React 转生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用。

  * [Chameleon](https://cmljs.org/doc/) 滴滴出品的不同环境的跨端整体解决方案。

  * [uniapp](https://uniapp.dcloud.io/) DClound出品。生成 App，小程序，H5。

  * [graceUI](http://grace.hcoder.net/) 可生成 uniapp 和 小程序代码。小额收费。

* 增强型小程序框架

  * [MPX](https://didi.github.io/mpx/) 滴滴出品。致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序

* 组件库

  * [iView webApp](https://weapp.iviewui.com/) Talking Data 出品。

  * [MinUI](https://meili.github.io/min/index.html) 蘑菇街出品。

  * [zanui-weapp](https://github.com/youzan/zanui-weapp) Vant UI 的小程序版。有赞出品。

## GraphQL

* [prisma](https://github.com/prismagraphql/prisma/)  Prisma turns your database into a realtime GraphQL API。

## JS Plugins仓库

* [jQuery Cards](http://jquerycards.com/) 高质量的 jQuery 插件网站

* [jster](http://jster.net/)

* [node modules](https://nodejsmodules.org/)

* [npmrank](http://anvaka.github.io/npmrank/online/) Sort npm packages by page rank

* [YOU MIGHT NOT NEED JQUERY PLUGINS](http://youmightnotneedjqueryplugins.com/) 不依赖 jQuery 的 js 插件。

* [awesome-nodejs](https://github.com/vndmtrx/awesome-nodejs)

* Vue

  * [Awesome Vue.js](https://github.com/vuejs/awesome-vue)

  * [awesome-github-vue](https://github.com/vndmtrx/awesome-nodejs)

* [Libraries.io](https://libraries.io/) 各种语言的库

* [OniUI](http://ued.qunar.com/oniui/index.html#avalon.accordion.doc.html) 去哪儿网做的一套基于Avalon的框架