前端經常使用插件utils彙總

前端經常使用插件utils彙總

javascript前端csshtml html5

發佈於 2020-03-06

工具庫 || 數據處理

underscore - JavaScript的實用程序帶庫

lodash - 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。

表單驗證

async-validator – 驗證表單異步

---jquery

jquery-validation - 您現有的表單提供了插入式驗證，同時使各類自定義適合您的應用程序變得很是容易

圖片懶加載

---JavaScript

lazyload - 用於延遲加載圖像

lazyload - LazyLoad是一種快速，輕巧和靈活的腳本，經過僅在內容圖像，視頻和iframe進入視口時加載它們來加快Web應用程序的速度

---vue

vue-lazyload - 一個Vue.js插件，用於將圖像或組件延遲加載到應用程序中。

---react

react-lazyload - 延遲加載組件，圖像或任何與性能有關的內容

圖片預覽

相似朋友圈

PhotoSwipe- 適用於移動和pc，模塊化，框架獨立的JavaScript圖像庫

知足聊天遞增圖片的需求

viewerjs - JavaScript圖像查看器

fancybox - jQuery lightbox腳本，用於顯示圖像，視頻等。觸摸啓用，響應迅速且可徹底自定義

---vue

vue-picture-preview - 移動端、PC 端 Vue.js 圖片預覽插件

文件上傳

---JavaScript

DropzoneJS - 提供帶有圖像預覽的拖放文件上傳

Web Uploader - 以HTML5爲主的現代文件上傳組件(百度)

jQuery-File-Upload - 具備多個文件選擇，拖放支持，進度條，驗證和預覽圖像，jQuery的音頻和視頻。

---vue

vue-dropzone - Dropzone.js的Vue.js組件-帶有圖像預覽的拖放文件上傳實用程序

單選框/複選框相關

---jquery

iCheck – 加強複選框和單選按鈕

選擇框

Choices - 輕量級庫，用於製做高度可自定義的選擇框、文本區域和其餘輸入表單。相似於select2和selectize，但沒有依賴jquery。

Chosen - 一個使較長的笨拙的選擇框更友好的庫。

Select2 - 基於jQuery的選擇框的替代品。它支持搜索，遠程數據集和結果的無限滾動。

bootstrap-select - jQuery插件經過直觀的多選，搜索等功能將選擇元素帶入21世紀

tree樹形

---jquery

Bootstrap Tree View - Tree View for Twitter Bootstrap

zTree - 一個依靠 jQuery 實現的多功能 「樹插件」

無限滾動

Infinite Scroll - 自動添加下一頁

---vue

vue-infinite-scroll - vue.js的無限滾動指令

列表拖拽

Sortable - 是一個JavaScript庫，用於在現代瀏覽器和觸摸設備上對拖放列表進行從新排序

MDN拖拽文檔

---vue

Vue.Draggable - 基於Sortable.js的Vue拖放組件

---react

react-sortablejs - 在成熟的拖放庫Sortable之上構建的React組件

元素拖曳

draggabilly - 使該shiz可拖動

自定義滾動條

jScrollPane-跨瀏覽器自定義滾動條

perfect-scrollbar - 簡約但完美的自定義滾動條插件

進度條

nprogress - 對於細長的進度條，例如YouTube，Medium等上的進度條

---github相似頁面進度條

vue-progressbar - vue的輕量級進度條

cookie管理

js-cookie - 一個簡單，輕巧的JavaScript API，用於處理瀏覽器cookie

WebSocket

ws - 簡單易用，爲Node.js開創了通過快速且通過全面測試的WebSocket客戶端和服務器

socket.io - 實時應用程序框架

---vue

Vue-Socket.io - Vuejs和Vuex的Socket.io實現

JavaScript 動畫效果庫

Vue官網推薦

Velocity - 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫

Animate.css - 一款強大的預設css3動畫庫

tween.js - JavaScript補間引擎可簡化動畫

額外效果

transformjs - 騰訊使CSS3轉換超級容易

scenejs

midnight.js - 文字顏色隨着背景變

vue-countTo - 在指定的持續時間內計入目標數量

CSS shake - 抖動動畫

輪播效果

swiper5 - 純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端

iSlider - 適用於Mobile WebApp，HTML5 App，Hybrid App的平滑移動觸摸滑塊

---vue

vue-awesome-swiper - 基於Swiper4，適用於Vue的輪播組件

瀑布流展現

scrollreveal - 在元素滾動到視圖時對其進行動畫處理

scrollreveal 的演示地址

pc桌面級通知

push.js - 世界上最通用的桌面通知框架

響應式媒體查詢

react中antd框架grid組件使用

enquire.js - JavaScript中的媒體查詢

操做引導js工具

Intro.js - 爲您的網站和項目提供新功能介紹和逐步用戶指南的更好方法

driver.js —— 前端操做引導js工具

編輯器工具

editor.js - 具備乾淨JSON輸出的塊樣式編輯器

UEditor - 由百度web前端研發部開發所見即所得富文本web編輯器

Markdown編輯器

SimpleMDE-Markdown - 一個簡單，美觀，可嵌入的JavaScript Markdown編輯器

simditor - 方便快捷的所見即所得編輯器

---想掘金同樣的markdown解析器(雙欄)

marked – markdown解析器

視頻

flv.js - 用純JavaScript編寫的HTML5 Flash Video（FLV）播放器(bilibili)

video.js - Video.js是專爲HTML5世界打造的網絡視頻播放器。它支持HTML5和Flash視頻

html5media - 簡單的h5player，輕量級

jwplayer - 被大量網站使用

日期選擇 || 日曆

Pikaday - 使人耳目一新的JavaScript Datepicker —輕巧，沒有依賴關係，模塊化CSS

bootstrap-datepicker - Twitter引導程序（@twbs）的 日期選擇器

時間選擇

有vue的版本,也支持日期選擇

Flatpickr - 輕巧，功能強大的javascript datetimepicker，無依賴項

時間處理

Moment.js - 在JavaScript中解析，驗證，操做和顯示日期和時間。

模擬數據

Mock - 模擬數據生成器

代碼註釋

JSDoc - 是JavaScript的API文檔生成器

觸摸方面 || 手勢

PhyTouch - 騰訊絲般順滑的觸摸運動方案

hammer.js - 一個用於多點觸摸手勢的javascript庫

better-scroll - 受iscroll的啓發，它支持更多功能並具備更好的滾動性能

loading加載動畫

loaders.css - 使人愉悅且注重性能的純CSS加載動畫

css-spinners - 使用CSS和最少的HTML標記製做的簡單CSS旋轉器和控件

progressbar.js - 反應靈敏的進度條

通知組件

notie - 乾淨，簡單的javascript通知，輸入和選擇套件，沒有依賴項

全屏滾動

fullPage.js - 輕鬆建立全屏滾動網站

pagePiling.js - Alvaro Trigo的pagePiling插件。建立滾動顯示的部分

fullPage.js - 專一於移動端

---vue

Vue-fullpage.js - fullPage.js的官方Vue.js包裝器

模板引擎

sodajs - 騰訊重量輕但功能強大的JavaScript模板引擎

list || table組件

vue-easytable - vue table 組件，支持 單元格合併、單元格編輯、多表頭固定、多列固定、列拖動、排序、自定義列、條件過濾、分頁

list.js - 完美的庫，可爲表，列表和各類HTML元素添加搜索，排序，過濾器和靈活性

瀏覽器屬性

bowser - 瀏覽器屬性，例如名稱，版本，渲染引擎

excel處理

sheetjs - 電子表格數據工具包

exceljs - 讀取，操做並將電子表格數據和樣式寫入XLSX和JSON。

網格佈局庫

Masonry - 級聯網格佈局庫

FFmpeg(c模塊 視頻幀預覽)

ffmpeg

WebAssembly | MDN

地圖

Leaflet - 適用於移動設備的交互式地圖的JavaScript庫

表情包擴展

twemoji - 一個簡單的庫，可在全部平臺上提供標準Unicode 表情符號支持。

瀏覽器測試

cypress - 對瀏覽器中運行的全部內容進行快速，輕鬆和可靠的測試

瀏覽器代碼編輯器

[]monaco-editor - 基於瀏覽器的代碼編輯器](https://github.com/microsoft/...)

滑動拼圖驗證

vue-puzzle-verification
vue-puzzle-vcode

值得學習庫

weui

額外推薦

turn.js - 作一本書，帶漂亮的翻頁的效果