工作中經常用到github上優秀、實用、輕量級、無依賴的插件和庫

原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關注最新動態，大家一起多交流學習，共同進步，以學習者的身份寫博客，記錄點滴。

按照格式推薦好用的插件有福利哦，說不定會送1024論壇邀請碼，好自為之，你懂的，嘿嘿嘿。

由於github的issues沒有TOC菜單欄導航，所以這里方便大家查看，先安利一款Chrome瀏覽器的插件，感謝github用戶@BBcaptain 推薦。點擊我呀，進入商店，自備梯子，如果不會翻牆，趕緊轉行。。。

效果預覽，是不是很方便，圖片較多，建議等待一會或者多刷新幾下：

Echo.js – 簡單易用的圖片延遲加載插件

github：https://github.com/toddmotto/echo

官方網站：https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

star：3k+

Install：

npm:npm install echo-js
bower:bower install echojs

大小：2KB

功能介紹：
　　Echo.js 是一個獨立的延遲加載圖片的 JavaScript 插件。Echo.js 不依賴第三方庫，壓縮后不到1KB大小。 延遲加載是提高網頁首屏顯示速度的一種很有效的方法，當圖片元素進入窗口可視區域的時候，它就會改變圖像的 src 屬性，從服務端加載所需的圖片，這也是一個異步的過程。
　　
Demo：
效果預覽地址：https://jawil.github.io/demo/echo.js/
Demo源碼：https://github.com/jawil/jawil.github.io/tree/master/demo/echo.js

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Lazyr.js – 延遲加載圖片（Lazy Loading）

github：https://github.com/callmecavs/layzr.js

官方網站：http://callmecavs.com/layzr.js/

star：5k+

Install：

npm:npm install layzr.js --save

大小：2.75 KB

功能介紹：
　　Lazyr.js 是一個小的、快速的、現代的、相互間無依賴的圖片延遲加載庫。通過延遲加載圖片，讓圖片出現在（或接近)）視窗才加載來提高頁面打開速度。這個庫通過保持最少選項並最大化速度。

Demo：
跟上面的Echo.js用法類似，喜歡的可以自行去嘗試，這里就不再演示了，我一般用Echo.js。






better-scroll.js – 小巧，靈活的 JavaScript 模擬滾動條的插件

github：https://github.com/ustbhuangyi/better-scroll

官方網站：https://ustbhuangyi.github.io/better-scroll/

star：300+

Install：

npm install better-scroll --save-dev
import BScroll from 'better-scroll';

大小：24 KB

功能介紹：
　　better-scroll 是一個只有24.8KB的 JavaScript 模擬瀏覽器自帶滾動條的插件，是在**iscroll**開源的基礎上進行優化的一款插件，簡單好用，輕巧高性能，功能強大，API通俗易懂，是一款優秀的scroll插件，拋棄原生滾動條，從現在做起。

Demo：
效果預覽地址：https://jawil.github.io/demo/eleme/ (PC端切換到移動模式)
Demo源碼：https://github.com/jawil/webpack2
注：在ustbhuangyi的源碼下改進了一下，做成多頁面，技術棧：webpack2+vue.js2+sass+axios

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






better-picker – 一款輕量級IOS風格的JavaScript選擇器

github：https://github.com/ustbhuangyi/picker

官方網站：http://ustbhuangyi.github.io/picker/

star：200+

Install：

npm: npm install better-picker --save-dev
import Picker from 'better-picker'

大小：46.5 KB

功能介紹：
　 移動端最好用的的篩選器組件，高仿 ios 的 UIPickerView ，非常流暢的體驗，原生 JS 實現，不依賴任何插件和第三方庫。
Demo：
效果預覽地址：http://ustbhuangyi.github.io/picker/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Sortable – 一款用於實現元素拖拽排序的功能的插件

github：https://github.com/RubaXa/Sortable

官方網站：http://rubaxa.github.io/Sortable/

star：9k+

Install：

Bower: bower install sortablejs --save
npm: npm install sortablejs 

大小：5 KB

功能介紹：
　Sortable：現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery這玩意。

Demo：
效果預覽地址：http://rubaxa.github.io/Sortable/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






slick – 功能異常強大的一個圖片滑動切換效果庫

github：https://github.com/kenwheeler/slick

官方網站：http://kenwheeler.github.io/slick/

star：17k+

Install：

Bower: bower install slick-carousel --save
npm: npm install slick-carousel
CDNs:
https://cdnjs.com/libraries/slick-carousel
https://www.jsdelivr.com/projects/jquery.slick

大小：40 KB

功能介紹：
　slick 是一個功能異常強大的一個圖片滑動切換效果庫，接口豐富，支持各種動畫和各種樣式的切換滑動，唯一的缺點就是基於jQuery，基本廢了，現在沒人喜歡用jQuery，該淘汰了。。。支持 RequireJS 以及 Bower 安裝。

Demo：
效果預覽地址：http://kenwheeler.github.io/slick/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。








swipe – 非常輕量級的一個圖片滑動切換效果庫

github：https://github.com/lyfeyaj/Swipe

官方網站：http://lyfeyaj.github.io/swipe/

star：200+

Install：

Bower: bower install swipe-js  --save
npm: npm install swipe-js 

大小：5 KB

功能介紹：
　swipe：非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮后的大小約 5kb。可以結合 jQuery、RequireJS 使用。

Demo：
效果預覽地址：http://lyfeyaj.github.io/swipe/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Slideout.js – 觸摸滑出式 Web App 導航菜單

github：https://github.com/mango/slideout

官方網站：https://slideout.js.org/

star：6k+

Install：

npm:npm install slideout
spm:spm install slideout
bower:bower install slideout.js
component:component install mango/slideout
<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>

大小：4 KB

功能介紹：
　　Slideout.js 是為您的移動 Web 應用開發的觸摸滑出式的導航菜單。它沒有依賴，自由搭配簡單的標記，支持原生的滾動，您可以輕松地定制它。它支持不同的 CSS3 轉換和過渡。最重要的是，它只是4KB 。

Demo：
效果預覽地址：https://slideout.js.org/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






SweetAlert – 替代 Alert 的漂亮的提示效果

github：https://github.com/t4t5/sweetalert

官方網站：http://t4t5.github.io/sweetalert/

star：15k+

Install：

bower:bower install sweetalert
npm:npm install sweetalert
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

大小：16 KB

功能介紹：
　 Sweet Alert 是一個替代傳統的 JavaScript Alert 的漂亮提示效果。SweetAlert 自動居中對齊在頁面中央，不管您使用的是台式電腦，手機或平板電腦看起來效果都很棒。另外提供了豐富的自定義配置選擇，可以靈活控制。

Demo：
效果預覽地址：http://t4t5.github.io/sweetalert/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。

類似插件：limonte/sweetalert2，好像這個最近還在更新，這個感覺更漂亮，大同小異，這里不多做介紹。

github：https://github.com/limonte/sweetalert2

官方網站： https://limonte.github.io/sweetalert2/






Awesomplete.js - 比datalist更強大更實用，零依賴的簡單自動補全插件

github：https://github.com/leaverou/awesomplete/

官方網站：http://leaverou.github.io/awesomplete/

star：5k+

Install：
npm: npm install awesomplete

大小：5 KB

功能介紹：
　Awesomplete 是一款超輕量級的，可定制的，簡單的自動完成插件，零依賴，使用現代化標准構建。你可以簡單地添加 awesomplete 樣式，讓它自動處理（你仍然可以通過指定 HTML 屬性配置更多選項），您可以用幾行 JS 代碼，提供更多的自定義。

Demo：
效果預覽地址：http://leaverou.github.io/awesomplete/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。




Cleave.js – 自動格式化表單輸入框的文本內容

github：https://github.com/nosir/cleave.js/

官方網站：http://nosir.github.io/cleave.js/

star：6k+

Install：

npm:npm install --save cleave.js
bower:bower install --save cleave.js

大小：11.1 KB

功能介紹：
　　Cleave.js 有一個簡單的目的：幫助你自動格式輸入的文本內容。 這個想法是提供一個簡單的方法來格式化您的輸入數據以增加輸入字段的可讀性。通過使用這個庫，您不需要編寫任何正則表達式來控制輸入文本的格式。然而，這並不意味着取代任何驗證或掩碼庫，你仍應在后端驗證數據。它支持信用卡號碼、電話號碼格式（支持各個國家）、日期格式、數字格式、自定義分隔符，前綴和塊模式等，提供 CommonJS/AMD 模式以及ReactJS 組件端口。

Demo：
效果預覽地址：http://nosir.github.io/cleave.js/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。
輸入201748自動格式化成2017-04-08，是不是很方便





Immutable.js – JavaScript 不可變數據集合（Facebook出品）

github：https://github.com/facebook/immutable-js

官方網站：http://facebook.github.io/immutable-js/

star：18k+

Install：

npm install immutable --S-D

大小：60 KB

功能介紹：
　　不可變數據是指一旦創建就不能被修改的數據，使得應用開發更簡單，允許使用函數式編程技術，比如惰性評估。Immutable JS 提供一個惰性 Sequence，允許高效的隊列方法鏈，類似 map 和 filter ，不用創建中間代表。Immutable.js 提供持久化的列表、堆棧、Map， 以及 OrderedMap 等，最大限度地減少需要復制或緩存數據。

Demo：

<script src="immutable.min.js"></script> <script> var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set('b', 50); map1.get('b'); // 2 map2.get('b'); // 50 </script>

更多信息和探討請移步,這里不多做介紹：facebook immutable.js 意義何在，使用場景？






Popmotion.js – 小巧，靈活的 JavaScript 運動引擎

github：https://github.com/Popmotion/popmotion

官方網站：https://popmotion.io/

star：3k+

Install：

npm install --save popmotion
import { tween } from 'popmotion';

大小：12 KB

功能介紹：
　　Popmotion 是一個只有12KB的 JavaScript 運動引擎，可以用來實現動畫，物理效果和輸入跟蹤。原生的DOM支持：CSS，SVG，SVG路徑和DOM屬性的支持，開箱即用。Popmotion 網站上有很多很贊的效果，趕緊去體驗一下。

Demo：
效果預覽地址：http://codepen.io/popmotion/pen/egwMGQ

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。







Dynamics.js - 創建逼真的物理動畫的 JS 庫

github：https://github.com/michaelvillar/dynamics.js

官方網站：http://dynamicsjs.com/

star：6k+

Install：

npm: npm install dynamics.js
bower: bower install dynamics.js

大小：20 KB

功能介紹：
　　Popmotion 是一個只有12KB的 JavaScript 運動引擎，可以用來實現動畫，物理效果和輸入跟蹤。原生的DOM支持：CSS，SVG，SVG路徑和DOM屬性的支持，開箱即用。Popmotion 網站上有很多很贊的效果，趕緊去體驗一下。

Demo：
效果預覽地址：http://dynamicsjs.com/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Rainyday.js – 使用 JavaScript 實現雨滴效果

github：https://github.com/maroslaw/rainyday.js

官方網站：http://maroslaw.github.io/rainyday.js/

star：5k+

Install：

在github的dist目錄下載rainyday.min.js

大小：10 KB

功能介紹：
　Rainyday.js 背后的想法是創建一個 JavaScript 庫，利用 HTML5 Canvas 渲染一個雨滴落在玻璃表面的動畫。Rainyday.js 有功能可擴展的 API，例如碰撞檢測和易於擴展自己的不同的動畫組件的實現。它是一個使用 HTML5 特性純 JavaScript 庫，支持大部分現代瀏覽器。

Demo：
效果預覽地址：http://maroslaw.github.io/rainyday.js/demo012_1.html

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。

Swiper – 經典的移動觸摸滑塊輪播插件

github：https://github.com/nolimits4web/Swiper

官方網站：http://idangero.us/swiper/

star：11.8k+

Install：

在github上下載

大小：暫不確定，按需引入

功能介紹：
　Swiper 是移動 Web 開發中最常用的滑塊插件，是一款免費的，最現代化的移動觸摸滑塊，支持硬件加速的轉換和驚人的原生表現。它的目的是在移動網站，移動 Web 應用程序和 Hygrid 混合應用程序中使用。最初的設計主要是為 iOS，但同時也支持最新的 Android，Windows Phone 8 和現代的桌面瀏覽器。

Demo：
效果預覽地址：http://idangero.us/swiper/#.WOik3l--uaW

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Snabbt.js – 極簡的 JavaScript 動畫庫

github：https://github.com/daniel-lundin/snabbt.js

官方網站：http://daniel-lundin.github.io/snabbt.js/

star：5k+

Install：

bower:bower install snabbt.js
npm:npm install snabbt.js
CDNs:
https://cdnjs.com/libraries/snabbt.js
http://www.jsdelivr.com/#!snabbt

大小：16 KB

功能介紹：
　Snabbt.js 是一個簡約的 JavaScript 動畫庫。它會平移，旋轉，縮放，傾斜和調整你的元素。通過矩陣乘法運算，變換等可以任何你想要的方式進行組合。最終的結果通過 CSS3 變換矩陣設置。

Demo：
效果預覽地址：http://daniel-lundin.github.io/snabbt.js/periodic.html

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






imagesLoaded – 檢測網頁中的圖片是否加載完成

github：https://github.com/desandro/imagesloaded

官方網站：http://imagesloaded.desandro.com/

star：6k+

Install：

Bower: bower install imagesloaded --save
npm: npm install imagesloaded
CDNs:
<script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>

大小：5 KB

功能介紹：
　imagesLoaded 是一個用於來檢測網頁中的圖片是否載入完成的 JavaScript 工具庫。支持回調的獲取圖片加載的進度，還可以綁定自定義事件。可以結合 jQuery、RequireJS 使用。

Demo：
效果預覽地址：http://codepen.io/desandro/full/hlzaw/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Fort.js – 時尚、現代的表單填寫進度提示效果

github：https://github.com/idriskhenchil/Fort.js

官方網站：https://github.com/idriskhenchil/Fort.js

star：800+

Install：

CDN:
css:
https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.css
js:
https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.js

大小：6 KB

功能介紹：
　　Fort.js 是一款用於時尚、現代的表單填寫進度提示效果的 JavaScript 庫，你需要做的就是添加表單，剩下的任務就交給 Fort.js 算法了，使用非常簡單。提供了Default、Gradient、Sections 以及 Flash 四種效果，滿足開發的各種場合需要。

Demo：
效果預覽地址：http://idriskhenchil.github.io/default/index.html

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






MagicSuggest – Bootstrap 主題的多選組合框

github：https://github.com/nicolasbize/magicsuggest

官方網站：http://nicolasbize.com/magicsuggest/

star：1k+

Install：

github自行進行下載

大小：21.8 KB

功能介紹：
　　MagicSuggest 是專為 Bootstrap 主題開發的多選組合框。它支持自定義呈現，數據通過 Ajax 異步獲取，使用組件自動過濾。它允許空間免費項目，也有動態加載固定的建議。

Demo：
效果預覽地址：http://nicolasbize.com/magicsuggest/examples.html

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Numeral.js – 格式化和操作數字的 JavaScript 庫

github：https://github.com/adamwdraper/Numeral-js

官方網站：http://numeraljs.com/

star：4k+

Install：

npm: npm install numeral
CDNs:
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

大小：10 KB

功能介紹：
　　　Numeral.js 是一個用於格式化和操作數字的 JavaScript 庫。數字可以格式化為貨幣，百分比，時間，甚至是小數，千位，和縮寫格式，功能十分強大。支持包括中文在內的17種語言。

Demo：

var myNumeral = numeral(1000); var value = myNumeral.value(); // 1000 var myNumeral2 = numeral('1,000'); var value2 = myNumeral2.value(); // 1000






Draggabilly – 輕松實現拖放功能（Drag & Drop）

github：https://github.com/desandro/draggabilly

官方網站：http://draggabilly.desandro.com/

star：2k+

Install：

Bower: bower install draggabilly --save
npm: npm install draggabilly
CDNs:
<script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.min.js"></script>
<script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.js"></script>

大小：5 KB

功能介紹：
　Draggabilly 是一個很小的 JavaScript 庫，專注於拖放功能。只需要簡單的設置參數就可以在你的網站用添加拖放功能。兼容 IE8+ 瀏覽器，支持多點觸摸。可以靈活綁定事件，支持 RequireJS 以及 Bower 安裝。

Demo：
效果預覽地址：http://draggabilly.desandro.com/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






Quill – 可以靈活自定義的開源的富文本編輯器

github：https://github.com/quilljs/quill/

官方網站：https://quilljs.com

star：12k+

Install：

npm: npm install quill
CDNs:
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.0.0/quill.js" type="text/javascript"></script>
<script src="//cdn.quilljs.com/1.0.0/quill.min.js" type="text/javascript"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet">

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.0.0/quill.core.js" type="text/javascript"></script>

大小：需求不同，大小不同

功能介紹：
　　Quill 的建立是為了解決現有的所見即所得（WYSIWYG）的編輯器本身就是所見即所得（指不能再擴張）的問題。如果編輯器不正是你想要的方式，這是很難或不可能對其進行自定義以滿足您的需求。

　　Quill 旨在通過把自身組織成模塊，並提供了強大的 API 來構建額外的模塊來解決這個問題。它也並沒有規定你用樣式來定義編輯器皮膚。Quill 還提供了所有你希望富文本編輯器說用於的功能，包括輕量級封裝，眾多的格式化選項，以及廣泛的跨平台支持。

Demo：
效果預覽地址：https://quilljs.com/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






basket.js – 基於 LocalStorage 的資源加載器

github：https://github.com/addyosmani/basket.js

官方網站：https://addyosmani.com/basket.js/

star：2k+

Install：

Bower: bower install basket.js --save
npm: npm install basket.js

大小：4 KB

功能介紹：
　basket.js是一款基於 LocalStorage 的資源加載器，可以用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存。
　
Demo：
效果預覽地址：https://addyosmani.com/basket.js/
更多示例請查看官方文檔






scrollReveal.js – 使元素以非常酷帥的方式進入畫布 (Viewpoint)

github：https://github.com/jlmakes/scrollreveal

官方網站：https://scrollrevealjs.org/

star：12k+

Install：

Bower: bower install scrollreveal --save
npm: npm install scrollreveal
CDNs:
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

大小：8 KB

功能介紹：
　scrollReveal.js 是一個用於使元素以非常酷帥的方式進入畫布的 JavaScript 工具庫。輕量級，高性能，無依賴的一個小巧酷炫的庫。
　
Demo：
效果預覽地址：https://scrollrevealjs.org/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。






moment.js – 一款輕量級的Javascript日期處理類庫

github：https://github.com/moment/moment/

官方網站：http://momentjs.com/

star：30k+

Install：

bower install moment --save # bower
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor

大小：16.6 KB

功能介紹：
　 moment.js是一個輕量級的JavaScript庫日期解析、驗證操作,格式化日期的庫。

Demo：
效果預覽地址：http://momentjs.com/

Demo效果預覽：
這是一個GIF動圖，不信，你看第一行的日期，時間在走。






infinite-scroll – 一款滾動加載按需加載的輕量級插件

github：https://github.com/infinite-scroll/infinite-scroll

官方網站：http://www.infinite-scroll.com/

star：4k+

Install：

github自行下載

大小：20 KB

功能介紹：
　infinite-scroll是一款滾動加載，滾動到最下到自動加載的輕量級JavaScript插件，簡單實用，按需加載提高用戶體驗，非常適合移動端使用，配合上面的圖片懶加載如虎添翼。

Demo：
效果預覽地址：http://www.dazeddigital.com/

Demo效果預覽：
圖片有點大，稍等片刻。建議上面Demo效果預覽地址進行預覽。