github上实用、常用的插件和库
本文整合羅列一些平時工作或者練手項目中很可能用到的、github上實用、輕量級、無依賴的插件和庫,包括功能插件、UI組件、炫酷動畫、前沿技術等,讓你在少造輪子的同時,享受快速開發的暢快體驗。
我會在?github?上持續更新此列表,感興趣的可以點我star
Echo.js – 簡單易用的圖片延遲加載插件
github:https://github.com/toddmotto/echo
官方網站:https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/
star: 3K+
size:2KB
功能介紹:
Echo.js 是一個獨立的延遲加載圖片的 JavaScript 插件。Echo.js 不依賴第三方庫,壓縮后不到1KB大小。 延遲加載是提高網頁首屏顯示速度的一種很有效的方法,當圖片元素進入窗口可視區域的時候,它就會改變圖像的 src 屬性,從服務端加載所需的圖片,這也是一個異步的過程。
Lazyr.js – 延遲加載圖片(Lazy Loading)
github:https://github.com/callmecavs/layzr.js
官方網站:http://callmecavs.com/layzr.js/
star: 5K+
size:2.75KB
功能介紹:
Lazyr.js 是一個小的、快速的、現代的、相互間無依賴的圖片延遲加載庫。通過延遲加載圖片,讓圖片出現在(或接近))視窗才加載來提高頁面打開速度。這個庫通過保持最少選項并最大化速度。
infinite-scroll – 一款滾動加載按需加載的輕量級插件
github:https://github.com/infinite-scroll/infinite-scroll
官方網站:http://www.infinite-scroll.com/
star:5k+
功能介紹:
infinite-scroll是一款滾動加載,滾動到最下到自動加載的輕量級JavaScript插件,簡單實用,按需加載提高用戶體驗,非常適合移動端使用,配合上面的圖片懶加載如虎添翼。這個東西不是完全開源的,自己用的話無所謂,但如果想要在商業項目中使用,就必須要購買使用許可。
iscroll - 在網頁上實現平滑滾動
github:https://github.com/cubiq/iscroll
官方網站:http://iscrolljs.com
star:9K+
功能介紹:
iScroll是一個高性能,小尺寸,無依賴關系,適用于 移動端 和 pc多平臺JavaScript的滾動插件庫,并且不僅僅是滾動,還可以縮放、平移、無線滾動、視差滾動、旋轉滾動等,做到移動web與原生APP的完美結合,此系列還被細分出了許多其他專注于某個領域的插件,可以根據需要選擇使用。
better-scroll.js – 小巧,靈活的 JavaScript 模擬滾動條的插件
github:https://github.com/ustbhuangyi/better-scroll
官方網站:https://ustbhuangyi.github.io/better-scroll/
star:1.7K+
size: 24KB
功能介紹:
better-scroll 是一個只有24.8KB的 JavaScript 模擬瀏覽器自帶滾動條的插件,是在iscroll開源的基礎上進行優化的一款插件,簡單好用,輕巧高性能,功能強大,API通俗易懂,有完善詳細的官方文檔,并且倉庫中示例DEMO豐富詳細,全都有對應的 vue實現,結合vue使用這款插件,簡直不能再得心用手。
better-picker – 一款輕量級IOS風格的JavaScript選擇器
github:https://github.com/ustbhuangyi/picker
官方網站:http://ustbhuangyi.github.io/picker/
star: 500+
size: 46.5KB
功能介紹:
移動端最好用的的篩選器組件,高仿 ios 的 UIPickerView ,非常流暢的體驗,原生 JS 實現,不依賴任何插件和第三方庫
nativeShare.js - 調起移動端瀏覽器自帶分享功能
github:?https://github.com/fa-ge/NativeShare
star: 60+
size: 4KB
功能介紹:
移動端瀏覽器大多都有自帶的調起分享功能,不過因為這種功能并沒有統一的規范,所以每種瀏覽器的實現方法都不一樣,此庫整合了大部分瀏覽器的調起方法,讓調起瀏覽器的 native分享功能的操作變的?so easy。
Share.js - 純網頁端一鍵分享
github:?https://github.com/overtrue/share.js
star: 1.4k+
功能介紹:
一鍵分享到微博、QQ空間、QQ好友、微信、騰訊微博、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等社交網站,主要是調起這些網站對外開放的分享?api
Sortable – 一款用于實現元素拖拽排序的功能的插件
github:https://github.com/RubaXa/Sortable
官方網站:http://rubaxa.github.io/Sortable/
star:11k+
size: 5KB
功能介紹:
現代瀏覽器上用于實現元素拖拽排序的功能,支持 Meteor, AngularJS, React
react-sortable-hoc - react 拖拽排序
github:?https://github.com/clauderic/react-sortable-hoc
star:2.8K+
功能介紹:
基于react 的拖拽實現
Draggabilly – 輕松實現拖放功能(Drag & Drop)
github:https://github.com/desandro/draggabilly
官方網站:http://draggabilly.desandro.com/
star:2.9k+
size: 5KB
功能介紹:
Draggabilly 是一個很小的 JavaScript 庫,專注于拖放功能。只需要簡單的設置參數就可以在你的網站用添加拖放功能。兼容 IE8+ 瀏覽器,支持多點觸摸。可以靈活綁定事件,支持 RequireJS 以及 Bower 安裝。
slick – 功能異常強大的一個圖片滑動切換效果庫
github:https://github.com/kenwheeler/slick
官方網站:http://kenwheeler.github.io/slick/
star: 19K+
size: 40KB
功能介紹:
slick 是一個功能異常強大的一個圖片滑動切換效果庫,接口豐富,支持各種動畫和各種樣式的切換滑動,唯一的缺點就是基于jQuery,基本廢了,因為 jQuery沒辦法裝逼,所以應該沒人會在新項目用了,支持 RequireJS 以及 Bower 安裝
react-slick - 基于 slick 打造的 react-slick組件
github:?https://github.com/akiran/react-slick
官網:http://neostack.com/opensource/react-slick
star: 3.3K+
功能介紹:
基于 slick的 react-slick組件,支持無限輪播、垂直輪播、自動輪播等多種輪播方式
swipe – 非常輕量級的一個圖片滑動切換效果庫
github:https://github.com/lyfeyaj/Swipe
官方網站:http://lyfeyaj.github.io/swipe/
star:390+
size: 5KB
功能介紹:
非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮后的大小約 5kb。可以結合 jQuery、RequireJS 使用
Slideout.js – 觸摸滑出式 Web App 導航菜單
github:https://github.com/mango/slideout
官方網站:https://slideout.js.org/
star:6.7k+
size: 4KB
功能介紹:
Slideout.js 是為您的移動 Web 應用開發的觸摸滑出式的導航菜單。它沒有依賴,自由搭配簡單的標記,支持原生的滾動,您可以輕松地定制它。它支持不同的 CSS3 轉換和過渡。最重要的是,它只是4KB 。
SweetAlert – 替代 Alert 的漂亮的提示效果
github:https://github.com/t4t5/sweetalert
官方網站:http://t4t5.github.io/sweetalert/
star:16k+
功能介紹:
Sweet Alert 是一個替代傳統的 JavaScript Alert 的漂亮提示效果。SweetAlert 自動居中對齊在頁面中央,不管您使用的是臺式電腦,手機或平板電腦看起來效果都很棒。另外提供了豐富的自定義配置選擇,可以靈活控制。
push.js - 桌面通知 Notification框架庫
github:?https://github.com/Nickersoft/push.js
star: 6.1k+
功能介紹:Push 是 BrowserStack 出品的,快速實現基于 HTML5 API?Notification?的桌面消息推送工具;Push 能夠自動利用 Chrome、Safari、Firefox、IE9+ 這些現代瀏覽器提供的底層接口,為開發者提供跨平臺的統一調用,如果瀏覽器不支持此 API,則啟動回退機制,支持 Chrome, Safari, Firefox, and IE 9+
tracking.js - web端圖像追蹤引擎
github:https://github.com/eduardolundgren/tracking.js
官網:https://trackingjs.com/
star:5.4K+
功能介紹:
完成各種追蹤類的圖像處理任務,例如人臉識別、五官追蹤等
AlloyImage - 堪稱前端PS的前端圖像處理類庫
github:https://github.com/AlloyTeam/AlloyImage
官網:http://alloyteam.github.io/AlloyImage/
star:1.7K+
功能介紹:
騰訊前端出品,基于html5的JS圖片圖像處理庫,堪稱前端PS,簡單易用,官方文檔齊全,支持多圖層操作,與PS對應的17種圖層混合模式,多種基本濾鏡處理效果,多種組合風格效果,另有?AlloyPhoto,基于此類庫開發,AlloyImage的強勢Demo。
gm - 基于nodeJS操作圖片的庫
github:https://github.com/aheckmann/gm
官網:http://aheckmann.github.io/gm/
star:4.3K+
功能介紹:
基于node操作圖片的庫,可以獲取圖片尺寸(size)、路徑(orientation )、類型(format)、色值(depth)、顏色(color)、分辨率(res)、體積(filesize)等信息,可以對圖像進行拼合、水印、自適應、模糊、壓縮、旋轉等多種操作,功能很強大。
star:4.3K+
Awesomplete.js - 比datalist更強大更實用,零依賴的簡單自動補全插件
github:https://github.com/leaverou/awesomplete/
官方網站:http://leaverou.github.io/awesomplete/
star: 5.6K+
size: 5KB
功能介紹:
Awesomplete 是一款超輕量級的,可定制的,簡單的自動完成插件,零依賴,使用現代化標準構建。你可以簡單地添加 awesomplete 樣式,讓它自動處理(你仍然可以通過指定 HTML 屬性配置更多選項),您可以用幾行 JS 代碼,提供更多的自定義
Cleave.js – 自動格式化表單輸入框的文本內容
github:https://github.com/nosir/cleave.js/
官方網站:http://nosir.github.io/cleave.js/
star: 7.2K+
size: 11.1KB
功能介紹:
Cleave.js 有一個簡單的目的:幫助你自動格式輸入的文本內容。 這個想法是提供一個簡單的方法來格式化您的輸入數據以增加輸入字段的可讀性。通過使用這個庫,您不需要編寫任何正則表達式來控制輸入文本的格式。然而,這并不意味著取代任何驗證或掩碼庫,你仍應在后端驗證數據。它支持信用卡號碼、電話號碼格式(支持各個國家)、日期格式、數字格式、自定義分隔符,前綴和塊模式等,提供 CommonJS/AMD 模式以及ReactJS 組件端口。
Immutable.js – JavaScript 不可變數據集合(Facebook出品)
github:https://github.com/facebook/immutable-js
官方網站:http://facebook.github.io/immutable-js/
star: 20K+
size: 60KB
功能介紹:
不可變數據是指一旦創建就不能被修改的數據,使得應用開發更簡單,允許使用函數式編程技術,比如惰性評估。Immutable JS 提供一個惰性 Sequence,允許高效的隊列方法鏈,類似 map 和 filter ,不用創建中間代表。Immutable.js 提供持久化的列表、堆棧、Map, 以及 OrderedMap 等,最大限度地減少需要復制或緩存數據。
howler.js - 為現代web瀏覽器打造的 javascript音頻庫
github:https://github.com/goldfire/howler.js
官網:https://howlerjs.com/
star: 8.4K+
size: 28.3KB
功能介紹:
為現代web瀏覽器打造的跨瀏覽器 javascript音頻庫,默認使用 HTML5 Audio API,回退為 HTML Audio,統一所有瀏覽器的 Audio API接口,?
自動緩存、音頻控制(快進、快退、速度等)、混合、裁剪、3D音效等眾多功能,純凈無依賴、壓縮后僅有 28.3Kb、gzip之后僅有 7KB大小,支持?IE9.0+
Popmotion.js – 小巧,靈活的 JavaScript 運動引擎
github:https://github.com/Popmotion/popmotion
官方網站:https://popmotion.io/
star:3.9k+
size: 12KB
功能介紹:
Popmotion 是一個只有12KB的 JavaScript 運動引擎,可以用來實現,物理效果和輸入跟蹤。原生的DOM支持:CSS,SVG,SVG路徑和DOM屬性的支持,開箱即用。Popmotion 網站上有很多很贊的效果,趕緊去體驗一下。
Dynamics.js - 創建逼真的物理動畫的 JS 庫
github:https://github.com/michaelvillar/dynamics.js
官方網站:http://dynamicsjs.com/
star:6.5k+
size: 20KB
功能介紹:
創建逼真的物理動畫的 JS 庫
Snabbt.js – 極簡性能的 JavaScript 動畫庫
github:http://daniel-lundin.github.io/snabbt.js/
star:5k+
功能介紹:
Snabbt.js 是一個簡約的 JavaScript 動畫庫。它會平移,旋轉,縮放,傾斜和調整你的元素。通過矩陣乘法運算,變換等可以任何你想要的方式進行組合。最終的結果通過 CSS3 變換矩陣設置。
animate.css - 經典的 cs動畫庫
github:?https://github.com/daneden/animate.css
star: 44k+
功能介紹:
類似于上面的?Snabbt.js,不過動畫效果是由?css實現的,支持多種動畫效果。
velocity.js - javascript動畫庫,專注于動畫的渲染速度
github:?https://github.com/julianshapiro/velocity
官網:http://velocityjs.org/
star:13.3K+
功能介紹:
javascript動畫庫,專注于動畫的渲染速度,具有和 Jquery $.animate()相同的動畫引擎,不過其并不依賴 Jquery
mojs - web端圖形運動算法庫,用于制作復雜的炫酷動畫效果
github:https://github.com/legomushroom/mojs
star: 11.9K+
功能介紹:
web端圖形運動算法庫,用于制作復雜的炫酷動畫效果,官網有詳細的 api文檔以及示例
tween.js - javascript tweening engine
github:?https://github.com/tweenjs/tween.js
star: 4.5k+
功能介紹:
一款根據給定的初始坐標和結束坐標進行運動動畫的動畫庫,包括 Linear、Quadratic、cubic、Quartic、Quintic、Sinusoidal、Exponential等形式的動畫效果,還包括在動畫過程中增刪更新元素等的操作,便于實現簡單的兩點動畫。
Rainyday.js – 使用 JavaScript 實現雨滴效果
github:https://github.com/maroslaw/rainyday.js
官方網站:http://maroslaw.github.io/rainyday.js/
star:5.2k+
size: 10KB
功能介紹:
Rainyday.js 背后的想法是創建一個 JavaScript 庫,利用 HTML5 Canvas 渲染一個雨滴落在玻璃表面的動畫。Rainyday.js 有功能可擴展的 API,例如碰撞檢測和易于擴展自己的不同的動畫組件的實現。它是一個使用 HTML5 特性純 JavaScript 庫,支持大部分現代瀏覽器。
vx react + D3
github:?https://github.com/hshoff/vx
官網:https://vx-demo.now.sh/
star:2.6K+
功能介紹:
react結合 D3實現的圖標庫
vue-svg-icon - 輕量的Vue2多色動態svg圖標方案
github:?https://github.com/cenkai88/vue-svg-icon
star: 230+
功能介紹:
不需要 inject注冊 svg,可以自行調整大小、顏色,沒有冗余的初始圖標庫,你需要什么圖標就自己添加,完全按需加載,不用擔心額外圖標庫帶來的體積增加。
pasition - 輕量級Path過渡庫,渲染到任何地方
github:?https://github.com/AlloyTeam/pasition
star:700k+
功能介紹:
在兩個 svg path將設置過渡渲染效果,讓兩個 path間的變化顯得更加平滑
scrollReveal.js – 使元素以非常酷帥的方式進入畫布 (Viewpoint)
github:https://github.com/jlmakes/scrollreveal
官方網站:https://scrollrevealjs.org/
star:12k+
size: 8KB
功能介紹:
scrollReveal.js 是一個用于使元素以非常酷帥的方式進入畫布的 JavaScript 工具庫,常見于整屏的 H5動畫,當元素進入或者離開可視范圍時,進行一系列的動畫效果,輕量級,高性能,無依賴的一個小巧酷炫的庫。
Swiper – 經典的移動觸摸滑塊輪播插件
github:https://github.com/nolimits4web/Swiper
官方網站:http://idangero.us/swiper/
star:13.3k+
功能介紹:
Swiper 是移動 Web 開發中最常用的滑塊插件,是一款免費的,最現代化的移動觸摸滑塊,支持硬件加速的轉換和驚人的原生表現。它的目的是在移動網站,移動 Web 應用程序和 Hygrid 混合應用程序中使用。最初的設計主要是為 iOS,但同時也支持最新的 Android,Windows Phone 8 和現代的桌面瀏覽器。
imagesLoaded – 檢測網頁中的圖片是否加載完成
github:https://github.com/desandro/imagesloaded
官方網站:http://imagesloaded.desandro.com/
star:6.6k+
size: 1.9KB
功能介紹:
imagesLoaded 是一個用于來檢測網頁中的圖片是否載入完成的 JavaScript 工具庫。支持回調的獲取圖片加載的進度,還可以綁定自定義事件。可以結合 jQuery、RequireJS 使用(不是必須的)。
Fort.js – 時尚、現代的表單填寫進度提示效果
github:https://github.com/idriskhenchil/Fort.js
官方網站:https://github.com/idriskhenchil/Fort.js
star:900+
size: 6KB
功能介紹:
Fort.js 是一款用于時尚、現代的表單填寫進度提示效果的 JavaScript 庫,主要就是在瀏覽器頂部增加一個進度條,隨著表單內的 input框被填寫的比例進行進度條的長度變化,進度條支持多種變化的樣式,例如漸變、從兩邊朝中間合并、變色等,你需要做的就是添加表單,剩下的任務就交給 Fort.js 算法了,使用非常簡單。提供了Default、Gradient、Sections 以及 Flash 四種效果,滿足開發的各種場合需要。
MagicSuggest – Bootstrap 主題的多選組合框
github:https://github.com/nicolasbize/magicsuggest
官方網站:http://nicolasbize.com/magicsuggest/
star:1.2k+
size: 21.8KB
功能介紹:
MagicSuggest 是專為 Bootstrap 主題開發的多選組合框,即允許在一個輸入框中輸入多個下拉選擇,它支持自定義呈現,數據通過 Ajax 異步獲取,使用組件自動過濾。它允許空間免費項目,也有動態加載固定的建議,
Numeral.js – 格式化和操作數字的 JavaScript 庫
github:https://github.com/adamwdraper/Numeral-js
官方網站:http://numeraljs.com/
star:5.3k+
size: 10KB
功能介紹:
Numeral.js 是一個用于格式化和操作數字的 JavaScript 庫。數字可以格式化為貨幣,百分比,時間,甚至是小數,千位,和縮寫格式,功能十分強大。支持包括中文在內的17種語言。
Quill – 可以靈活自定義的開源的富文本編輯器
github:https://github.com/quilljs/quill/
官方網站:https://quilljs.com
star:14k+
功能介紹:
Quill 的建立是為了解決現有的所見即所得(WYSIWYG)的編輯器本身就是所見即所得(指不能再擴張)的問題。如果編輯器不正是你想要的方式,這是很難或不可能對其進行自定義以滿足您的需求。?
Quill 旨在通過把自身組織成模塊,并提供了強大的 API 來構建額外的模塊來解決這個問題。它也并沒有規定你用樣式來定義編輯器皮膚。Quill 還提供了所有你希望富文本編輯器說用于的功能,包括輕量級封裝,眾多的格式化選項,以及廣泛的跨平臺支持。
request - 讓 http請求變得更簡單
github:?https://github.com/request/request
star: 16.7K+
size: 500K+
功能介紹:
基于 node.js http模塊,為瀏覽器打造易用的 http請求庫,默認支持 https和重定向,支持文件流和表單的傳輸、HTTP認證、OAuth登錄、定制HTTP header、cookies(默認禁止,需要自動開啟)、代理、promise、async/await、HAR 1.2等多種 http請求。
r2 - 參考 request打造的輕量級、高可用的 http客戶端
github:?https://github.com/mikeal/r2
size: 66K
功能介紹:
與 request為同一個作者打造,相比于 request更加輕量、專注,基于現代瀏覽器的?fetch API,基于?promise, 與?asynv/await搭配更佳。
basket.js – 基于 LocalStorage 的資源加載器
github:https://github.com/addyosmani/basket.js
官方網站:https://addyosmani.com/basket.js/
star:2.9k+
size: 4KB
功能介紹:
basket.js是一款基于 LocalStorage 的資源加載器,可以用來緩存 script 和 css, 手機端使用速度快于瀏覽器直接緩存。
moment.js – 一款輕量級的Javascript日期處理類庫
github:https://github.com/moment/moment/
官方網站:http://momentjs.com/
star:32k+
size: 16.6KB
功能介紹:
moment.js是一個輕量級的JavaScript庫日期解析、驗證操作,格式化日期的庫。
hammerjs
github:https://github.com/hammerjs/hammer.js/
star: 16k+
功能介紹:
hammer.js是一個輕量級的手勢庫,支持各種手勢的事件。
ityped - 模擬打字效果
github:?https://github.com/luisvinicius167/ityped
官網:https://ityped.surge.sh/
star: 1.7K+
size: 1.9KB
功能介紹:
模擬打字機效果
favico.js - 動態變換網站圖標
github:https://github.com/ejci/favico.js
star: 7.6K+
功能介紹:
動態改變網站的 favico圖標,可以是圖片、html視頻等,支持改變顏色、字體、背景顏色等。
move.js - js動態設置?css3動畫
github:?https://github.com/visionmedia/move.js
star: 4.1K+
功能介紹:
為元素設置css3動畫
notie - 網頁提示彈窗
github:https://github.com/jaredreich/notie
star: 5.6K+
功能介紹:
平滑出現在網頁內的彈窗,類似于 modal窗
particles.js - 粒子動畫庫
github:https://github.com/VincentGarreau/particles.js
star: 11.1k+
功能介紹:
炫酷的粒子動畫
popper.js
github:https://github.com/FezVrasta/popper.js
官網:https://popper.js.org/
star: 5.5K+
size: 6KB
功能介紹:
純 JS 寫的輕量級位置計算引擎,零依賴;可用她定制諸如 tooltips等工具,比如 Tippy.js、tooltip.js 就是基于該庫打造而成的。
lightgallery.js - 圖片&視頻展示的gallery
github:?https://github.com/sachinchoolur/lightgallery.js
官網:https://sachinchoolur.github.io/lightgallery.js/
star: 3.5k+
功能介紹:
純 JS 寫的圖片&視頻展示的gallery,提供豐富的API、響應式功能、HTML5特性支持等,功能強大,用于網站的圖片專門的瀏覽頁面;
APlayer - 快速創建音樂播放器
github:https://github.com/MoePlayer/APlayer
star: 1.8K+
功能介紹:
只需配置參數即可快速創建音樂播放器
fabric.js - 簡單而強大的 JavaScript Canvas 庫
github:?https://github.com/kangax/fabric.js
官網:http://fabricjs.com/
star: 8.5K+
功能介紹:
支持 canvas 與 svg、json之間的轉換,支持圖像形狀、過渡色、顏色、角度、字體、動畫、手勢拖放等
intro.js - 向用戶一步步介紹網站的新功能
github:?https://github.com/usablica/intro.js
官網:http://introjs.com/
star:15K+?
功能介紹:
使用動畫來一步步引導用戶熟悉網站功能
whatwg-fetch - fetch 的 polyfill
github:?https://github.com/github/fetch
star: 15.6k+
功能介紹:
fetch 的 polyfill,支持 IE10+
isomorphic-fetch - 基于 whatwg-fetch 實現的前后端同構 fetch,同時支持 node 與 瀏覽器
github:https://github.com/matthew-andrews/isomorphic-fetch
star: 4.8K+
功能介紹:
基于 whatwg-fetch 實現的前后端同構 fetch,同時支持 node 與 瀏覽器
detector - 識別客戶端環境
github:?https://github.com/hotoo/detector
star: 600+
功能介紹:
用于自動識別用戶使用的客戶端環境。包括硬件設備、操作系統、瀏覽器、瀏覽器渲染引擎
aframe.js - web端 VR引擎
github:?https://github.com/aframevr/aframe/
官網:https://aframe.io/
star:6.2K+
功能介紹:
在 web端實現 VR效果,包括 360°全景圖片、視頻等
Babylon.js - 使用 HTML 5 and WebGL構建 3D 的 javascript引擎
github:?https://github.com/BabylonJS/Babylon.js
官網:http://www.babylonjs.com/
star: 5.3K+
功能介紹:
使用 HTML 5 and WebGL構建 3D 的 javascript引擎
AlloyTouch 移動端觸摸滑動方案
github:?https://github.com/AlloyTeam/AlloyTouch
star: 1.4K
功能介紹:
觸摸滑動,可用根據此插件擴展上拉和下拉刷新、輪播、VR等
highlight.js - javascript web高亮
github:https://github.com/isagalaev/highlight.js
star:10k+
功能介紹:
在網頁中顯示?javascript代碼時,自動高亮語法
clipboard.js - 現代瀏覽器復制到粘貼板的解決方案
github:?https://github.com/zenorocha/clipboard.js
star: 18K+
size: 3KB
功能介紹:
瀏覽器端復制到粘貼板的方法存在著各種兼容性問題,此插件提供了開箱即用的解決方案,支持到 IE9+
iview - vue UI組件庫
github:?https://github.com/iview/iview
star: 8.5K+
功能介紹:
高質量的 vue UI組件庫
ant-design - 阿里巴巴開源的 react組件庫
github:?https://github.com/ant-design/ant-design
star: 16K+
功能介紹:
阿里巴巴開源的 react組件庫,支持現代瀏覽器和 IE9 及以上,支持服務端渲染,支持Electron
awesome-react-components - react UI庫列表
github:https://github.com/brillout/awesome-react-components
官網:https://devarchy.com/react
star:9.7K+
功能介紹:
這并不是一個具備什么功能或者效果的技術庫,而是一個整合了 github上幾乎所有可用的 react UI組件庫的列表,在這個列表中,你可以找到幾乎所有的 react UI組件,以及眾多優秀或者小眾的 react UI組件庫項目
video.js - HTML5 & Flash 視頻播放器
github:?https://github.com/videojs/video.js
官網:http://videojs.com/
star: 17k+
功能介紹:
基于 HTML5的網絡視頻播放器,支持 HTML和 Flash,支持 PC和移動端
sizzy - 網站響應式一鍵測試
github:https://github.com/kitze/sizzy
star:4.5K+
功能介紹:
同時展現出一個網頁在多種設備下顯示效果,包括 iphone4、5、6、7、7plus、iPad Air、Nexus6P等
Next.js - React服務端渲染應用框架
github:?https://github.com/zeit/next.js
官網:?https://zeit.co/blog/next3
star:16K+
功能介紹:
React服務端渲染 SSR應用框架,支持可選的服務端與客戶端渲染功能,簡單易用,安裝這個框架會搭建一個基于React、Webpack和Babel的構建過程,也就是說腳手架已經預設了配置,開發人員不必在搭建Webpack或Babel配置上花費時間了。以往,這兩個步驟就會耗費開發人員很多的時間。要運行某個站點的開發版本,只需運行npm run dev。
Nuxt.js - Vue的服務端渲染應用框架
github:?https://github.com/nuxt/nuxt.js
官網:?https://nuxtjs.org/?中文:https://zh.nuxtjs.org/
star: 6.3K+
功能介紹:
Vue的服務端渲染應用框架,類別上面的 Next.js,發布時間緊隨在 Next.js后面幾個小時,同樣預設了利用Vue.js開發服務端渲染的應用所需要的各種配置,并且還提供了一種命令叫:nuxt generate,為基于 Vue.js 的應用提供生成對應的靜態站點的功能,作為框架,Nuxt.js 為 客戶端/服務端 這種典型的應用架構模式提供了許多有用的特性,例如異步數據加載、中間件支持、布局支持等,最美妙的是,與?Vue一樣,這東西有中文版,看著就親切。
react-native-vector-icons - react-native 圖標庫
github:?https://github.com/oblador/react-native-vector-icons
star:5.8K+
功能介紹:
react-native 圖標庫,整合了 Entypo、EvilIcons、FontAwesome、Foundation、Ionicons、MaterialCommunityIcons等圖標庫,支持 IOS和 Android
react-native-snap-carousel - react-native的 swiper組件
github:https://github.com/archriss/react-native-snap-carousel
star: 800+
功能介紹:
react-native的 swiper組件
react-native-fs - react-native 文件操作插件
github:https://github.com/itinance/react-native-fs
star:1.3K+
功能介紹:
react-native 文件操作插件,兼容 IOS 和 Android
react-navigation - react-native 導航插件
github:https://github.com/react-community/react-navigation
star:6.4K+
功能介紹:
react-native 導航插件,react-native 社區出品,易用,統一 IOS 和 Android間的導航操作,用于替代 react-native官方提供的導航API
react-native-action-view
github:https://github.com/wix/react-native-action-view
star: 50+
功能介紹:
react-native類似于 微信 和 QQ好友列表的刪除、置頂的操作,多種樣式可選
react-native-svg - 在react-native中使用 svg
github:https://github.com/react-native-community/react-native-svg
star:1.5K+
功能介紹:
react-native社區出品,在react-native中使用 svg
后續更多實用插件和庫將在?github?上持續更新
總結
以上是生活随笔為你收集整理的github上实用、常用的插件和库的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ios下用点9图片
- 下一篇: unity沙子堆积_Unity Shad