前端常用插件、工具類庫彙總,新手必收藏!!!

前言

在開發中,我們經常會將一些常用的代碼塊、功能塊進行封裝,爲的是更好的複用。那麼,被抽離出來獨立完成功能,通過API或配置項和其他部分交互,便形成了插件。

下面這些是我在工作中積累的一些常用的前端開源插件,這裏只是羅列出來,詳細的用法各個插件官網或者Gayhub都有介紹。注意:往往一個解決方案會有多個插件,需要讀者根據自己的實際業務需求進行甄別選用,歡迎留言交流和補充。_

可以先加個收藏(Ctrl + D),以後遇到類似的場景就來看看具體的插件及其用法。
另外,不要重複造輪子,把精力放在業務邏輯上!
在這裏插入圖片描述

函數庫

Lodash(推薦):
https://github.com/lodash/lodash

Underscore:
https://underscorejs.org/

Ramda:
https://github.com/ramda/ramda

outils:
https://github.com/proYang/outils

30-seconds-of-code:
https://github.com/Chalarangelo/30-seconds-of-code
動畫庫

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

scrollReveal.js:
類似 wow.js
https://github.com/jlmakes/scrollreveal

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

Velocity.js:
一個功能齊全的 JavaScript 動畫套件,包括諸如淡入淡出、滾動、滾動、停止、結束、翻轉等動畫效果。
https://github.com/julianshapiro/velocity
滾動庫

iscroll - 平滑滾動插件:
https://github.com/cubiq/iscroll

BetterScroll:
https://github.com/ustbhuangyi/better-scroll
iscroll 的優化版,使移動端滑動體驗更加流暢

mescroll:
移動端上拉刷新下拉加載
http://www.mescroll.com/api.html

animatescroll:
jQuery滾動到指定位置
https://plugins.compzets.com/animatescroll/

crossfade.js:
jQuery圖片模糊插件crossfade.js
http://www.dowebok.com/104.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

myFocus:
http://www.cosmissy.com/myfocus/tutorials.html

WebSlides
https://github.com/webslides/webslides/

jQuery輪播插件slider:
http://www.jq22.com/jquery-info889

滾屏

fullpage:
http://www.jq22.com/jquery-info1124

彈出框

layer:
layer.layui.com/
layui 獨立維護的三大組件之一(layDate、layer、layim)
儘管 layui 中包含了這些組件,但因爲它們受衆羣體廣泛或應用廣泛,特從 layui 中抽取出來個副本,可獨立引用。我們也會對它們進行同步維護。
我目前是在職前端開發,如果你現在也想學習前端開發技術,
在入門學習前端的過程當中有遇見任何關於學習方法,學習路線,學習效率等方面的問題,
你都可以申請加入我的前端自學裙:前面:603 中間:985 最後:993。裏面聚集了一些正在自學前端的初學者裙文件裏面也有我做前端技術這段時間整理的一些前端學習手冊,前端面試題,前端開發工具,PDF文檔書籍教程,需要的話都可以自行來獲取下載。
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://sciactive.com/pnotify/
http://sciactive.github.io/pnotify/
https://github.com/sciactive/pnotify

overhang.js:
http://www.jq22.com/jquery-info9193
overhang.js 是一個JQuery插件顯示即時通知、 確認或給定元素中的提示。
下拉框

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/

wdatepicker

時間日期處理

Moment.js:
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

Validation Plugin:
jQuery插件
http://www.imooc.com/learn/385

Validform:
一行代碼搞定整站的表單驗證!- Jquery表單驗證插件
http://validform.rjboy.cn/
分頁插件

pagination
https://github.com/superRaytin/paginationjs

富文本編輯器

wangEditor
http://www.wangeditor.com/

百度UEditor
https://ueditor.baidu.com/website/

CKEditor
https://ckeditor.com/

KindEditor
http://kindeditor.net/demo.php

MediumEditor
http://yabwe.github.io/medium-editor/

Simditor
http://simditor.tower.im/

Summernote
https://summernote.org/

Quill
https://quilljs.com/

Slate
https://github.com/ianstormtaylor/slate

Markdown 編輯器

Editor.md
https://pandao.github.io/editor.md/

樹插件

http://www.treejs.cn/

圖片懶加載

lazyload
https://github.com/tuupola/jquery_lazyload

瀑布流

Masonry:
https://www.cnblogs.com/cjc917/p/7402026.html

Metro風兼瀑布流佈局效果
http://www.lanrenzhijia.com/jquery/1985.html

相冊(圖片滑動切換展示效果)

PC端:Viewer.js
https://fengyuanchen.github.io/viewerjs/

PC端:photoviewer

移動端:PhotoSwipe
https://www.helloweba.net/javascript/460.html

導航插件
okayNav
http://www.dowebok.com/204.html

視頻播放器

Chimee
組件化H5播放器框架
http://chimee.org/
https://juejin.im/entry/5a02b480f265da43144020b1

flv.js
Bilibili開源純JavaScript編寫的FLV播放器
Flash 視頻(FLV)播放器
https://github.com/Bilibili/flv.js
https://www.toutiao.com/a6478550535417889293

ckplayer
http://www.ckplayer.com/

jplayer
http://www.jplayer.cn/

html5player
https://juejin.im/post/596f536d51882526337caf15

Video.js
開源、免費的HTML5和Flash視頻播放器
Video.js - 開源、免費的HTML5和Flash視頻播放器

多青
https://dogeek.net/

彈幕視頻播放器

DanmuPlayer - Html5彈幕視頻播放器插件:
https://github.com/chiruom/DanmuPlayer

jquery.danmu.js - jQuery彈幕插件
https://github.com/chiruom/jquery.danmu.js

scroxt - 字幕字體滾動插件
https://github.com/chenjianfang/scroxt

複製粘貼插件

clipboard.js
https://github.com/zenorocha/clipboard.js/

ZeroClipboard
https://github.com/zeroclipboard/zeroclipboard

條形碼插件
barcode

二維碼插件

jquery.qrcode.js
https://github.com/jeromeetienne/jquery-qrcode

拖拽

Draggabilly
http://www.jq22.com/jquery-info293

dragula
https://www.toutiao.com/a6491847196890104334

手機端事件

touch.js

文件上傳

uploader

WebUploader:
https://github.com/fex-team/webuploader/
HTML5 & FLASH 文件上傳

代碼高亮

hightlight
https://highlightjs.org/

前端國際化 i18n

i18next
https://github.com/i18next/i18next

vue-i18n
https://github.com/kazupon/vue-i18n

前端系列——jquery.i18n.properties前端國際化解決方案“填坑日記”:
http://www.cnblogs.com/landeanfen/p/7581609.html

基於jQuery.i18n.properties 實現前端頁面的資源國際化:
http://m.blog.csdn.net/aixiaoyang168/article/details/49336709

地圖

百度地圖
http://lbsyun.baidu.com/

谷歌地圖
http://www.runoob.com/googleapi/google-maps-api-key.html

高德地圖
https://lbs.amap.com/

騰訊地圖
https://lbs.qq.com/

網頁即時通訊

LayIM
http://layim.layui.com/

閒聊麼
https://www.xianliao.me/

數據可視化

ECharts
http://echarts.baidu.com/index.html

阿里雲 DataV

PDF 閱讀器

https://github.com/mozilla/pdf.js

主題色提取

RGBaster
https://github.com/briangonzalez/rgbaster.js

Color Thief

vibrant.js

前端存儲

ustbhuangyi/storage:
封裝了sessionStorage和localStorage
https://github.com/ustbhuangyi/storage

store.js
本地存儲localstorage的封裝
https://github.com/jaywcjlove/store.js

localForage
https://github.com/localForage/localForage

數據 Mock

Easy Mock
https://github.com/easy-mock/easy-mock

Mockjs:
http://mockjs.com/
生成任意隨機數據,攔截 Ajax 請求
在這裏插入圖片描述

json-server + fakerjs

https://github.com/typicode/json-server

分享

bShare

JiaThis(關閉了!!!)

QQ分享組件

百度分享

評論

Gitalk

gitment

暢言

來必力

友言(關閉了!!!)

網易雲跟貼(關閉了!!!)

其他

IE瀏覽器版本過低提示插件IEalert.js
http://www.jqueryfuns.com/resource/455

lyric-parser - QQ音樂歌詞解析
https://github.com/ustbhuangyi/lyric-parser

holder.js - 圖片佔位符插件
https://github.com/imsky/holder

jQuery放大鏡插件jqzoom.js
http://www.jq22.com/jquery-info648

Zooming – JavaScript圖片縮放庫
http://www.dowebok.com/223.html

fastclick - 消除 click 移動瀏覽器300ms延遲
https://github.com/ftlabs/fastclick

jsonp - 一個簡單的JSONP實現
https://github.com/webmodules/jsonp

js-base64 - Base64 編碼解碼
https://github.com/dankogai/js-base64

新手引導
https://github.com/easelinc/tourist

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章