前端常用外掛、工具類庫彙總

siberiawolf發表於2019-02-16
前端

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

本篇文章整理自己使用過的和看到過的一些外掛和工具，方便日後自己查詢和使用。

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

彈出框

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

基於jQuery的彈出框

基於Bootstrap的彈出框

一個效果非常好的彈層，支援圖片、支援輸入

輪播圖

開源、免費、強大的觸控滑動外掛，常用於移動端。

iSlider是一個表現出眾，無任何外掛依賴的手機平臺javascript滑動元件。它能夠處理任何元素，例如圖片或者DOM元素

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

基於jQuery的輪播

jQuery旋轉木馬外掛slick

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

實時重新整理

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

頁面除錯

騰訊開發維護的程式碼除錯釋出，錯誤監控上報，使用者問題定位。可以通過url引數遠端除錯客戶端定位問題。

同樣是由騰訊開發維護的程式碼除錯工具，是針對移動端的除錯工具。與上一個不同的是，不能通過新增url引數遠端除錯客戶端。

函式庫

是一個一致性、模組化、高效能的 JavaScript 實用工具庫。很多方法lodash已經幫你寫好了，直接呼叫就行，不用自己費盡心思去寫了。

Underscore提供了一套完善的函數語言程式設計的介面，讓我們更方便地在JavaScript中實現函數語言程式設計。

與前兩者類似，但不同的是引數位置不一樣，Ramda的理念是function first，data last。Ramda 還有一個特點：所有方法都支援柯里化。
可以通過阮一峰的文章Ramda 函式庫參考教程學習。

前端業務程式碼工具庫。統一封裝常用函式，併發布到npm，以提高開發效率。

手勢庫

針對多點觸控裝置程式設計的Web手勢元件，快速幫助你的web程式增加手勢支援，也不用再擔心click 300ms的延遲了。擁有兩個版本，無依賴的獨立版和react版本。除了Dom物件，也可監聽Canvas內元素的手勢。

二維碼

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

模版引擎

doT模板方便快捷的組織頁面DOM，特點是快，小，無依賴其他外掛。這也是我在專案中經常會使用的一個模版引擎。

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

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

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

顏色選擇器

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

支援移動端的，超小的顏色選擇器。不用大量的圖片、也不需要其他外掛，同時支援自定義。

動畫庫

css3動畫庫，也是目前通用的動畫庫。只需要引入css，新增css樣式即可實現動畫。

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

CSS3 hover 懸停效果，可以應用於連結、按鈕、圖片、SVG等等。

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

css3 animation動畫庫。

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

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

圖片上傳

一個超簡單的JS檔案上傳庫。

由百度開發的以HTML5為主，以FLASH為輔的檔案上傳元件。相容IE6+，iOS 6+, android 4+。

正規表示式

用圖形的方式表示正規表示式。

圖片無失真壓縮

圖片無失真壓縮，支援PS軟體外掛直接壓縮，另外提供http、ruby、php、node.js、pyhont、java、.net多種方式API。
提供線上壓縮。如果是多張圖片壓縮需要付費~

一款國內的線上圖片壓縮。同樣大量圖片檔案壓縮需要付費。

資料Mock

是一款前端開發中攔截Ajax請求再生成隨機資料響應的工具.可以用來模擬伺服器響應. 優點是非常簡單方便, 無侵入性, 基本覆蓋常用的介面資料型別。

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

是一個視覺化，並且能快速生成模擬資料的服務，是一個Mock平臺，由大搜車維護。Easy Mock也是基於Mock.js，不同的是不用在本地儲存檔案，直接遠端訪問介面。介面完成後只需要改變url地址即可。
簡單瞭解Easy Mock使用方法，可以參考如何使用Easy Mock，直接看文章中給出的視訊連線即可。

基於node服務，可以生成 REST API ,非常的方便。

視訊播放器

Chimee（讀“奇米”, [tʃɪ`mɪ:]）是由奇舞團開源的一套 H5 視訊播放器解決方案。
支援 MP4、M3U8、FLV 等多種媒體格式，同時它也幫我們解決了大部分的相容性、差異化問題，包括全屏、自動播放、內聯播放、直播解碼等常見媒體播放需求。

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

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

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瀏覽器。

相關文章