JavaScript >> Javascript 文檔 >  >> jQuery

5 個用於移動開發的輕量級 jQuery 替代方案

我們都喜歡 jQuery。該站點甚至致力於構建使用該庫的漂亮示例。但在某些情況下,jQuery 並不是明智的選擇。如果您僅將它用於簡單的 DOM 操作或一兩個 AJAX 請求,為什麼要減慢頁面加載時間並引入額外的依賴項?

這個問題在移動設備上更為嚴重。你看,雖然我們通過像谷歌這樣的 CDN 包含 jQuery,但它仍然不是免費的——下載和解析它仍然需要時間。讓 jQuery 流行的原因——完美的跨瀏覽器支持,也使得它在移動設備上使用起來過於笨重。畢竟,如果您的移動網站只能在 iOS 和 Android 上查看,為什麼還要支持舊 IE 版本?

變得精益

還有其他問題需要解決。例如,jQuery 的動畫方法是在小間隔內修改元素的 css 樣式屬性。這在桌面上運行良好,但在移動設備上表現不佳。另一方面,純 CSS 動畫(使用過渡和@keyframes)是硬件加速和平滑的。

這意味著必須採用全新的方法來構建移動網站。幸運的是,有五個庫可以幫助我們。

Zepto.js

這是專為 iOS 和 Android(均使用 webkit 引擎)設計的功能最豐富的庫。它在 8kb(而不是 jQuery 的 32 個)中保留了幾乎所有 jQuery 的功能,並增加了對觸摸事件(包括捏到縮放)和純 CSS 動畫的支持。它採用模塊化方法 - 您只需添加更精簡的庫所需的組件。

網站 | Github

Snack.js

Snack 是一個小而簡單的 JavaScript 庫。雖然非常適合小型項目,但它足以構建複雜的跨瀏覽器 Web 應用程序。它採用了與 Zepto 不同的方法,因為它脫離了 jQuery API,但 3kb 是大小的一半。你必須自己處理這個動畫。

網站 | Github

$dom

$dom 甚至更小——只有 2kb 的大小。它保持跨瀏覽器兼容性,甚至處理動畫(儘管採用 jQuery 的超時方法),但省略了數組操作函數和 AJAX 等功能。這個庫的完美用例是構建響應式網站,可以在智能手機、平板電腦和台式機上查看。

Github

xui.js

4kb XUI 是一個用於編寫 HTML5 移動 Web 應用程序的小型框架。它適用於移動領域的所有設備,甚至還具有針對 webkit 的特殊構建,即移動和黑莓瀏覽器。它支持觸摸事件,甚至還有一個 jQuery 兼容插件。

網站 | Github

140 混合泳

你不能比 140medley 更微觀。這個 0.5kb 的功能集合的靈感來自 140bytes 競賽,參與者創建了推文大小的 JavaScript 片段。它支持模板、事件甚至 AJAX。這只是專業領域,因為提供的唯一文檔是通過神秘源代碼中的註釋。

Github

結論

這些只是一些令人興奮的新框架。但是僅僅有一個很棒的名字或網站是不夠的——社區是一個開源項目的成敗。因此,如果您發現一些值得您花時間的有趣事物,請務必宣傳它。


Tutorial JavaScript 教程
  1. 如何在流中使用 ES8 異步/等待?

  2. indexOf() 當數組元素是對象時(javascript)

  3. 使用 React 和 JavaScript 構建您自己的 Google Like Autocomplete

  4. 砲兵——快速檢查您的網站性能

  5. 通過實習生獲取瀏覽器信息

  6. 怪物 1.29 發布

  7. React Native Flatlist 真實世界用例教程

  1. Web 3.0 術語及其簡單英語的定義

  2. 使用 Axios 獲取請求查詢參數

  3. 解決方案:窺視迭代器

  4. 不是另一個待辦事項應用程序:第 2 部分

  5. 在 Grafana 儀表板中可視化您 2019 年的身體活動

  6. 如何通過在帶有提示的專業 IDE 中完成編碼任務來學習 JavaScript?

  7. Flappy Bird 代碼不起作用 – JavaScript

  1. 宣布 NSolid 版本 3.8.0

  2. NodeJS API 設置外殼 - 開源

  3. 拖網

  4. 你好wasm-pack!