輕量高效的開源JavaScript插件和庫 【轉】

時間  2019-11-12
標籤 輕量 高效 開源 javascript 插件 欄目 JavaScript 简体版
原文   原文鏈接

 

圖片

佈局

  • SuperEmbed.js - 是一個Javascript庫，可檢測出網頁上的內嵌視頻並使他們可以變成響應式元素。demo
  • 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

加載器

  • requirejs - JS模塊化工具
  • SeaJS - JavaScript模塊加載框架
  • loadjs - JavaScript模塊加載框架
  • ESL - 瀏覽器端AMD標準加載器

構建工具

測試

  • mocha - JavaScript 測試框架
  • ESLint - JavaScript代碼檢查工具
  • JSHint - JavaScript語法和風格檢查工具
  • casperjs - 開源的導航腳本處理和測試工具
  • Nightwatch - 用戶界面自動化測試框架
  • istanbul - JS代碼覆蓋工具
  • intern - JavaScript測試系統
  • benchmark.js - 強大的JavaScript基準庫
  • loadtest - HTTP或WebSockets URL的負載測試
  • JSCover - JavaScript代碼覆蓋測量工具

包管理器

  • yarn - 新的 Hadoop 資源管理器
  • bower - web包管理器
  • npm - NodeJS包安裝的管理模塊
  • ndm - npm桌面管理器

CDN

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程