前端常用外掛、工具類庫彙總,不要重複造輪子啦!!!

白小明發表於2018-09-24

前言

在開發中,我們經常會將一些常用的程式碼塊、功能塊進行封裝,為的是更好的複用。那麼,被抽離出來獨立完成功能,通過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

Anime.js:

  • 一個強大的、輕量級的用來製作動畫的javascript庫
  • animejs.com/

Hover.css:

wow.js:

  • 滾動展示動畫
  • WOW.js 依賴 animate.css,所以它支援 animate.css 多達 60 多種的動畫效果。
  • github.com/matthieua/W…

scrollReveal.js:

Magic.css:

Waves:

move.js:

  • 一個小型的JavaScript庫,通過JS來控制一系列的CSS動畫順序執行,使CSS3動畫變得非常簡單和優雅。
  • github.com/visionmedia…

Velocity.js:

  • 一個功能齊全的 JavaScript 動畫套件,包括諸如淡入淡出、滾動、滾動、停止、結束、翻轉等動畫效果。
  • github.com/julianshapi…

滾動庫

iscroll – 平滑滾動外掛:github.com/cubiq/iscro…

BetterScroll:

mescroll:

animatescroll:

crossfade.js:

jQuery Scrollbox:

liMarquee:

輪播圖

Swiper:

iSlider:

slip.js:

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:

easyDialog:www.h-ui.net/easydialog-…

訊息通知

Notyf:

PNotify:

overhang.js:

下拉框

select2:select2.org/

級聯選擇器

ustbhuangyi/picker

jQueryDistpicker:

顏色選擇器

Bootstrap Colorpicker 2:github.com/farbelous/b…

時間選擇器

layDate:www.layui.com/laydate/

wdatepicker

時間日期處理

Moment.js:

timeago.js:

表單驗證

validator.js:github.com/chriso/vali…

jQuery Validation

Validation Plugin:

Validform:

分頁外掛

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.mdpandao.github.io/editor.md/

樹外掛

www.treejs.cn

圖片懶載入

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

flv.js

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:

程式碼高亮

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 閱讀器

github.com/mozilla/pdf…

主題色提取

RGBaster:github.com/briangonzal…

Color Thief

vibrant.js

前端儲存

ustbhuangyi/storage:

store.js

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…

新手引導:github.com/easelinc/to…

來源:https://juejin.im/post/5ba7d5dd5188255c6140cc9d#comment

相關文章