摘要：頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯(cuò)誤監(jiān)控上報(bào)，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對(duì)移動(dòng)端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動(dòng)畫庫動(dòng)畫庫，也是目前通用的動(dòng)畫庫。

本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注

本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。

另外，感謝白小明，文中很多的工具來源于此。

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

獨(dú)立維護(hù)的三大組件之一（layDate、layer、layim）

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

基于jQuery的彈出框

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

基于Bootstrap的彈出框

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

一個(gè)效果非常好的彈層，支持圖片、支持輸入

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

開源、免費(fèi)、強(qiáng)大的觸摸滑動(dòng)插件，常用于移動(dòng)端。

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

iSlider是一個(gè)表現(xiàn)出眾，無任何插件依賴的手機(jī)平臺(tái)javascript滑動(dòng)組件。它能夠處理任何元素，例如圖片或者DOM元素

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

用HTML來實(shí)現(xiàn)網(wǎng)頁版的PPT和宣傳展示頁。

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

基于jQuery的輪播

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

jQuery旋轉(zhuǎn)木馬插件slick

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

插件描述：最全最簡(jiǎn)單最通用的 幻燈片輪播 ，可控制的插件，pc端和移動(dòng)端都可完美使用

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

Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁面。

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

騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯(cuò)誤監(jiān)控上報(bào)，用戶問題定位。可以通過url參數(shù)遠(yuǎn)程調(diào)試客戶端定位問題。

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

同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對(duì)移動(dòng)端的調(diào)試工具。與上一個(gè)不同的是，不能通過添加url參數(shù)遠(yuǎn)程調(diào)試客戶端。

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

是一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫。很多方法lodash已經(jīng)幫你寫好了，直接調(diào)用就行，不用自己費(fèi)盡心思去寫了。

Underscore：https://underscorejs.org/

Underscore提供了一套完善的函數(shù)式編程的接口，讓我們更方便地在JavaScript中實(shí)現(xiàn)函數(shù)式編程。

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

與前兩者類似，但不同的是參數(shù)位置不一樣，Ramda的理念是function first，data last。Ramda 還有一個(gè)特點(diǎn)：所有方法都支持柯里化。
可以通過阮一峰的文章Ramda 函數(shù)庫參考教程學(xué)習(xí)。

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

前端業(yè)務(wù)代碼工具庫。統(tǒng)一封裝常用函數(shù)，并發(fā)布到npm，以提高開發(fā)效率。

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

針對(duì)多點(diǎn)觸控設(shè)備編程的Web手勢(shì)組件，快速幫助你的web程序增加手勢(shì)支持，也不用再擔(dān)心click 300ms的延遲了。擁有兩個(gè)版本，無依賴的獨(dú)立版和react版本。除了Dom對(duì)象，也可監(jiān)聽Canvas內(nèi)元素的手勢(shì)。

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

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

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

doT模板方便快捷的組織頁面DOM，特點(diǎn)是快，小，無依賴其他插件。這也是我在項(xiàng)目中經(jīng)常會(huì)使用的一個(gè)模版引擎。

handlebars：http://handlebarsjs.com/

Handlebars 是 JavaScript 一個(gè)語義模板庫，通過對(duì)view和data的分離來快速構(gòu)建Web模板。它采用"Logic-less template"（無邏輯模版）的思路，在加載時(shí)被預(yù)編譯，而不是到了客戶端執(zhí)行到代碼時(shí)再去編譯， 這樣可以保證模板加載和運(yùn)行的速度。
中文版本教程可以參考這篇文章Handlebars.js 模板引擎。

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

針對(duì)移動(dòng)端模板引擎，語法很類似Handlebars。它是Framework7 內(nèi)置模版引擎。另外據(jù)官網(wǎng)說，它比Handlebars在移動(dòng)端Safari中快2-3倍。
入門文章可以看[
template7入門教程及對(duì)它的一些看法](https://segmentfault.com/a/11...。

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

Node模版引擎，是Express框架內(nèi)置的模版引擎。中文版的教程可以看這篇Jade模板。
另外可以參考Jade Syntax Documentation，這里整理了Jade模版引擎的使用方法，并且可以實(shí)時(shí)更新。

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

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

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

支持移動(dòng)端的，超小的顏色選擇器。不用大量的圖片、也不需要其他插件，同時(shí)支持自定義。

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

css3動(dòng)畫庫，也是目前通用的動(dòng)畫庫。只需要引入css，添加css樣式即可實(shí)現(xiàn)動(dòng)畫。

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

Anime (/??n.?.me?/)是一個(gè)輕量級(jí)JavaScript動(dòng)畫庫。

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

CSS3 hover 懸停效果，可以應(yīng)用于鏈接、按鈕、圖片、SVG等等。

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

滾動(dòng)展示動(dòng)畫，WOW.js 依賴 animate.css，所以它支持 animate.css 多達(dá) 60 多種的動(dòng)畫效果。
另外從官網(wǎng)上下載使用的時(shí)候，要注意授權(quán)許可。不同的授權(quán)許可，價(jià)錢可是不一樣滴哦。

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

css3 animation動(dòng)畫庫。

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

點(diǎn)擊波紋效果，是一個(gè)基于 Google"s Material Design 的點(diǎn)擊效果。

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

一個(gè)小型的JavaScript庫，通過JS來控制一系列的CSS動(dòng)畫順序執(zhí)行，使CSS3動(dòng)畫變得非常簡(jiǎn)單和優(yōu)雅。

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

一個(gè)超簡(jiǎn)單的JS文件上傳庫。

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

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

regexper：https://regexper.com/

用圖形的方式表示正則表達(dá)式。

tinypng：https://tinypng.com/

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

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

一款國內(nèi)的在線圖片壓縮。同樣大量圖片文件壓縮需要付費(fèi)。

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

是一款前端開發(fā)中攔截Ajax請(qǐng)求再生成隨機(jī)數(shù)據(jù)響應(yīng)的工具.可以用來模擬服務(wù)器響應(yīng). 優(yōu)點(diǎn)是非常簡(jiǎn)單方便, 無侵入性, 基本覆蓋常用的接口數(shù)據(jù)類型。

官網(wǎng)上沒有直接給ajax的請(qǐng)求攔截例子，可以參考這篇[
Mock.js使用](https://segmentfault.com/a/11...

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

是一個(gè)可視化，并且能快速生成模擬數(shù)據(jù)的服務(wù)，是一個(gè)Mock平臺(tái)，由大搜車維護(hù)。Easy Mock也是基于Mock.js，不同的是不用在本地存儲(chǔ)文件，直接遠(yuǎn)程訪問接口。接口完成后只需要改變url地址即可。
簡(jiǎn)單了解Easy Mock使用方法，可以參考如何使用Easy Mock，直接看文章中給出的視頻連接即可。

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

基于node服務(wù)，可以生成 REST API ,非常的方便。

chimee：http://chimee.org/

Chimee（讀“奇米”, [t??"m?:]）是由奇舞團(tuán)開源的一套 H5 視頻播放器解決方案。
支持 MP4、M3U8、FLV 等多種媒體格式，同時(shí)它也幫我們解決了大部分的兼容性、差異化問題，包括全屏、自動(dòng)播放、內(nèi)聯(lián)播放、直播解碼等常見媒體播放需求。

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

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

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

開源、免費(fèi)的HTML5和Flash視頻播放器

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

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

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

iScroll是一個(gè)高性能、小體積、零依賴、跨平臺(tái)的js滾動(dòng)庫。它支持PC端、移動(dòng)端甚至smart TV。
另外支持了多個(gè)不同的js版本，可以根據(jù)需求選擇使用。

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

一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件。它的核心是借鑒的 iscroll 的實(shí)現(xiàn)并對(duì)其進(jìn)行了優(yōu)化。
另外beter-scroll用vue進(jìn)行了重寫，更適合進(jìn)行移動(dòng)端的開發(fā)。

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

精致的下拉刷新和上拉加載 js框架.支持vue,完美運(yùn)行于移動(dòng)端和主流PC瀏覽器。