前端經常使用插件、工具類庫彙總

本人微信公衆號： 前端修煉之路，歡迎關注

本篇文章整理本身使用過的和看到過的一些插件和工具，方便往後本身查找和使用。

另外，感謝白小明，文中不少的工具來源於此。

彈出框

• layer：http://layer.layui.com/

獨立維護的三大組件之一（layDate、layer、layim）

• dialogBox：http://www.jq22.com/jquery-in...

基於jQuery的彈出框

• Bootbox.js：http://bootboxjs.com/

基於Bootstrap的彈出框

• SweetAlert：https://sweetalert.js.org/

一個效果很是好的彈層，支持圖片、支持輸入

輪播圖

• Swiper：https://www.swiper.com.cn/

開源、免費、強大的觸摸滑動插件，經常使用於移動端。

• iSlider：http://eux.baidu.com/iSlider/...

iSlider是一個表現出衆，無任何插件依賴的手機平臺javascript滑動組件。它可以處理任何元素，例如圖片或者DOM元素

• WebSlides：https://webslides.tv/#slide=1

用HTML來實現網頁版的PPT和宣傳展現頁。

• Owl Carousel 2：http://owlcarousel2.github.io...

基於jQuery的輪播

• slick：http://kenwheeler.github.io/s...

jQuery旋轉木馬插件slick

• jQuery slider：http://www.jq22.com/jquery-in...

插件描述：最全最簡單最通用的 幻燈片輪播 ，可控制的插件，pc端和移動端均可完美使用

實時刷新

• Browsersync：https://www.browsersync.io/

Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。

頁面調試

• AlloyLever：https://github.com/AlloyTeam/...

騰訊開發維護的代碼調試發佈，錯誤監控上報，用戶問題定位。能夠經過url參數遠程調試客戶端定位問題。

• vConsole：https://github.com/Tencent/vC...

一樣是由騰訊開發維護的代碼調試工具，是針對移動端的調試工具。與上一個不一樣的是，不能經過添加url參數遠程調試客戶端。

函數庫

• Lodash：https://github.com/lodash/lodash

是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。不少方法lodash已經幫你寫好了，直接調用就行，不用本身費盡心思去寫了。

• Underscore：https://underscorejs.org/

Underscore提供了一套完善的函數式編程的接口，讓咱們更方便地在JavaScript中實現函數式編程。

• Ramda：https://github.com/ramda/ramda

與前二者相似，但不一樣的是參數位置不同，Ramda的理念是function first，data last。Ramda 還有一個特色：全部方法都支持柯里化。
能夠經過阮一峯的文章Ramda 函數庫參考教程學習。

• outils：https://github.com/proYang/ou...

前端業務代碼工具庫。統一封裝經常使用函數，併發布到npm，以提升開發效率。

手勢庫

• AlloyFinger：https://github.com/AlloyTeam/...

針對多點觸控設備編程的Web手勢組件，快速幫助你的web程序增長手勢支持，也不用再擔憂click 300ms的延遲了。擁有兩個版本，無依賴的獨立版和react版本。除了Dom對象，也可監聽Canvas內元素的手勢。

二維碼

• jQuery qrcode：https://github.com/jeromeetie...

是一個可以在客戶端生成矩陣二維碼的jQuery插件，使用它能夠很方便的在頁面上生成二維碼。

模版引擎

• doT：https://github.com/olado/doT

doT模板方便快捷的組織頁面DOM，特色是快，小，無依賴其餘插件。這也是我在項目中常常會使用的一個模版引擎。

• handlebars：http://handlebarsjs.com/

Handlebars 是 JavaScript 一個語義模板庫，經過對view和data的分離來快速構建Web模板。它採用"Logic-less template"（無邏輯模版）的思路，在加載時被預編譯，而不是到了客戶端執行到代碼時再去編譯， 這樣能夠保證模板加載和運行的速度。
中文版本教程能夠參考這篇文章Handlebars.js 模板引擎。

• Template7：http://idangero.us/template7/

針對移動端模板引擎，語法很相似Handlebars。它是Framework7 內置模版引擎。另外據官網說，它比Handlebars在移動端Safari中快2-3倍。
入門文章能夠看[
template7入門教程及對它的一些見解](https://segmentfault.com/a/11...。

• Jade Language：http://jade-lang.com/

Node模版引擎，是Express框架內置的模版引擎。中文版的教程能夠看這篇Jade模板。
另外能夠參考Jade Syntax Documentation，這裏整理了Jade模版引擎的使用方法，而且能夠實時更新。

顏色選擇器

• Bootstrap Colorpicker：https://farbelous.io/bootstra...

Bootstrap 4 中使用的顏色選擇器。

• spectrum：http://bgrins.github.io/spect...

支持移動端的，超小的顏色選擇器。不用大量的圖片、也不須要其餘插件，同時支持自定義。

動畫庫

• Animate.css：https://daneden.github.io/ani...

css3動畫庫，也是目前通用的動畫庫。只須要引入css，添加css樣式便可實現動畫。

• Anime.js：http://animejs.com/

Anime (/ˈæn.ə.meɪ/)是一個輕量級JavaScript動畫庫。

• Hover.css：http://ianlunn.github.io/Hover/

CSS3 hover 懸停效果，能夠應用於連接、按鈕、圖片、SVG等等。

• WOW.js：http://mynameismatthieu.com/W...

滾動展現動畫，WOW.js 依賴 animate.css，因此它支持 animate.css 多達 60 多種的動畫效果。
另外從官網上下載使用的時候，要注意受權許可。不一樣的受權許可，價錢但是不同滴哦。

• Magic.css：https://github.com/miniMAC/magic

css3 animation動畫庫。

• Waves：http://fian.my.id/Waves/

點擊波紋效果，是一個基於 Google's Material Design 的點擊效果。

• move.js：http://visionmedia.github.io/...

一個小型的JavaScript庫，經過JS來控制一系列的CSS動畫順序執行，使CSS3動畫變得很是簡單和優雅。

圖片上傳

• Fine Uploader：https://github.com/FineUpload...

一個超簡單的JS文件上傳庫。

• webuploader：http://fex.baidu.com/webuploa...

由百度開發的以HTML5爲主，以FLASH爲輔的文件上傳組件。兼容IE6+，iOS 6+, android 4+。

正則表達式

• regexper：https://regexper.com/

用圖形的方式表示正則表達式。

圖片無損壓縮

• tinypng：https://tinypng.com/

圖片無損壓縮，支持PS軟件插件直接壓縮，另外提供http、ruby、php、node.js、pyhont、java、.net多種方式API。
提供在線壓縮。若是是多張圖片壓縮須要付費~

• 圖好快：https://www.tuhaokuai.com/

一款國內的在線圖片壓縮。一樣大量圖片文件壓縮須要付費。

數據Mock

• Mock.js：http://mockjs.com/

是一款前端開發中攔截Ajax請求再生成隨機數據響應的工具.能夠用來模擬服務器響應. 優勢是很是簡單方便, 無侵入性, 基本覆蓋經常使用的接口數據類型。

官網上沒有直接給ajax的請求攔截例子，能夠參考這篇[
Mock.js使用](https://segmentfault.com/a/11...

• Easy Mock：https://easy-mock.com

是一個可視化，而且能快速生成模擬數據的服務，是一個Mock平臺，由大搜車維護。Easy Mock也是基於Mock.js，不一樣的是不用在本地存儲文件，直接遠程訪問接口。接口完成後只須要改變url地址便可。
簡單瞭解Easy Mock使用方法，能夠參考如何使用Easy Mock，直接看文章中給出的視頻鏈接便可。

• JSON Server：https://github.com/typicode/j...

基於node服務，能夠生成 REST API ,很是的方便。

視頻播放器

• chimee：http://chimee.org/

Chimee（讀「奇米」, [tʃɪ'mɪ:]）是由奇舞團開源的一套 H5 視頻播放器解決方案。
支持 MP四、M3U八、FLV 等多種媒體格式，同時它也幫咱們解決了大部分的兼容性、差別化問題，包括全屏、自動播放、內聯播放、直播解碼等常見媒體播放需求。

• flv.js：https://github.com/Bilibili/f...

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

• Video.js：https://videojs.com/

開源、免費的HTML5和Flash視頻播放器

• jPlayer：http://www.jplayer.org/

jQuery的HTML5 音頻和視頻播放器。另外目前已經添加了React 版本的jPlayer。

滾動庫

• iScroll：https://github.com/cubiq/iscroll

  iScroll是一個高性能、小體積、零依賴、跨平臺的js滾動庫。它支持PC端、移動端甚至smart TV。
  另外支持了多個不一樣的js版本，能夠根據需求選擇使用。

• beter-scroll：https://github.com/ustbhuangy...

  一款重點解決移動端（已支持 PC）各類滾動場景需求的插件。它的核心是借鑑的 iscroll 的實現並對其進行了優化。
  另外beter-scroll用vue進行了重寫，更適合進行移動端的開發。

• mescroll：https://github.com/mescroll/m...

  精緻的下拉刷新和上拉加載 js框架.支持vue,完美運行於移動端和主流PC瀏覽器。

原文地址：http://www.javashuo.com/article/p-bislinim-v.html