前端插件庫

時間 2019-11-06

標籤前端插件简体版

原文原文鏈接

原文連接：前端插件庫
站點：前端開發文檔
博客：前端插件庫

前端插件庫

`DataTables`

官網：https://www.datatables.net/css

DataTables是jQuery的JavaScript函數庫，目的是強化表格操做（如搜索、排序），並自動加入組件引入表格中，使用很是靈活簡便。html

`LazyLoad`

官網：Lazy Load
延伸：Vanilla JavaScript Lazy Load Plugin前端

Lazy Load幫助高度較長的網頁進行延遲載入圖片，還沒有瀏覽到該部分時，不會載入視角外的圖片，提升效率。jquery

`lightSlider`

官網：JQuery lightSlider
Github：sachinchoolur/lightslidergit

JQuery lightSlider是一個輕量且響應式的跑馬燈/幻燈片，附有縮圖導覽。另外還有相本功能、垂直跑馬燈，應用層面普遍。github

`alertify.js`

官網：https://fabien-d.github.io/alertify.js/
Github：alertify.jsbootstrap

alertify.js是爲了美化通知信息而生的JavaScript框架。canvas

`pickadate.js`-日期/時間選擇器

官網：pickadate.jssegmentfault

`chosen`

官網：Chosen
Github：chosen數組

Chosen是一個jQuery的插件，目的是讓又長又笨重的下拉式選單變得更友善。

`typeahead.js`

Github：typeahead.js

由Twitter推出，靈活紮實的建議列表函數庫。

`textillate.js`

官網：textillate.js
Github：jschr/textillate

textillate.js結合了不少很棒的函數庫，簡單應用CSS3動畫特效。

`Chart.js`

官網：Chart.js

對設計師或開發人員，淺顯易懂的JavaScript圖標應用。

`highlight.js`

官網：highlight.js
Github：highlight.js

針對Web程序所作的高亮顯示上色。

`jquery-loading`

官網：jquery-loading

起源於爲了在讀取或運行中，鎖住特定對象，並同時保持讓瀏覽者能夠操做頁面的其餘部分。

`jquery-validation`

官網：jQuery Validation
Github：jquery-validation

jQuery Validation插件讓用戶端檢查表單變得更容易，並提供大量的定製化設定，不管導入新開發或是現有的項目都是很好的選擇。

`Moment.js`

官網：Moment.js

輕量級專門解析、驗證、操做、格式化日期的JavaScript函數庫，Moment.js是爲瀏覽器和Node.js而設計，全部組件均可以在這兩個環境下運行。

`Animate.css`

官網：Animate.css

純CSS，無需JavaScript，支持多瀏覽器的動畫特效，即插即用。

`Ace`

官網：Ace

Ace是透過JavaScript所開發的線上程序語言編輯器插件，不管功能和性能都相似通常編輯器（Sublime、Vim和TextMate等），導入進任何網頁或JavaScript應用程序都至關容易。值得一提的是Ace是由Cloud9 IDE的團隊維護，而且是Mozilla Skywriter（Bespin）項目的延伸品，品質值得信賴。

`PDF.js.js`

官網：PDF.js

PDF.js是一個由HTML構建的PDF閱讀器，由Mozilla Labs所推廣，目標是創建一個通用的PDF平臺。

`reveal.js`-網頁變簡報

官網：REVEAL.JS

`Intro.js`-網站導航

官網：Intro.js

優化網站的導航功能，提供步驟指南給瀏覽者，強化網站的用戶體驗。

`Fine Uploader`-拖拽上傳

官網：fine-uploader
Github：fine-uploader

導入拖拽上傳檔案，跨瀏覽器、原生JavaScript又加上免費開源，只要載入JavaScript就能夠開始運行，不依賴其餘程序。

`parallax.js`

官網：parallax.js
Github：wagerfield/parallax

對任何設備，兼容性高的視差引擎。

`Hover.css`

官網：Hover.css
Github：IanLunn/Hover

多項針對連接、按鈕、Logo、SVG和圖片的移入CSS3特效。

`iscroll`

Github：cubiq/iscroll

iScroll是一款高性能、文件小、無依賴且多平臺的JavaScript拖拽滑動庫。

`Toolbar.js`

官網：Toolbar.Js
Github：paulkinzett/toolbar

一個產生工具列的jQuery插件。

`nanoScroller.js`

Github：nanoScrollerJS

nanoScroller.js是一個用簡單方法作出相似Mac OS X風格卷軸的jQuery插件，儘管目前沒有在持續維護，但使用上至關簡單且支持度高仍然是不錯的選擇。

`iCheck`

官網：iCheck
Github：icheck

專爲jQuery和Zepto作的高彈性定製化checkbox和radio按鈕的插件。

`KUTE.js`

官網：KUTE.js
Github：kute.js

一個成熟的原生的JavaScript動畫引擎，提供給網站開發者、設計師、動畫師至關多基本的功能，淺顯易懂的操做方式，跨瀏覽器動畫，擁有着高質量、靈活、專業且輕量（主要核心只須要17K）。

`Timeline.js`

官網：Timeline.js

jQuery時間軸插件，使用簡單是它的優勢。

`Muuri.js`

官網：Muuri

Muuri是一個JavaScript Layout引擎，讓你能夠構建多樣化的Layout，並具備響應式、可排序、可過濾、拖拽移動或動畫效果。

`Algolia Places`

官網：Algolia Places

Algolia Places爲您的網站提供一個快速、簡單的方式，自動化產生地址建議列表的JavaScript函數庫。

`lightgallery.js`

官網：lightgallery.js
Github：lightGallery

一個彈性高、組件化且響應式的燈箱jQuery插件。

`Tabslet`

官網：Tabslet
Github：Tabslet

一個用於頁籤的jQuery插件，輕量級且操做容易。

`Masonry.js`

官網：Masonry

Masonry經常使用於瀑布流佈局的插件。

`Slidebars`

官網：Slidebars
Github：Slidebars

Slidebars是一個jQuery框架，提供網站或網站應用程序側邊欄選單。

`three.js`

官網：three.js
Github：three.js

易於使用且輕量級3D函數庫，提供canvas、SVG、CSS3 3D和WebGL渲染器。

`Videos.js`-HTML5視頻播放器

官網：Video.js: The Player Framework
Github：video.js

Video.js是隨着HTML5的來襲所打造的媒體播放器，支持HTML5和Flash視頻，支持PC和移動設備。這個項目從2010年開始，如今已經有超過40萬的網站使用它。

`Leaflet.js`

官網：Leaflet
Github：Leaflet

Leaflet是一個對移動設備友善的互動地圖而且開源的JavaScript函數庫，總大小隻有38KB，卻有着大多數開發人員想要的須要。簡單、專業、實用而且跨平臺能夠有效率地在PC和移動設備上，而且有大量的插件能夠擴展，有着華麗卻簡單使用的API，很易學且閱讀性高的源碼。

`Sortable`

官網：SortableJS

Sortable能夠對HTML對象作拖拽移動清單的JavaScript函數庫，支持移動設備且不依賴jQuery等其餘第三方，併兼容Bootstrap等CSS框架。

`clipboard.js`

官網：clipboard.js
Github：clipboard.js

複製內容到剪切板的小工具，不依賴Flash，大小隻要3KB。

`howler.js`

官網：howler.js

howler.js是針對當下網站的一個音頻播放函數庫，預設爲Web Audio API和HTML5 Audio，能夠透過JavaScript播放聲音變得更簡單，而且跨平臺。

`p5.js`-繪畫插件

官網：p5.js
Github：processing/p5.js

p5.js是一個JavaScript函數庫，有完整的繪畫功能，並不侷限在畫布上，你能夠把整個瀏覽器當作你的草稿，另外有插件可讓你更容易去作HTML5互動，加入文字欄、影片、視頻或音頻等功能。

`fullPage.js`-全頁式導航

官網：fullPage.js
Github：fullPage.js

`store.js`

Github：store.js

針對任何項目均可以作的跨瀏覽器的數據存取，全站均可以運行，瀏覽器支持度高，小項目不想導入大型框架的不錯選擇。

`fullcalendar`

官網：JavaScript Calendar
Github：fullcalendar

設計一個滿版且可拖拽事件的行程日曆。Bootstrap的排版風格，可讀入JSON格式數據，安裝容易、支持響應式排版。

`Headroom.js`

官網：Headroom.js

把網站空間發揮到極限，不須要導航列表是隱藏，須要時出現。搭配Animation.css可讓畫面更活潑，另外也支持jQuery或Angular。

`ScrollToFixed`

官網：ScrollToFixed

ScrollToFixed可以讓網頁的導航或表頭等固定在頂部或底部，用戶更方便的操做或查看信息。除了導航和表頭，也能夠固定其餘內容，好比廣告、返回頂部等。

`Handlebars.js`

官網：Handlebars.js
Github：handlebars.js

Handlebars主要是讓你在作語義化模板時更有效率、且不容易受挫，而且兼容Mustache模板，大多數能夠直接互換使用。

`faker.js`

Github：faker.js

faker.js能夠在瀏覽器或Node.js產生大量的假數據。測試時期至關方便的東西，也能夠透過Google Extension來運行。

`TinyMCE`-HTML編輯器

官網：TinyMCE
Github：tinymce

TinyMCE是功能齊全且輕量級的HTML編輯器，但須要在IE11以上才能夠運行。

`List.js`-資料排序

官網：List.js
Github：list.js

List.js對錶格、清單、各式各樣的對象，增長搜索、排序、過濾和靈活性，無形地創建在HTML內，極簡易也易於使用。即使周邊不如DataTables，但不依賴jQuery及大小僅Datatables的1/4（壓縮後17KB），以及對IE的高兼容性和不止對<table>，對<ul>、<ol>或是其餘HTML元素的支持，都是List.js不容忽視的優點之一。

`Swiper`

官網：Swiper
Github：Swiper

Swiper是當下王錚的幻燈片/跑馬燈插件，使用效能高，並可運用在移動設備上及混合式App上，不但在最新版本的IOS上運行良好，在Android、Windows Phone 8和PC設備上同樣表現優秀。要注意的是，Swiper並不兼容全部平臺設備，而是專一於當下主流平臺設備的兼容性和效能上。同時Swiper也是Framework7和Ionic Framework的組件的一部分。

`toastr`

官網：Toastr

toastr是一個提示信息JavaScript函數庫，必須載入jQuery，宗旨是利用簡單的程序函數庫來作定製化跟擴展。toastr提供一個範例頁面toastr examples，方便自訂效果跟產生源碼，相似Customize and download · Bootstrap的效果，方便使用者加快流程，先前介紹的ALERTIFY JS總體層面比toastr好不少，不管原生JavaScript以及總體文件大小和功能延展性，但toastr簡單使用的操做模式，若是有舊項目是在jQuery的環境下，要作一些定製化功能，或許就是不錯的選擇。

`goodshare.js`-極簡動畫繪製

官網：Sketch.js

`Quill`

官網：Quill
Github：Quill

Quill是當下高兼容性、強大、豐富且具備擴展性的文字編輯器。對於移動設備的支持度高。

`Shave`-截斷文字

官網：Shave

Shave根據內容的最大高度將文字截斷，是一個沒有任何依賴性的JavaScript插件。並將多出的文字藏在span後面，保留原文的完整性。CSS自己經過text-overflow也有相似的功能（Truncate String with Ellipsis），但須要設定寬度，若是須要不能固定寬度的項目，Shave應該是一個不錯的選擇。