本人微信公眾號：前端修煉之路，歡迎關注
本篇文章整理自己使用過的和看到過的一些外掛和工具，方便日後自己查詢和使用。
另外，感謝白小明，文中很多的工具來源於此。
彈出框
- 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的輪播
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引數遠端除錯客戶端。
函式庫
是一個一致性、模組化、高效能的 JavaScript 實用工具庫。很多方法lodash已經幫你寫好了，直接呼叫就行，不用自己費盡心思去寫了。
- Underscore：https://underscorejs.org/
Underscore提供了一套完善的函數語言程式設計的介面，讓我們更方便地在JavaScript中實現函數語言程式設計。
與前兩者類似，但不同的是引數位置不一樣，Ramda的理念是function first，data last。Ramda 還有一個特點：所有方法都支援柯里化。
可以通過阮一峰的文章Ramda 函式庫參考教程學習。
前端業務程式碼工具庫。統一封裝常用函式，併發布到npm，以提高開發效率。
手勢庫
- AlloyFinger：https://github.com/AlloyTeam/…
針對多點觸控裝置程式設計的Web手勢元件，快速幫助你的web程式增加手勢支援，也不用再擔心click 300ms的延遲了。擁有兩個版本，無依賴的獨立版和react版本。除了Dom物件，也可監聽Canvas內元素的手勢。
二維碼
- jQuery qrcode：https://github.com/jeromeetie…
是一個能夠在客戶端生成矩陣二維碼的jQuery外掛，使用它可以很方便的在頁面上生成二維碼。
模版引擎
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 依賴 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。
提供線上壓縮。如果是多張圖片壓縮需要付費~
一款國內的線上圖片壓縮。同樣大量圖片檔案壓縮需要付費。
資料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 視訊播放器解決方案。
支援 MP4、M3U8、FLV 等多種媒體格式，同時它也幫我們解決了大部分的相容性、差異化問題，包括全屏、自動播放、內聯播放、直播解碼等常見媒體播放需求。
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瀏覽器。