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 非常相似，我认为您可以放心地假设一切都是一流的。

Eva Design System

基于深度学习的色彩生成器

查看详情

让我们看一下一些常见的 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 中删除。

这应该与您通常处理事件的方式非常相似，除了您将处理程序绑定到不同的事件，仅此而已。