今天是前端開發(fā)福利日，25學堂的小編給大家收集了11大類，60多個前端js高性能插件和js庫。也是2017年最值得H5前端開發(fā)人員學習的JS插件(含DEMO演示)。

供大家在2017年快速學習H5前端開發(fā)提供了最可靠的js解決方案。

當然，你可以好好的收藏起來，等你用到的時候，再來學習和運用這些高性能的輕量高效無依賴的開源JS插件。

下面也可以說是H5前端學習的js插件大全?；景舜蟛糠值那岸俗钋把氐膉s插件和庫。

布局

SuperEmbed.js?- 是一個Javascript庫，可檢測出網(wǎng)頁上的內嵌視頻并使他們能夠變成響應式元素。demo

ScrollReveal?- ScrollReveal插件使用戶能夠無比輕松地創(chuàng)建桌面和移動瀏覽器的網(wǎng)頁滾動動畫。demo

Bricks.js?- 是一款超快的用于固定寬度元素的“磚石”布局生成器。demo

——————————————————————————————————————————————

圖片預覽

baguetteBox.js?- 是一個簡單易用的響應式圖像燈箱效果腳本。demo

Lightgallery.js?- 是一個功能齊全的JavaScript圖像燈箱插件。demo

viewerjs?- 是一個圖像預覽插件。demo

cropperjs?- 是一個圖片編輯器插件。demo

photo-editor?- 是一個本地圖片編輯器插件。demo

blazy.js?- 是一個懶惰加載插件。demo

——————————————————————————————————————————————

動畫

anime.js?- 是一個靈活輕便的JavaScript動畫庫。demo

three.js?- 是一個JS 3D庫。demo

vivus?- JavaScript庫，使SVG繪制動畫。demo

——————————————————————————————————————————————

輪播圖

Swipe?- 準確的觸摸滑塊。demo

SuperSlide ? ?jQuery圖片滾動,jQuery無縫滾動 ? ??demo

——————————————————————————————————————————————

彈出層

Popper.js?- 是一個輕量級的庫用于管理工具提示和彈窗效果。demo

SweetAlert2?- 是一個顏值很高而且可以自定義的警告彈出窗口插件，可以代替Javascript的彈出窗口。demo

artDialog?- 是一個經典、優(yōu)雅的網(wǎng)頁對話框控件。demo

layer?- 是一個web彈層組件。demo

——————————————————————————————————————————————

音頻視頻

Loud Links?- 是一個輕量級的JavaScript庫用于添加交互聲音到您的站點。demo

flv.js?- B 站 HTML5 播放器內核開源。

——————————————————————————————————————————————

編輯器

MediumEditor?- 仿Medium.com的所見即所得在線編輯器工具欄。demo

Substance?- 是一個基于Web的內容自定義編輯器。demo

flatpickr?- 是一個輕量級的代碼高亮庫，適用于任何編程語言。demo

pen?- 是一個Markdown編輯器工具。demo

aceAce（Ajax.org Cloud9 Editor）。demo

CodeMirror瀏覽器端的代碼編輯器。demo

esprima用于綜合分析的 ECMAScript 解析器。demo

quill一個帶有 API 的跨瀏覽器富文本編輯器。(demo)

ckeditor-releases?適用于每個人的 web 文本編輯器。demo

editor?一個 markdown 編輯器，但仍在開發(fā)中。demo

EpicEditor?一個可嵌入的 js Markdown的編輯器，擁有全屏編輯、即時預覽、自動保存草稿和離線支持等功能。demo

jsoneditor?查看、編輯和格式化 JSON 的 web 工具。demo

vim.js??擁有持久化 ~/.vimrc 的 Vim 編輯器的?JavaScript 移植版本。demo

Squire?HTML5 富文本編輯器。demo

TinyMCE?JavaScript 富文本編輯器。demo

trix?由 Basecamp 制作，適用于每天寫作的富文本編輯器。demo

——————————————————————————————————————————————

存儲

store.js?- 本地存儲localstorage的封裝，提供簡單的API。demo

cookie.js?- 對操作cookie的封裝，提供簡單的AIP 兼容IE6。demo

——————————————————————————————————————————————

表單

validator.js?- 輕量級的JavaScript表單驗證，字符串驗證。demo

List.js?- 是一個輕量級的為列表、表格或其他任何HTMLL標簽增加了搜索，排序，過濾器和靈活性等元素。demo

Algolia Places?- 是一個能讓你在網(wǎng)頁輕易實現(xiàn)搜索欄自動完成功能。demo

Cleave.js?- 是一個會在你輸入時格式化你的<input/>標簽里面的內容。demo

validator.js?- 是一個簡單、輕量級，但功能強大的 Validator 組件。demo

——————————————————————————————————————————————

時間

moment?- 是一個日期處理類庫,用于解析、檢驗、操作、以及顯示日期。demo

timesheet.js?- 是一個時間展示片段插件。demo

date.js?- 是一個格式化時間、過去時間展示、解決因時區(qū)變更插件。

timeago.js?- 格式化時間顯示多久以前的插件。?demo

——————————————————————————————————————————————

其它

hotkeys?- 是一個強健的 Javascript 庫用于捕獲鍵盤輸入和輸入的組合鍵。demo

clipboard.js?- 現(xiàn)代復制到剪貼板。沒有Flash，gzip壓縮只有3KB 。demo

translater.js?- 這是一個利用HTML注釋的頁面翻譯解決方案。demo

Push.js?- 是一個跨瀏覽器的Javascript桌面通知插件。demo

onlinenetwork?- js判斷是否斷網(wǎng)了。

iNotify?- 是一個實現(xiàn)瀏覽器的 title 閃爍、滾動、聲音提示、chrome、等系統(tǒng)通知。demo

tesseract.js?- 是一個文字識別轉換，可以運行在瀏覽器和服務器NodeJS上。demo

后續(xù)，我們會繼續(xù)更新...

在此，25學堂也感謝各位前端開發(fā)大牛的辛勤整理和分享。