前言在開發(fā)中，經(jīng)常會(huì)將一些常用的代碼塊、功能塊進(jìn)行封裝，為的是更好的復(fù)用。那么，被抽離出來獨(dú)立完成功能，通過API或配置項(xiàng)和其他部分交互，便形成了插件。 下面這些是一些常用的前端開源插件，這里只是羅列出來，詳細(xì)的用法各個(gè)插件官網(wǎng)或者Gayhub都有介紹。注意：往往一個(gè)解決方案會(huì)有多個(gè)插件，需要讀者根據(jù)自己的實(shí)際業(yè)務(wù)需求進(jìn)行甄別選用，歡迎留言交流和補(bǔ)充。 函數(shù)庫Lodash https://github.com/lodash/lodash Underscore https:/// Ramda https://github.com/ramda/ramda outils https://github.com/proYang/outils 復(fù)制代碼 動(dòng)畫庫Animate.css：CSS3 動(dòng)畫庫，也是目前最通用的動(dòng)畫庫。 https://daneden./animate.css/ Anime.js：一個(gè)強(qiáng)大的、輕量級(jí)的用來制作動(dòng)畫的javascript庫 http:/// Hover.css：CSS hover 懸停效果，可以應(yīng)用于鏈接、按鈕、圖片等等。 https://github.com/IanLunn/Hover wow.js：滾動(dòng)展示動(dòng)畫，WOW.js 依賴 animate.css，所以它支持 animate.css 多達(dá) 60 多種的動(dòng)畫效果。 https://github.com/matthieua/WOW Magic.css：css3 animation動(dòng)畫庫 https://github.com/miniMAC/magic Waves：點(diǎn)擊波紋效果 https://github.com/fians/Waves move.js：一個(gè)小型的JavaScript庫，通過JS來控制一系列的CSS動(dòng)畫順序執(zhí)行，使CSS3動(dòng)畫變得非常簡(jiǎn)單和優(yōu)雅。 https://github.com/visionmedia/move.js 復(fù)制代碼 滾動(dòng)庫iscroll - 平滑滾動(dòng)插件 https://github.com/cubiq/iscroll BetterScroll：iscroll 的優(yōu)化版，使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢 https://github.com/ustbhuangyi/better-scroll mescroll：移動(dòng)端上拉刷新下拉加載 http://www./api.html jQuery Scrollbox：圖片文字滾動(dòng)插件 http://www./jquery-info1890 liMarquee：jQuery無縫滾動(dòng)插件 http://www./188.html 復(fù)制代碼 輪播圖 Swiper：常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng) https://www./ iSlider：移動(dòng)端滑動(dòng)組件 http://eux.baidu.com/iSlider/demo/index_chinese.html slip.js：移動(dòng)端跟隨手指滑動(dòng)組件，零依賴。 https://github.com/binnng/slip.js OwlCarousel2： http://owlcarousel2./OwlCarousel2/ slick： http://www./jquery-info406 WebSlides： https://github.com/webslides/webslides/ jQuery輪播插件slider： http://www./jquery-info889 復(fù)制代碼 滾屏fullpage： http://www./jquery-info1124 復(fù)制代碼 彈出框layer：獨(dú)立維護(hù)的三大組件之一（layDate、layer、layim） http://layer./ Bootbox.js： http:/// dialogBox：基于 jQuery http://www./jquery-info4822 easyDialog： http://www./easydialog-v2.0/index.html 復(fù)制代碼 消息通知Notyf：簡(jiǎn)單的響應(yīng)式純js消息通知插件 http://www./jQuery/Lightbox-Dialog/201609123990.html PNotify：頁面右上角的提示信息（非彈框提示） https://github.com/sciactive/pnotify https:///pnotify/ overhang.js：是一個(gè)JQuery插件顯示即時(shí)通知、 確認(rèn)或給定元素中的提示。 http://www./jquery-info9193 復(fù)制代碼 下拉框select2 https:/// 復(fù)制代碼 級(jí)聯(lián)選擇器ustbhuangyi/picker：移動(dòng)端最好用的的篩選器組件、聯(lián)動(dòng)篩選 https://github.com/ustbhuangyi/picker jQueryDistpicker：移動(dòng)端最好用的的篩選器組件、聯(lián)動(dòng)篩選 http://fengyuanchen./distpicker/ http://www./demo/jQueryDistpicker20160621/ 復(fù)制代碼 顏色選擇器Bootstrap Colorpicker 2 https://github.com/farbelous/bootstrap-colorpicker 復(fù)制代碼 時(shí)間選擇器layDate： https://www./laydate/ 復(fù)制代碼 時(shí)間日期處理Moment.js：是一個(gè)解析，驗(yàn)證，操作和顯示日期和時(shí)間的 JavaScript 類庫。 http:/// https://github.com/moment/moment timeago.js：輕量級(jí)的時(shí)間轉(zhuǎn)換 Javascript 庫 https://github.com/hustcc/timeago.js 復(fù)制代碼 表單驗(yàn)證validator.js： https://github.com/chriso/validator.js jQuery Validation：jQuery 表單校驗(yàn) https://github.com/jquery-validation/jquery-validation Validform：一行代碼搞定整站的表單驗(yàn)證！- Jquery表單驗(yàn)證插件 http://validform./ 復(fù)制代碼 分頁插件pagination： https://github.com/superRaytin/paginationjs 復(fù)制代碼 富文本編輯器wangEditor http://www./ 百度UEditor https://ueditor.baidu.com/website/ KindEditor http:///demo.php MediumEditor http://yabwe./medium-editor/ Simditor https://simditor./ Summernote https:/// Quill https:/// Slate https://github.com/ianstormtaylor/slate Markdown 復(fù)制代碼 編輯器Editor.md https://pandao./editor.md/ 復(fù)制代碼 樹插件樹插件 www.treejs.cn/v3/main.php… 圖片懶加載lazyload https://github.com/tuupola/jquery_lazyload 復(fù)制代碼 瀑布流Masonry https://www.cnblogs.com/cjc917/p/7402026.html Metro風(fēng)兼瀑布流布局效果 http://www./jquery/1985.html 復(fù)制代碼 相冊(cè)（圖片滑動(dòng)切換展示效果） Viewer.js https://fengyuanchen./viewerjs/ 復(fù)制代碼 導(dǎo)航插件okayNav http://www./204.html 復(fù)制代碼 視頻播放器Chimee：組件化H5播放器框架 http:/// https:///entry/5a02b480f265da43144020b1 flv.js Bilibili 開源純 JavaScript 編寫的 FLV 播放器 Flash 視頻（FLV）播放器 http:/// https:///entry/5a02b480f265da43144020b1 jplayer http://www./ html5player https:///post/596f536d51882526337caf15 Video.js： 開源、免費(fèi)的HTML5和Flash視頻播放器 https:/// 復(fù)制代碼 彈幕播放器DanmuPlayer - Html5彈幕播放器插件 https://github.com/chiruom/DanmuPlayer jquery.danmu.js - jQuery彈幕插件 https://github.com/chiruom/jquery.danmu.js scroxt - 字幕字體滾動(dòng)插件 https://github.com/chenjianfang/scroxt 復(fù)制代碼 復(fù)制粘貼插件clipboard.js https://github.com/zenorocha/clipboard.js/ ZeroClipboard https://github.com/zeroclipboard/zeroclipboard 復(fù)制代碼 二維碼插件jquery.qrcode.js https://github.com/jeromeetienne/jquery-qrcode 復(fù)制代碼 拖拽Draggabilly http://www./jquery-info293 dragula https://www.toutiao.com/a6491847196890104334 復(fù)制代碼 文件上傳uploader WebUploader： HTML5 & FLASH 文件上傳 https://github.com/fex-team/webuploader/ 復(fù)制代碼 代碼高亮hightlightokayNav https:/// 復(fù)制代碼 前端國(guó)際化i18n i18next https://github.com/i18next/i18next vue-i18n https://github.com/kazupon/vue-i18n 前端系列——jquery.i18n.properties前端國(guó)際化解決方案“填坑日記”： http://www.cnblogs.com/landeanfen/p/7581609.html 基于jQuery.i18n.properties 實(shí)現(xiàn)前端頁面的資源國(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ù)制代碼 網(wǎng)頁即時(shí)通訊LayIM http://layim./ 閑聊么 https://www./ 復(fù)制代碼 數(shù)據(jù)可視化ECharts http://echarts.baidu.com/index.html 阿里云 DataV 復(fù)制代碼 PDF 閱讀器https://github.com/mozilla/pdf.js 復(fù)制代碼 主題色提取RGBaster https://github.com/briangonzalez/rgbaster.js Color Thief vibrant.js 復(fù)制代碼 前端存儲(chǔ)ustbhuangyi/storage： 封裝了sessionStorage和localStorage https://github.com/ustbhuangyi/storage store.js 本地存儲(chǔ)localstorage的封裝 https://github.com/jaywcjlove/store.js localForage https://github.com/localForage/localForage 復(fù)制代碼 數(shù)據(jù) MockEasy Mock https://github.com/easy-mock/easy-mock Mockjs 生成任意隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求 http:/// json-server + fakerjs https://github.com/typicode/json-server 復(fù)制代碼 分享bShare QQ分享組件 百度分享 復(fù)制代碼 評(píng)論Gitalk gitment 暢言 來必力 復(fù)制代碼 其他IE瀏覽器版本過低提示插件IEalert.js http://www./resource/455 lyric-parser - QQ音樂歌詞解析 https://github.com/ustbhuangyi/lyric-parser holder.js - 圖片占位符插件 https://github.com/imsky/holder jQuery放大鏡插件jqzoom.js http://www./jquery-info648 Zooming – JavaScript圖片縮放庫 http://www./204.html 復(fù)制代碼 以上是作者在工作中積累的一些常用的前端開源插件，這里只是羅列出來。 作者：小橋流水嘩啦啦 |
|
|
