前言
在開發中，咱們常常會將一些經常使用的代碼塊、功能塊進行封裝，爲的是更好的複用。那麼，被抽離出來獨立完成功能，經過API或配置項和其餘部分交互，便造成了插件。javascript
下面這些是我在工做中積累的一些經常使用的前端開源插件，這裏只是羅列出來，詳細的用法各個插件官網或者Gayhub都有介紹。注意：每每一個解決方案會有多個插件，須要讀者根據本身的實際業務需求進行甄別選用，歡迎留言交流和補充。^_^php
能夠先加個收藏（Ctrl + D），之後遇到相似的場景就來看看具體的插件及其用法。css
另外，不要重複造輪子，把精力放在業務邏輯上！html
函數庫
Lodash（推薦）：github.com/lodash/loda…前端
Underscore：underscorejs.org/vue
Ramda：github.com/ramda/ramdahtml5
outils：github.com/proYang/out…java
30-seconds-of-code：github.com/Chalarangel…jquery
動畫庫
Animate.csscss3
- CSS3 動畫庫，也是目前最通用的動畫庫。
- daneden.github.io/animate.css…
Anime.js：
- 一個強大的、輕量級的用來製做動畫的javascript庫
- animejs.com/
Hover.css：
- CSS hover 懸停效果，能夠應用於連接、按鈕、圖片等等。
- github.com/IanLunn/Hov…
wow.js:
- 滾動展現動畫
- WOW.js 依賴 animate.css，因此它支持 animate.css 多達 60 多種的動畫效果。
- github.com/matthieua/W…
scrollReveal.js：
- 相似 wow.js
- github.com/jlmakes/scr…
Magic.css：
- css3 animation動畫庫
- github.com/miniMAC/mag…
Waves：
- 點擊波紋效果
- github.com/fians/Waves
move.js：
- 一個小型的JavaScript庫，經過JS來控制一系列的CSS動畫順序執行，使CSS3動畫變得很是簡單和優雅。
- github.com/visionmedia…
Velocity.js：
- 一個功能齊全的 JavaScript 動畫套件，包括諸如淡入淡出、滾動、滾動、中止、結束、翻轉等動畫效果。
- github.com/julianshapi…
滾動庫
iscroll - 平滑滾動插件：github.com/cubiq/iscro…
BetterScroll：
- github.com/ustbhuangyi…
- iscroll 的優化版，使移動端滑動體驗更加流暢
mescroll：
- 移動端上拉刷新下拉加載
- www.mescroll.com/api.html
animatescroll：
- jQuery滾動到指定位置
- plugins.compzets.com/animatescro…
crossfade.js：
- jQuery圖片模糊插件crossfade.js
- www.dowebok.com/104.html
jQuery Scrollbox：
- 圖片文字滾動插件
- www.jq22.com/jquery-info…
liMarquee：
- jQuery無縫滾動插件
- www.dowebok.com/188.html
輪播圖
Swiper：
- 經常使用於移動端網站的內容觸摸滑動
- www.swiper.com.cn/
iSlider：
- 移動端滑動組件
- eux.baidu.com/iSlider/dem…
slip.js：
- 移動端跟隨手指滑動組件，零依賴。
- github.com/binnng/slip…
OwlCarousel2：owlcarousel2.github.io/OwlCarousel…
slick：www.jq22.com/jquery-info…
myFocus：www.cosmissy.com/myfocus/tut…
WebSlides：github.com/webslides/w…
jQuery輪播插件slider：www.jq22.com/jquery-info…
滾屏
fullpage：www.jq22.com/jquery-info…
彈出框
layer：
- layer.layui.com/
- layui 獨立維護的三大組件之一（layDate、layer、layim）
- 儘管 layui 中包含了這些組件，但由於它們受衆羣體普遍或應用普遍，特從 layui 中抽取出來個副本，可獨立引用。咱們也會對它們進行同步維護。
Bootbox.js：bootboxjs.com/
dialogBox：
- 基於 jQuery
- www.jq22.com/jquery-info…
easyDialog：www.h-ui.net/easydialog-…
消息通知
Notyf：
- 簡單的響應式純js消息通知插件
- www.htmleaf.com/jQuery/Ligh…
PNotify：
- 頁面右上角的提示信息（非彈框提示）
- sciactive.com/pnotify/
- sciactive.github.io/pnotify/
- github.com/sciactive/p…
overhang.js：
- www.jq22.com/jquery-info…
- overhang.js 是一個JQuery插件顯示即時通知、 確認或給定元素中的提示。
下拉框
select2：select2.org/
級聯選擇器
ustbhuangyi/picker
- github.com/ustbhuangyi…
- 移動端最好用的的篩選器組件、聯動篩選
jQueryDistpicker：
顏色選擇器
Bootstrap Colorpicker 2：github.com/farbelous/b…
時間選擇器
layDate：www.layui.com/laydate/
wdatepicker
時間日期處理
Moment.js：
- Moment.js 是一個解析，驗證，操做和顯示日期和時間的 JavaScript 類庫。
- momentjs.com
- github.com/moment/mome…
timeago.js：
- 輕量級的時間轉換 Javascript 庫
- github.com/hustcc/time…
表單驗證
validator.js：github.com/chriso/vali…
jQuery Validation
- jQuery 表單校驗
- github.com/jquery-vali…
Validation Plugin：
- jQuery插件
- www.imooc.com/learn/385
Validform：
- 一行代碼搞定整站的表單驗證！- Jquery表單驗證插件
- validform.rjboy.cn/
分頁插件
pagination：github.com/superRaytin…
富文本編輯器
wangEditor：www.wangeditor.com/
百度UEditor：ueditor.baidu.com/website/
CKEditor：ckeditor.com/
KindEditor：kindeditor.net/demo.php
MediumEditor：yabwe.github.io/medium-edit…
Simditor：simditor.tower.im/
Summernote：summernote.org/
Quill：quilljs.com/
Slate：github.com/ianstormtay…
Markdown 編輯器
Editor.md：pandao.github.io/editor.md/
樹插件
圖片懶加載
lazyload：github.com/tuupola/jqu…
瀑布流
Masonry：www.cnblogs.com/cjc917/p/74…
Metro風兼瀑布流佈局效果http://www.lanrenzhijia.com/jquery/1985.html
相冊（圖片滑動切換展現效果）
PC端：Viewer.js：fengyuanchen.github.io/viewerjs/
PC端：photoviewer
移動端：PhotoSwipe：www.helloweba.net/javascript/…
導航插件
okayNav：www.dowebok.com/204.html
視頻播放器
Chimee
- 組件化H5播放器框架
- chimee.org/
- juejin.im/entry/5a02b…
flv.js
- Bilibili開源純JavaScript編寫的FLV播放器
- Flash 視頻（FLV）播放器
- github.com/Bilibili/fl…
- www.toutiao.com/a6478550535…
ckplayer：www.ckplayer.com/
jplayer：www.jplayer.cn/
html5player：juejin.im/post/596f53…
Video.js
- 開源、免費的HTML5和Flash視頻播放器
- Video.js - 開源、免費的HTML5和Flash視頻播放器
多青：dogeek.net/
彈幕視頻播放器
DanmuPlayer - Html5彈幕視頻播放器插件：github.com/chiruom/Dan…
jquery.danmu.js - jQuery彈幕插件：github.com/chiruom/jqu…
scroxt - 字幕字體滾動插件：github.com/chenjianfan…
複製粘貼插件
clipboard.js：github.com/zenorocha/c…
ZeroClipboard：github.com/zeroclipboa…
條形碼插件
barcode
二維碼插件
jquery.qrcode.js：github.com/jeromeetien…
拖拽
Draggabilly：www.jq22.com/jquery-info…
dragula：www.toutiao.com/a6491847196…
手機端事件
touch.js
文件上傳
uploader
WebUploader：
- github.com/fex-team/we…
- HTML5 & FLASH 文件上傳
代碼高亮
hightlight：highlightjs.org/
前端國際化 i18n
i18next：github.com/i18next/i18…
vue-i18n：github.com/kazupon/vue…
前端系列——jquery.i18n.properties前端國際化解決方案「填坑日記」：www.cnblogs.com/landeanfen/…
基於jQuery.i18n.properties 實現前端頁面的資源國際化：m.blog.csdn.net/aixiaoyang1…
地圖
百度地圖：lbsyun.baidu.com/
谷歌地圖：www.runoob.com/googleapi/g…
高德地圖：lbs.amap.com/
騰訊地圖：lbs.qq.com/
網頁即時通信
LayIM：layim.layui.com/
閒聊麼：www.xianliao.me/
數據可視化
ECharts ：echarts.baidu.com/index.html
阿里雲 DataV
PDF 閱讀器
主題色提取
RGBaster：github.com/briangonzal…
Color Thief
vibrant.js
前端存儲
ustbhuangyi/storage：
- 封裝了sessionStorage和localStorage
- github.com/ustbhuangyi…
store.js
- 本地存儲localstorage的封裝
- github.com/jaywcjlove/…
localForage：github.com/localForage…
數據 Mock
Easy Mock：github.com/easy-mock/e…
Mockjs：
- mockjs.com
- 生成任意隨機數據，攔截 Ajax 請求
json-server + fakerjs：github.com/typicode/js…
分享
bShare
JiaThis（關閉了！！！）
QQ分享組件
百度分享
評論
Gitalk
gitment
暢言
來必力
友言（關閉了！！！）
網易雲跟貼（關閉了！！！）
其餘
IE瀏覽器版本太低提示插件IEalert.js：www.jqueryfuns.com/resource/45…
lyric-parser - QQ音樂歌詞解析：github.com/ustbhuangyi…
holder.js - 圖片佔位符插件：github.com/imsky/holde…
jQuery放大鏡插件jqzoom.js：www.jq22.com/jquery-info…
Zooming – JavaScript圖片縮放庫：www.dowebok.com/223.html
fastclick - 消除 click 移動瀏覽器300ms延遲：github.com/ftlabs/fast…
jsonp - 一個簡單的JSONP實現：github.com/webmodules/…
js-base64 - Base64 編碼解碼：github.com/dankogai/js…