輕量高效的開源JavaScript外掛和庫 【轉】
阿新 • • 發佈:2018-11-29
圖片
- baguetteBox.js - 是一個簡單易用的響應式影象燈箱效果指令碼。demo
- Lightgallery.js - 是一個功能齊全的JavaScript影象燈箱外掛。demo
- viewerjs - 是一個影象預覽外掛。demo
- cropperjs - 是一個圖片編輯器外掛。demo
- photo-editor - 是一個本地圖片編輯器外掛。demo
- blazy.js - 是一個懶惰載入外掛。demo
佈局
- SuperEmbed.js - 是一個Javascript庫,可檢測出網頁上的內嵌視訊並使他們能夠變成響應式元素。
- ScrollReveal - ScrollReveal外掛使使用者能夠無比輕鬆地建立桌面和移動瀏覽器的網頁滾動動畫。demo
- Bricks.js - 是一款超快的用於固定寬度元素的“磚石”佈局生成器。demo
輪播圖
- Swipe - 準確的觸控滑塊。demo
- Lory - 是一個由 Vanilla JavaScript 編寫的擁有觸控功能的簡約滑塊。demo
- baguetteBox.js - 是一個簡單、易用的響應式 Lightbox 圖片庫,它支援移動端上觸滑動手勢操作,無依賴。demo
彈出層
- Popper.js - 是一個輕量級的庫用於管理工具提示和彈窗效果。demo
- SweetAlert2 - 是一個顏值很高而且可以自定義的警告彈出視窗外掛,可以代替Javascript的彈出視窗。demo
- artDialog - 是一個經典、優雅的網頁對話方塊控制元件。demo
- layer - 是一個web彈層元件。demo
音訊視訊
- Loud Links - 是一個輕量級的JavaScript庫用於新增互動聲音到您的站點。demo
- flv.js - B 站 HTML5 播放器核心開源。
- Loud Links - 是一個輕量級 JavaScript 庫,用於向您的網站新增互動音訊。。demo
編輯器
- MediumEditor - 仿Medium.com的所見即所得線上編輯器工具欄。demo
- Substance - 是一個基於Web的內容自定義編輯器。demo
- flatpickr - 是一個輕量級的程式碼高亮庫,適用於任何程式語言。demo
- pen - 是一個Markdown編輯器工具。demo
- aceAce(Ajax.org Cloud9 Editor)。demo
- CodeMirror瀏覽器端的程式碼編輯器。demo
- esprima用於綜合分析的 ECMAScript 解析器。demo
- quill一個帶有 API 的跨瀏覽器富文字編輯器。(demo)
- ckeditor-releases 適用於每個人的 web 文字編輯器。demo
- editor 一個 markdown 編輯器,但仍在開發中。demo
- EpicEditor 一個可嵌入的 js Markdown的編輯器,擁有全屏編輯、即時預覽、自動儲存草稿和離線支援等功能。demo
- jsoneditor 檢視、編輯和格式化 JSON 的 web 工具。demo
- vim.js 擁有持久化 ~/.vimrc 的 Vim 編輯器的 JavaScript 移植版本。demo
- Squire HTML5 富文字編輯器。demo
- TinyMCE JavaScript 富文字編輯器。demo
- trix 由 Basecamp 製作,適用於每天寫作的富文字編輯器。demo
- Editor.md 由 Basecamp 製作,適用於每天寫作的富文字編輯器。demo
字串
- selecting - 一個允許你獲取使用者選定文字的庫。
- string.js - 額外的 JavaScript 字串方法。demo
- he - 健壯的 HTML 實體編碼/解碼器。
- multiline - 多行字串。
- query-string - 解析和字串化 URL 查詢字串。
- URI.js - URL 操作庫。demo
- jsurl - 輕量的 URL 操作庫。
- sprintf.js - 實現字串格式化。
- url-pattern - 讓 url 和其它字串進行比正則表示式匹配更簡單。字串和資料可相互轉化。
- Numeral.js - 格式化和運算元字的 JS 庫。 demo
表單
- validator.js - 輕量級的JavaScript表單驗證,字串驗證。demo
- List.js - 是一個輕量級的為列表、表格或其他任何HTMLL標籤增加了搜尋,排序,過濾器和靈活性等元素。demo
- Algolia Places - 是一個能讓你在網頁輕易實現搜尋欄自動完成功能。demo
- Cleave.js - 是一個會在你輸入時格式化你的
<input/>
標籤裡面的內容。demo - validator.js - 是一個簡單、輕量級,但功能強大的 Validator 元件。demo
- axios - 是一個基於瀏覽器和node的HTTP請求庫,綠色環保只有12kb。
儲存
- store.js - 本地儲存localstorage的封裝,提供簡單的API。demo
- cookie.js - 對操作cookie的封裝,提供簡單的AIP 相容IE6。demo
- store.js - 為所有瀏覽器封裝了LocalStorage,隱祕地使用localStorage、globalStorage和使用者資料。
- localForage - 改善後的離線儲存。封裝了IndexedDB、WebSQL和localStorage。demo
- cross-storage - 獲得許可權後,能跨域名本地儲存。
- basket.js - 用 localStorage 載入和快取指令碼的資源載入器。demo
- bag.js - 可以快取指令碼和載入資源,增加了鍵值對介面和對localStorage/websql/indexedDB 的支援。
- basil.js - 智慧的 JavaScript 資料持久層庫。
- Cookies - 客戶端 Cookie 操作庫。
- DB.js - 基於 Promise 的、封裝了 IndexedDB 的庫。demo
- lawnchair.js - 簡單的客戶端 JSON 儲存。demo
動畫
- anime.js - 是一個靈活輕便的JavaScript動畫庫。demo
- three.js - 是一個JS 3D庫。demo
- loaders.css - CSS 動畫載入效果。demo
- Hover.css - 一款基於 CSS3 的懸停特效合集。demo
- Effeckt.css - 一個包含眾多精妙的 CSS3 切換和動畫效果庫。demo
- Magic Animations - 一個獨特的 CSS3 動畫特效包。demo
- Transformicons - 一個結合 SVG、CSS 和 HTML 技術,讓圖示、按鈕和符號具有變種(特殊)動畫效果的庫。demo
- SpinKit - 一款 CSS 載入動畫合集,可高度自定義動畫效果。demo
- d3-ease - 這是一個讓動畫更為平滑的 Easing 庫。
- ScrollMagic - 一個用來建立魔幻滾動互動的 JavaScript 庫,可以像使用進度條一樣使用滾動條。demo
- ScrollReveal - 一款頁面滾動顯示動畫,可以播放一次也可以播放無限次,能讓頁面更加有趣,更吸引使用者眼球。。demo
- RELLAX.js - 是一款主打輕量級的純 JavaScript 視差效果庫。demo
- CountUp.js - 可以用來快速建立以一種更有趣的動畫方式顯示數值資料。demo
- Dynamics.js - 可以建立物理運動動畫效果 JavaScript 庫。demo
- Mojs - 一個擁有極簡的宣告式 API ,能夠輕鬆掌控運動軌跡,為運動圖形而生的工具庫。demo
- React FLIP Move - 一個翻轉移動的庫,旨在解決當列表的順序發生變化時,專案列表動畫化的問題。demo
- tween.js - 是一個JS 平滑動畫庫。demo
- vivus - JavaScript庫,使SVG繪製動畫。demo
- Choreographer-js - 是一個用於處理複雜動畫的簡單庫。demo
- minirefresh - 優雅的H5下拉重新整理。零依賴。demo
時間
- moment - 是一個日期處理類庫,用於解析、檢驗、操作、以及顯示日期。demo
- timesheet.js - 是一個時間展示片段外掛。demo
- date.js - 是一個格式化時間、過去時間展示、解決因時區變更外掛。
- timeago.js - 格式化時間顯示多久以前的外掛。 demo
- rome - 可定製的日期(和時間)選擇器。無依賴,可選 UI。 demo
- moment-timezone - 基於 moment.js 的時區庫。demo
- date - 擁有人性化的 Date() 方法。demo
- ms.js - 小巧的毫秒轉換工具。
其它
- hotkeys - 是一個強健的 Javascript 庫用於捕獲鍵盤輸入和輸入的組合鍵。demo
- clipboard.js - 現代複製到剪貼簿。沒有Flash,gzip壓縮只有3KB 。demo
- translater.js - 這是一個利用HTML註釋的頁面翻譯解決方案。demo
- Push.js - 是一個跨瀏覽器的Javascript桌面通知外掛。demo
- onlinenetwork - js判斷是否斷網了。
- iNotify - 是一個實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、等系統通知。demo
- tesseract.js - 是一個文字識別轉換,可以執行在瀏覽器和伺服器NodeJS上。demo
- Leaflet.js - 是一個開源的移動友好互動式地圖 JavaScript 庫。體積僅有 33 KB。demo
- CurrencyFormatter.js - 是一款簡單純JS格式化155種不同國家貨幣格式庫,gzip壓縮後僅7KB。demo
- Feature.js - 是一個快速、簡單、輕量級的瀏覽器功能檢測庫。它沒有任何的依賴,並且 gzip 壓縮後僅有1kb。demo
- screenfull.js - 極小、跨平臺的 JavaScript 全屏外掛。demo
載入器
構建工具
- webpack - 前端構建工具
- Gulp - 自動化構建工具
- Babel - 下一代JavasScript語法編譯器
- PostCSS - 利用JS外掛轉換CSS樣式的工具
- Grunt - JavaScript世界的構建工具
- rollup.js - JS模組打包器
- webpack-dashboard - webpack開發伺服器的CLI儀表板
- traceur-compiler - 支援ES6的JS編譯器
- brunch - 超快的HTML5構建工具
- Helium-css - 顯示網站中未使用的CSS
測試
- mocha - JavaScript 測試框架
- ESLint - JavaScript程式碼檢查工具
- JSHint - JavaScript語法和風格檢查工具
- casperjs - 開源的導航指令碼處理和測試工具
- Nightwatch - 使用者介面自動化測試框架
- istanbul - JS程式碼覆蓋工具
- intern - JavaScript測試系統
- benchmark.js - 強大的JavaScript基準庫
- loadtest - HTTP或WebSockets URL的負載測試
- JSCover - JavaScript程式碼覆蓋測量工具
包管理器
CDN
- https://cdnjs.com
- http://cdnjs.net
- http://www.jsdelivr.com
- http://unpkg.com
- http://rawgit.com
- http://staticfile.org
- http://www.bootcdn.cn
- http://cdn.baomitu.com
- http://lib.sinaapp.com
- http://cdn.code.baidu.com
- http://jscdn.upai.com
- https://www.asp.net/ajax/cdn
- http://libs.sun0769.com
- https://css.net
- https://developers.google.com/speed/libraries/