前端常用外掛、工具類庫彙總(上)
阿新 • • 發佈:2018-11-12
前言
在開發中,我們經常會將一些常用的程式碼塊、功能塊進行封裝,為的是更好的複用。那麼,被抽離出來獨立完成功能,通過API或配置項和其他部分互動,便形成了外掛。
下面這些是我在工作中積累的一些常用的前端開源外掛,這裡只是羅列出來,詳細的用法各個外掛官網或者Gayhub都有介紹。注意:往往一個解決方案會有多個外掛,需要讀者根據自己的實際業務需求進行甄別選用,歡迎留言交流和補充。
函式庫
Lodash https://github.com/lodash/lodash Underscore https://underscorejs.org/ Ramda https://github.com/ramda/ramda outils https://github.com/proYang/outils
動畫庫
Animate.css:CSS3 動畫庫,也是目前最通用的動畫庫。 https://daneden.github.io/animate.css/ Anime.js:一個強大的、輕量級的用來製作動畫的javascript庫 http://animejs.com/ Hover.css:CSS hover 懸停效果,可以應用於連結、按鈕、圖片等等。 https://github.com/IanLunn/Hover wow.js:滾動展示動畫,WOW.js 依賴 animate.css,所以它支援 animate.css 多達 60 多種的動畫效果。 https://github.com/matthieua/WOW Magic.css:css3 animation動畫庫 https://github.com/miniMAC/magic Waves:點選波紋效果 https://github.com/fians/Waves move.js:一個小型的JavaScript庫,通過JS來控制一系列的CSS動畫順序執行,使CSS3動畫變得非常簡單和優雅。 https://github.com/visionmedia/move.js
滾動庫
iscroll - 平滑滾動外掛 https://github.com/cubiq/iscroll BetterScroll:iscroll 的優化版,使移動端滑動體驗更加流暢 https://github.com/ustbhuangyi/better-scroll mescroll:移動端上拉重新整理下拉載入 http://www.mescroll.com/api.html jQuery Scrollbox:圖片文字滾動外掛 http://www.jq22.com/jquery-info1890 liMarquee:jQuery無縫滾動外掛 http://www.dowebok.com/188.html
輪播圖
Swiper:常用於移動端網站的內容觸控滑動 https://www.swiper.com.cn/ iSlider:移動端滑動元件 http://eux.baidu.com/iSlider/demo/index_chinese.html slip.js:移動端跟隨手指滑動元件,零依賴。 https://github.com/binnng/slip.js OwlCarousel2: http://owlcarousel2.github.io/OwlCarousel2/ slick: http://www.jq22.com/jquery-info406 WebSlides: https://github.com/webslides/webslides/ jQuery輪播外掛slider: http://www.jq22.com/jquery-info889
滾屏
fullpage: http://www.jq22.com/jquery-info1124
彈出框
layer:獨立維護的三大元件之一(layDate、layer、layim) http://layer.layui.com/ Bootbox.js: http://bootboxjs.com/ dialogBox:基於 jQuery http://www.jq22.com/jquery-info4822 easyDialog: http://www.h-ui.net/easydialog-v2.0/index.html
訊息通知
Notyf:簡單的響應式純js訊息通知外掛 http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html PNotify:頁面右上角的提示資訊(非彈框提示) https://github.com/sciactive/pnotify https://sciactive.com/pnotify/ overhang.js:是一個JQuery外掛顯示即時通知、 確認或給定元素中的提示。 http://www.jq22.com/jquery-info9193
下拉框
select2 https://select2.org/ 級聯選擇器 ustbhuangyi/picker:移動端最好用的的篩選器元件、聯動篩選 https://github.com/ustbhuangyi/picker jQueryDistpicker:移動端最好用的的篩選器元件、聯動篩選 http://fengyuanchen.github.io/distpicker/ http://www.jq22.com/demo/jQueryDistpicker20160621/
顏色選擇器
Bootstrap Colorpicker 2 https://github.com/farbelous/bootstrap-colorpicker
時間選擇器
layDate: https://www.layui.com/laydate/
時間日期處理
Moment.js:是一個解析,驗證,操作和顯示日期和時間的 JavaScript 類庫。 http://momentjs.com/ https://github.com/moment/moment timeago.js:輕量級的時間轉換 Javascript 庫 https://github.com/hustcc/timeago.js
表單驗證
validator.js: https://github.com/chriso/validator.js jQuery Validation:jQuery 表單校驗 https://github.com/jquery-validation/jquery-validation Validform:一行程式碼搞定整站的表單驗證!- Jquery表單驗證外掛 http://validform.rjboy.cn/
分頁外掛
pagination: https://github.com/superRaytin/paginationjs
以上有你需要的內容嗎?
如果有,不要錯過下期內容噢~~
本文內容未完待續...
作者:白小明
來源:
https://juejin.im/post/5ba7d5dd5188255c6140cc9d
往期文章推薦:
訂閱號ID:Miaovclass
關注妙味訂閱號:“妙味前端”,為您帶來優質前端技術乾貨;