在開(kāi)發(fā)中，經(jīng)常會(huì)將一些常用的代碼塊、功能塊進(jìn)行封裝，為的是更好的復(fù)用。那么，被抽離出來(lái)獨(dú)立完成功能，通過(guò)API或配置項(xiàng)和其他部分交互，便形成了插件。
下面這些是一些常用的前端開(kāi)源插件，這里只是羅列出來(lái)，詳細(xì)的用法各個(gè)插件官網(wǎng)或者Gayhub都有介紹。注意：往往一個(gè)解決方案會(huì)有多個(gè)插件，需要讀者根據(jù)自己的實(shí)際業(yè)務(wù)需求進(jìn)行甄別選用，歡迎留言交流和補(bǔ)充。
Lodashhttps://github.com/lodash/lodashUnderscorehttps://underscorejs.org/Ramdahttps://github.com/ramda/ramdaoutilshttps://github.com/proYang/outils 復(fù)制代碼
Animate.css：CSS3 動(dòng)畫(huà)庫(kù)，也是目前最通用的動(dòng)畫(huà)庫(kù)。https://daneden.github.io/animate.css/Anime.js：一個(gè)強(qiáng)大的、輕量級(jí)的用來(lái)制作動(dòng)畫(huà)的javascript庫(kù)http://animejs.com/Hover.css：CSS hover 懸停效果，可以應(yīng)用于鏈接、按鈕、圖片等等。https://github.com/IanLunn/Hoverwow.js：滾動(dòng)展示動(dòng)畫(huà)，WOW.js 依賴 animate.css，所以它支持 animate.css 多達(dá) 60 多種的動(dòng)畫(huà)效果。https://github.com/matthieua/WOWMagic.css：css3 animation動(dòng)畫(huà)庫(kù)https://github.com/miniMAC/magicWaves：點(diǎn)擊波紋效果https://github.com/fians/Wavesmove.js：一個(gè)小型的JavaScript庫(kù)，通過(guò)JS來(lái)控制一系列的CSS動(dòng)畫(huà)順序執(zhí)行，使CSS3動(dòng)畫(huà)變得非常簡(jiǎn)單和優(yōu)雅。https://github.com/visionmedia/move.js 復(fù)制代碼
iscroll - 平滑滾動(dòng)插件https://github.com/cubiq/iscrollBetterScroll：iscroll 的優(yōu)化版，使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢https://github.com/ustbhuangyi/better-scrollmescroll：移動(dòng)端上拉刷新下拉加載http://www.mescroll.com/api.htmljQuery Scrollbox：圖片文字滾動(dòng)插件http://www.jq22.com/jquery-info1890liMarquee：jQuery無(wú)縫滾動(dòng)插件http://www.dowebok.com/188.html 復(fù)制代碼
輪播圖
Swiper：常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)https://www.swiper.com.cn/iSlider：移動(dòng)端滑動(dòng)組件http://eux.baidu.com/iSlider/demo/index_chinese.htmlslip.js：移動(dòng)端跟隨手指滑動(dòng)組件，零依賴。https://github.com/binnng/slip.jsOwlCarousel2：http://owlcarousel2.github.io/OwlCarousel2/slick：http://www.jq22.com/jquery-info406WebSlides：https://github.com/webslides/webslides/jQuery輪播插件slider：http://www.jq22.com/jquery-info889 復(fù)制代碼
fullpage：http://www.jq22.com/jquery-info1124 復(fù)制代碼
layer：獨(dú)立維護(hù)的三大組件之一（layDate、layer、layim）http://layer.layui.com/Bootbox.js：http://bootboxjs.com/dialogBox：基于 jQueryhttp://www.jq22.com/jquery-info4822easyDialog：http://www.h-ui.net/easydialog-v2.0/index.html 復(fù)制代碼
Notyf：簡(jiǎn)單的響應(yīng)式純js消息通知插件http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.htmlPNotify：頁(yè)面右上角的提示信息（非彈框提示）https://github.com/sciactive/pnotifyhttps://sciactive.com/pnotify/overhang.js：是一個(gè)JQuery插件顯示即時(shí)通知、 確認(rèn)或給定元素中的提示。http://www.jq22.com/jquery-info9193 復(fù)制代碼
select2https://select2.org/ 復(fù)制代碼
ustbhuangyi/picker：移動(dòng)端最好用的的篩選器組件、聯(lián)動(dòng)篩選https://github.com/ustbhuangyi/pickerjQueryDistpicker：移動(dòng)端最好用的的篩選器組件、聯(lián)動(dòng)篩選http://fengyuanchen.github.io/distpicker/http://www.jq22.com/demo/jQueryDistpicker20160621/ 復(fù)制代碼
Bootstrap Colorpicker 2https://github.com/farbelous/bootstrap-colorpicker 復(fù)制代碼
layDate：https://www.layui.com/laydate/ 復(fù)制代碼
Moment.js：是一個(gè)解析，驗(yàn)證，操作和顯示日期和時(shí)間的 JavaScript 類庫(kù)。http://momentjs.com/https://github.com/moment/momenttimeago.js：輕量級(jí)的時(shí)間轉(zhuǎn)換 Javascript 庫(kù)https://github.com/hustcc/timeago.js 復(fù)制代碼
validator.js：https://github.com/chriso/validator.jsjQuery Validation：jQuery 表單校驗(yàn)https://github.com/jquery-validation/jquery-validationValidform：一行代碼搞定整站的表單驗(yàn)證！- Jquery表單驗(yàn)證插件http://validform.rjboy.cn/ 復(fù)制代碼
pagination：https://github.com/superRaytin/paginationjs 復(fù)制代碼
wangEditorhttp://www.wangeditor.com/百度UEditorhttps://ueditor.baidu.com/website/KindEditorhttp://kindeditor.net/demo.phpMediumEditorhttp://yabwe.github.io/medium-editor/Simditorhttps://simditor.tower.im/Summernotehttps://summernote.org/Quillhttps://quilljs.com/Slatehttps://github.com/ianstormtaylor/slateMarkdown 復(fù)制代碼
Editor.mdhttps://pandao.github.io/editor.md/ 復(fù)制代碼
樹(shù)插件 www.treejs.cn/v3/main.php…
lazyloadhttps://github.com/tuupola/jquery_lazyload 復(fù)制代碼
Masonryhttps://www.cnblogs.com/cjc917/p/7402026.htmlMetro風(fēng)兼瀑布流布局效果http://www.lanrenzhijia.com/jquery/1985.html 復(fù)制代碼
（圖片滑動(dòng)切換展示效果）Viewer.jshttps://fengyuanchen.github.io/viewerjs/ 復(fù)制代碼
okayNavhttp://www.dowebok.com/204.html 復(fù)制代碼
Chimee：組件化H5播放器框架http://chimee.org/https://juejin.im/entry/5a02b480f265da43144020b1flv.jsBilibili 開(kāi)源純 JavaScript 編寫(xiě)的 FLV 播放器Flash 視頻（FLV）播放器http://chimee.org/https://juejin.im/entry/5a02b480f265da43144020b1jplayerhttp://www.jplayer.cn/html5playerhttps://juejin.im/post/596f536d51882526337caf15Video.js：開(kāi)源、免費(fèi)的HTML5和Flash視頻播放器https://dogeek.net/ 復(fù)制代碼
DanmuPlayer - Html5彈幕播放器插件https://github.com/chiruom/DanmuPlayerjquery.danmu.js - jQuery彈幕插件https://github.com/chiruom/jquery.danmu.jsscroxt - 字幕字體滾動(dòng)插件https://github.com/chenjianfang/scroxt 復(fù)制代碼
clipboard.jshttps://github.com/zenorocha/clipboard.js/ZeroClipboardhttps://github.com/zeroclipboard/zeroclipboard 復(fù)制代碼
jquery.qrcode.jshttps://github.com/jeromeetienne/jquery-qrcode 復(fù)制代碼
Draggabillyhttp://www.jq22.com/jquery-info293dragulahttps://www.toutiao.com/a6491847196890104334 復(fù)制代碼
uploaderWebUploader：HTML5 & FLASH 文件上傳https://github.com/fex-team/webuploader/ 復(fù)制代碼
hightlightokayNavhttps://highlightjs.org/ 復(fù)制代碼
i18ni18nexthttps://github.com/i18next/i18nextvue-i18nhttps://github.com/kazupon/vue-i18n前端系列——jquery.i18n.properties前端國(guó)際化解決方案“填坑日記”：http://www.cnblogs.com/landeanfen/p/7581609.html基于jQuery.i18n.properties 實(shí)現(xiàn)前端頁(yè)面的資源國(guó)際化https://blog.csdn.net/aixiaoyang168/article/details/49336709 復(fù)制代碼
百度地圖http://lbsyun.baidu.com/谷歌地圖http://www.runoob.com/googleapi/google-maps-api-key.html高德地圖https://lbs.amap.com/騰訊地圖https://lbs.qq.com/ 復(fù)制代碼
LayIMhttp://layim.layui.com/閑聊么https://www.xianliao.me/ 復(fù)制代碼
ECharts http://echarts.baidu.com/index.html阿里云 DataV 復(fù)制代碼
https://github.com/mozilla/pdf.js 復(fù)制代碼
RGBasterhttps://github.com/briangonzalez/rgbaster.jsColor Thiefvibrant.js 復(fù)制代碼
ustbhuangyi/storage：封裝了sessionStorage和localStoragehttps://github.com/ustbhuangyi/storagestore.js本地存儲(chǔ)localstorage的封裝https://github.com/jaywcjlove/store.jslocalForagehttps://github.com/localForage/localForage 復(fù)制代碼
Easy Mockhttps://github.com/easy-mock/easy-mockMockjs生成任意隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求http://mockjs.com/json-server + fakerjshttps://github.com/typicode/json-server 復(fù)制代碼
bShareQQ分享組件百度分享 復(fù)制代碼
Gitalkgitment暢言來(lái)必力 復(fù)制代碼
IE瀏覽器版本過(guò)低提示插件IEalert.jshttp://www.jqueryfuns.com/resource/455lyric-parser - QQ音樂(lè)歌詞解析https://github.com/ustbhuangyi/lyric-parserholder.js - 圖片占位符插件https://github.com/imsky/holderjQuery放大鏡插件jqzoom.jshttp://www.jq22.com/jquery-info648Zooming – JavaScript圖片縮放庫(kù)http://www.dowebok.com/204.html 復(fù)制代碼
以上是作者在工作中積累的一些常用的前端開(kāi)源插件，這里只是羅列出來(lái)。
作者：小橋流水嘩啦啦
鏈接：https://juejin.im/post/5bea657c6fb9a049a62c1ca9
來(lái)源：掘金
聯(lián)系客服
