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

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

當(dāng)然，你可以好好的收藏起來，等你用到的時(shí)候，再來學(xué)習(xí)和運(yùn)用這些高性能的輕量高效無依賴的開源JS插件。

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

布局

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

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

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

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

圖片預(yù)覽

baguetteBox.js?- 是一個(gè)簡(jiǎn)單易用的響應(yīng)式圖像燈箱效果腳本。demo

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

viewerjs?- 是一個(gè)圖像預(yù)覽插件。demo

cropperjs?- 是一個(gè)圖片編輯器插件。demo

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

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

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

動(dòng)畫

anime.js?- 是一個(gè)靈活輕便的JavaScript動(dòng)畫庫(kù)。demo

three.js?- 是一個(gè)JS 3D庫(kù)。demo

vivus?- JavaScript庫(kù)，使SVG繪制動(dòng)畫。demo

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

輪播圖

Swipe?- 準(zhǔn)確的觸摸滑塊。demo

SuperSlide ? ?jQuery圖片滾動(dòng),jQuery無縫滾動(dòng) ? ??demo

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

彈出層

Popper.js?- 是一個(gè)輕量級(jí)的庫(kù)用于管理工具提示和彈窗效果。demo

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

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

layer?- 是一個(gè)web彈層組件。demo

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

音頻視頻

Loud Links?- 是一個(gè)輕量級(jí)的JavaScript庫(kù)用于添加交互聲音到您的站點(diǎn)。demo

flv.js?- B 站 HTML5 播放器內(nèi)核開源。

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

編輯器

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

Substance?- 是一個(gè)基于Web的內(nèi)容自定義編輯器。demo

flatpickr?- 是一個(gè)輕量級(jí)的代碼高亮庫(kù)，適用于任何編程語言。demo

pen?- 是一個(gè)Markdown編輯器工具。demo

aceAce（Ajax.org Cloud9 Editor）。demo

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

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

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

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

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

EpicEditor?一個(gè)可嵌入的 js Markdown的編輯器，擁有全屏編輯、即時(shí)預(yù)覽、自動(dòng)保存草稿和離線支持等功能。demo

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

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

Squire?HTML5 富文本編輯器。demo

TinyMCE?JavaScript 富文本編輯器。demo

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

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

存儲(chǔ)

store.js?- 本地存儲(chǔ)localstorage的封裝，提供簡(jiǎn)單的API。demo

cookie.js?- 對(duì)操作cookie的封裝，提供簡(jiǎn)單的AIP 兼容IE6。demo

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

表單

validator.js?- 輕量級(jí)的JavaScript表單驗(yàn)證，字符串驗(yàn)證。demo

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

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

Cleave.js?- 是一個(gè)會(huì)在你輸入時(shí)格式化你的<input/>標(biāo)簽里面的內(nèi)容。demo

validator.js?- 是一個(gè)簡(jiǎn)單、輕量級(jí)，但功能強(qiáng)大的 Validator 組件。demo

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

時(shí)間

moment?- 是一個(gè)日期處理類庫(kù),用于解析、檢驗(yàn)、操作、以及顯示日期。demo

timesheet.js?- 是一個(gè)時(shí)間展示片段插件。demo

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

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

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

其它

hotkeys?- 是一個(gè)強(qiáng)健的 Javascript 庫(kù)用于捕獲鍵盤輸入和輸入的組合鍵。demo

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

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

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

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

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

tesseract.js?- 是一個(gè)文字識(shí)別轉(zhuǎn)換，可以運(yùn)行在瀏覽器和服務(wù)器NodeJS上。demo

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

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