前言

---

 

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

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

下面這些是我在工作中積累的一些常用的前端開源外掛，這裡只是羅列出來，詳細的用法各個外掛官網或者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

富文字編輯器

wangEditor

• http://www.wangeditor.com/

百度UEditor

• https://ueditor.baidu.com/website/

KindEditor

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

MediumEditor

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

Simditor

• https://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/v3/main.php#_zTreeInfo

圖片懶載入

lazyload

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

瀑布流

Masonry

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

Metro風兼瀑布流佈局效果

• http://www.lanrenzhijia.com/jquery/1985.html

相簿

（圖片滑動切換展示效果）

Viewer.js

• https://fengyuanchen.github.io/viewerjs/

導航外掛

okayNav

• http://www.dowebok.com/204.html

視訊播放器

Chimee：元件化H5播放器框架

• http://chimee.org/

• https://juejin.im/entry/5a02b480f265da43144020b1

flv.js

Bilibili 開源純 JavaScript 編寫的 FLV 播放器

Flash 視訊（FLV）播放器

• http://chimee.org/

• https://juejin.im/entry/5a02b480f265da43144020b1

jplayer

• http://www.jplayer.cn/

html5player

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

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

二維碼外掛

jquery.qrcode.js

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

拖拽

Draggabilly

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

dragula

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

檔案上傳

uploader

WebUploader：

HTML5 & FLASH 檔案上傳

• https://github.com/fex-team/webuploader/

程式碼高亮

hightlightokayNav

• 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 實現前端頁面的資源國際化

• https://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

生成任意隨機資料，攔截 Ajax 請求

• http://mockjs.com/

json-server + fakerjs

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

jQuery放大鏡外掛jqzoom.js

• http://www.jq22.com/jquery-info648

Zooming – JavaScript圖片縮放庫

• http://www.dowebok.com/204.html