前言
在開發中,我們經常會將一些常用的程式碼塊、功能塊進行封裝,為的是更好的複用。那麼,被抽離出來獨立完成功能,通過API或配置項和其他部分互動,便形成了外掛。
下面這些是我在工作中積累的一些常用的前端開源外掛,這裡只是羅列出來,詳細的用法各個外掛官網或者Gayhub都有介紹。注意:往往一個解決方案會有多個外掛,需要讀者根據自己的實際業務需求進行甄別選用,歡迎留言交流和補充。^_^
可以先加個收藏(Ctrl + D),以後遇到類似的場景就來看看具體的外掛及其用法。
另外,不要重複造輪子,把精力放在業務邏輯上!
函式庫
Lodash(推薦):github.com/lodash/loda…
Underscore:underscorejs.org/
Ramda:github.com/ramda/ramda
outils:github.com/proYang/out…
30-seconds-of-code:github.com/Chalarangel…
動畫庫
Animate.css
- 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…