Zepto.js：揭開不可或缺的元素-js教程-PHP中文網

Zepto.js：揭開不可或缺的元素

現代 JavaScript 函式庫是相當龐然大物－看看 jQuery 就知道了。當您創建行動應用程式時，甚至只是針對現代瀏覽器時，更簡潔、更靈活的庫就會成為更美味的建議。

今天，我們將介紹一個這樣的函式庫，名為 Zepto。

#混合桌面庫和行動裝置的問題

行動裝置的興起已經讓大多數人忽略了。

你看，網路以及支援網路的技術在過去幾年中取得了突飛猛進的發展。我們從靜態網站轉移到 Web 應用程序，再到動態 Web 應用程序，然後再到當今的即時、超響應性 Thingamabob 應用程式。大多數人都沒有註意到的一件事是行動裝置的興奮。

想想：我們很多人都使用智慧型手機並經常用它來瀏覽。即使在家裡，我圈子中的一個重要部分也採用了平板電腦設備來休閒上網和發送電子郵件。雖然從曝光的角度來看，這種設備的湧入是件好事，但也有一些警告。

作為開發人員，我們不應像消費者一樣將這些設備視為顯示受限，而是需要從資源和頻寬的角度來考慮它們。並非所有裝置都配備超四兆千兆 CPU 或配備大量記憶體。我們甚至不會從頻寬開始。有很大一部分瀏覽人群仍然停留在這些行動網路連線的地獄藉口上。

我想你已經明白我的意思了。像 jQuery 或 Prototype 這樣的大型整體庫肯定有其一席之地，但對於這個行動時代，我認為有一個更靈活的東西的位置。許多開發者似乎都同意我的觀點。

使庫跨瀏覽器工作的所有程式碼加起來

我沒有提到的另一個大問題是當代圖書館做了很多跨瀏覽器的事情。事實上，jQuery 的一大吸引力最初在於它如何抽像出前端開發人員必須解決的許多跨瀏覽器怪異問題。即使現在，jQuery 在底層做了很多繁重的工作，以確保在不同的瀏覽器中不會出現任何問題。

但是，如果您是只想迎合當代設備的開發人員，那麼我敢說，您真的需要這一切嗎？最簡潔的答案是不。透過刪除不必要的程式碼，您可以：

由於瀏覽器需要解析的程式碼行更少，因此可以提高效能
縮小檔案大小，這有助於頻寬受限的行動裝置。

您認為這個問題被誇大了嗎？這是來自 jQuery 原始碼的隨機程式碼區塊：

isPlainObject: function( obj ) {
		// Must be an Object.
		// Because of IE, we also have to check the presence of the constructor property.
		// Make sure that DOM nodes and window objects don't pass through, as well
		if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
			return false;
		}
....

登入後複製

或一些更深奧的東西：

// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
try {
	Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;

// Provide a fallback method if it does not work
} catch( e ) {
	// The intended fallback
}
....

登入後複製

這可能看起來相當微不足道，但請記住，這往往會增加。如果您只想針對現代瀏覽器（無論是桌上型電腦還是行動裝置），那麼就沒有必要進行所有這些額外的檢查和駭客攻擊。透過減少您想要的瀏覽器，您可以在頻寬和效能上雙贏！

Zepto 的交易是什麼？

我聽到你們說「累積夠了！已經告訴我們關於該死的圖書館了！」。那麼就讓我們開始吧。

Zepto，如標題所示，它是一個移動 JavaScript 框架，可以修正上述兩個問題。它的程式碼庫非常小，重量約 8kb。

它透過大部分刪除跨瀏覽器的內容而變得如此簡潔。當它創建時，主要關注點是僅支援 Webkit。準確地說是Webkit 的行動版本。現在，它已經擴展到可以與桌面瀏覽器一起使用——但僅限於現代瀏覽器。在這個 IE6 中，不再需要笨手笨腳地讓事情正常運作！

Zepto 的 API 與 jQuery 相容。如果您使用 jQuery，您就已經知道如何使用 Zepto。

Zepto 設法做到小型化的另一個領域是它如何避免功能膨脹。核心庫似乎不包含任何無關的功能。如果需要的話，甚至 AJAX 和動畫功能也可以作為單獨的模組提供。對於主要使用庫進行 DOM 遍歷和操作的用戶來說，這絕對是天賜之物。

哦，我有沒有提到 Zepto 的主要派對作品？ Zepto 的 API 與 jQuery 相容。如果您使用 jQuery，您就已經知道如何使用 Zepto。

Zepto 和 jQuery 可以互換嗎？

是和否。取決於是一個更恰當的答案。

是的，因為Zepto的核心API在很大程度上模仿了jQuery。為了使其易於使用並顯著縮短學習曲線，Zepto 模擬了 jQuery 的 API。大多數常用方法（例如 DOM 操作）的名稱幾乎相同，並且具有相同順序的相同參數。對於工程師來說，方法簽名是相同的。

讓我們來看一個小例子：

$('#element').html("Hey! Are you on the GW2 beta?");

登入後複製

看起来很眼熟吗？它应该。这与您使用 jQuery 来更改元素的 HTML 的代码完全相同。正如我所提到的，这不仅限于此方法。大多数 DOM 操作都是以与您的实用程序相同的方式构建的，例如 AJAX。

另一方面，API 并非 100% 匹配。 Zepto 放弃了 jQuery 中存在的一些可能破坏代码的方法。同样重要的是，由于 Zepto 是 jQuery 的子集，因此您可能会错过内置的特定功能—— Deferred 就是一个很好的例子。您根本无法将 jQuery 替换为 Zepto 并期望一切正常。

对我来说，最大的障碍是从 jQuery 复制的方法，但具有不同的签名和功能集。当你认为自己使用了正确的方法但事实并非如此时，你会感到有点沮丧。克隆方法复制事件处理程序的能力就是一个很好的例子。如果不查看源代码，我真的不会发现这一点。

探索核心 API

如果您以前使用过 jQuery，那么下面的所有内容都应该是一场小憩。

闲聊已经够多了，现在让我们深入研究一些代码。与许多现代库一样，DOM 遍历和操作是每个人都希望完善的核心功能。由于 API 和整体功能与 jQuery 非常相似，我认为您可以放心地假设一切都是一流的。

让我们看一下一些常见的 DOM 相关功能。

修改容器的 HTML 内容

这是 DOM 操作的基础：读取或更改元素的 HTML 内容。使用 Zepto，就像在容器上调用 html 方法一样简单，并在需要时传入新的 HTML。

例如，这会获取元素的 HTML 并将其存储在变量中。

var containerText = $('#element').html();

登入後複製

或者如果您想将其更改为其他内容：

$('#element').html("Hola there!");

登入後複製

很简单，对吧？

将元素添加到容器中

与 jQuery 一样，Zepto 使用 append 和 prepend 方法。并且调用也保持不变。

$('#element').append("<p>This is the appended element.</p>");

// or

$('#element').prepend("<p>This is the appended element.</p>");

登入後複製

活动

事件是任何现代应用程序的支柱，Zepto 为您提供了一系列易于使用的方法来完成您的工作。大部分工作是通过 on 方法完成的。

$('#element').on('click', function(e){ 
   // Your code here
});

登入後複製

易于阅读且易于解析。如果您感觉老派并且想使用 bind、delegate 或 live 方法，请不要这样做。就像 jQuery 一样，它们在这里已被弃用。

AJAX

任何现代低级库都需要提供一个易于使用的 AJAX 包装器，而 Zepto 不会让您失望。这是一个超级简单的 AJAX 请求的示例。


$.ajax({
  type: 'POST',
  url: '/project',
  data: { name: 'Super Volcano Lair' },
  dataType: 'json',
  success: function(data){
    // Do some nice stuff here
  },
  error: function(xhr, type){
    alert('Y U NO WORK?')
  }
});

登入後複製

事情可能看起来有点复杂，但我们正在做的事情可以归结为：

创建 AJAX 对象并向其传递选项。
在选项中，指定我们想要执行 POST 请求。我想默认是 GET。
指定要发布到的 URL。
指定需要发送到服务器的数据。正如你所看到的，我正在疯狂地大笑，并试图创建我自己的超级恶棍巢穴。
指定请求成功或失败时将触发的方法。这样，无论发生什么情况，我们都可以更新 UI。

与 jQuery 一样，有单独的方法用于 GET 或 POST 请求，或者仅加载一些 Web 内容。

动画

如果没有一些动画，世界将会变成什么样子？ Zepto 公开了全能的 animate 方法，该方法应该可以处理大多数您的动画需求。

$('#element').animate({
  opacity: 0.50, top: '30px', color: '#656565'
}, 0.5)

登入後複製

我们基本上是选择要动画的元素，调用 animate 方法并指定要动画的属性以及完成动画所需的时间。 Zepto 会完成剩下的工作。

或者，如果您只需要显示和隐藏一个元素，则切换应该可以正常工作。

我想您明白了——Zepto 的 DOM、动画和事件 API 在很大程度上模拟了 jQuery。众所周知，jQuery 在这些方面非常擅长。如果您以前使用过 jQuery，那么您在这里应该不会遇到太多麻烦。

了解触摸事件和其他细节

Zepto 确实为您提供了一些可以在应用程序中利用的触摸特定事件。其中包括：

滑动——处理典型的滑动动作。不同方向也有单独的事件，例如 swipeLeft。
tap -- 响应通用点击操作而触发。
doubleTap——显然，这可以处理双击。
longTap -- 当元素被点击超过 750 毫秒时触发。不过，改变这种延迟似乎并不容易。

这是一个简单的示例，取自 Zepto 的文档。

<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
  $('.delete').hide()
  $('.delete', this).show()
})

// delete row on tapping delete button
$('.delete').tap(function(){
  $(this).parent('li').remove()
})
</script>

登入後複製

当列表项被扫描时，所有其他列表元素的删除按钮都会隐藏，只显示当前的删除按钮。点击删除按钮会删除该按钮的父 li 项目，从而从 DOM 中删除。

這應該與您通常處理事件的方式非常相似，除了您將處理程序綁定到不同的事件，僅此而已。