Zepto.js : découvrir les éléments essentiels

Les bibliothèques JavaScript modernes sont un véritable monstre – il suffit de regarder jQuery. Lorsque vous créez des applications mobiles, ou même ciblez simplement des navigateurs modernes, des bibliothèques plus propres et plus flexibles deviennent une proposition plus savoureuse.

Aujourd'hui, nous présenterons une de ces bibliothèques appelée Zepto.

---

Problèmes liés au mélange des bibliothèques de bureau et des appareils mobiles

L'essor des appareils mobiles a été négligé par la plupart des gens.

Vous voyez, Internet et la technologie qui le supporte se sont développés à pas de géant au cours des dernières années. Nous sommes passés des sites Web statiques aux applications Web, puis aux applications Web dynamiques, puis aux applications Thingamabob en temps réel et hyper-réactives d'aujourd'hui. Une chose que la plupart des gens n’ont pas remarquée est l’essor des appareils mobiles.

Pensez-y : nous sommes nombreux à utiliser des smartphones et à les utiliser régulièrement pour naviguer. Même à la maison, une partie importante de mon entourage a adopté des tablettes pour surfer et envoyer des e-mails de manière occasionnelle. Bien que cet afflux d’appareils soit une bonne chose du point de vue de l’exposition, il existe quelques mises en garde.

En tant que développeurs, nous ne devrions pas considérer ces appareils comme étant limités en affichage comme le font les consommateurs, mais plutôt les considérer du point de vue des ressources et de la bande passante. Tous les appareils ne disposent pas de processeurs Quad Gigabit Super ou ne sont pas dotés de grandes quantités de mémoire. Nous ne commençons même pas par la bande passante. Une grande partie de la population des internautes est toujours bloquée sur ces excuses infernales pour la connectivité Internet mobile.

Je pense que vous comprenez déjà ce que je veux dire. Les grandes bibliothèques monolithiques comme jQuery ou Prototype ont définitivement leur place, mais à l'ère du mobile, je pense qu'il y a de la place pour quelque chose de plus flexible. De nombreux développeurs semblent être d'accord avec moi.

---

Tout le code qui fait fonctionner la bibliothèque sur plusieurs navigateurs s'additionne

L'autre gros problème que je n'ai pas mentionné est que les bibliothèques contemporaines font beaucoup de choses entre navigateurs. En fait, l’un des premiers attraits de jQuery était la façon dont il éliminait de nombreuses bizarreries entre navigateurs auxquelles les développeurs frontaux devaient faire face. Même maintenant, jQuery fait beaucoup de travail sous le capot pour garantir qu’aucun problème ne survienne dans les différents navigateurs.

Mais si vous êtes un développeur qui souhaite simplement s'adapter aux appareils contemporains, alors oserais-je dire, avez-vous vraiment besoin de tout cela ? La réponse la plus simple est non. En supprimant le code inutile, vous pouvez :

• Les performances sont améliorées puisque le navigateur a moins de lignes de code à analyser
• Réduisez la taille du fichier, ce qui est utile sur les appareils mobiles avec une bande passante limitée.

Pensez-vous que ce problème est exagéré ? Voici un morceau de code aléatoire du code source de 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;
		}
....

Ou quelque chose de plus ésotérique :

// 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
}
....

Cela peut sembler plutôt trivial, mais n'oubliez pas que cela s'additionne souvent. Si vous souhaitez uniquement cibler les navigateurs modernes (qu’ils soient de bureau ou mobiles), il n’est pas nécessaire d’effectuer toutes ces vérifications et hacks supplémentaires. En ayant moins de navigateurs que vous ne le souhaitez, vous obtenez un gain sur deux en termes de bande passante et de performances !

---

Quel est le problème avec Zepto ?

Je t'entends dire "assez d'accumulation ! On nous a déjà parlé de cette foutue bibliothèque !". Alors commençons.

Zepto, comme son titre l'indique, est un framework JavaScript mobile qui corrige les deux problèmes ci-dessus. Sa base de code est très petite, pesant environ 8 Ko.

C'est tellement propre en supprimant principalement le contenu multi-navigateurs. Lors de sa création, l'objectif principal était de prendre en charge uniquement Webkit. La version mobile de Webkit pour être précis. Désormais, il a été étendu pour fonctionner avec les navigateurs de bureau, mais uniquement sur les navigateurs modernes. Dans cet IE6, plus besoin de chercher à faire fonctionner les choses !

L'API de Zepto est compatible avec jQuery. Si vous utilisez jQuery, vous savez déjà utiliser Zepto.

Un autre domaine dans lequel Zepto parvient à être miniaturisé est la manière dont il évite l'encombrement des fonctionnalités. La bibliothèque principale ne semble contenir aucune fonctionnalité superflue. Même les fonctionnalités AJAX et d'animation sont disponibles sous forme de modules séparés si nécessaire. C'est une aubaine absolue pour les utilisateurs qui utilisent principalement la bibliothèque pour la traversée et la manipulation du DOM.

Oh, ai-je mentionné la pièce principale de Zepto ? L'API de Zepto est compatible avec jQuery. Si vous utilisez jQuery, vous savez déjà utiliser Zepto.

---

Zepto et jQuery sont-ils interchangeables ?

Oui et non. Cela dépend est une réponse plus appropriée.

Oui, car l'API principale de Zepto imite dans une large mesure jQuery. Pour faciliter son utilisation et réduire considérablement la courbe d'apprentissage, Zepto émule l'API de jQuery. Les méthodes les plus couramment utilisées (telles que les opérations DOM) ont des noms presque identiques et possèdent les mêmes paramètres dans le même ordre. Pour un ingénieur, la signature de la méthode est la même.

Regardons un petit exemple :

$('#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 中删除。

Cela devrait être très similaire à la façon dont vous gérez normalement les événements, sauf que vous liez le gestionnaire à un événement différent et c'est tout.

---

Résumé

C'est parfait pour moi compte tenu de ce pour quoi et pour qui je développe, mais comme toujours, votre kilométrage peut varier ;

Eh bien, c’est à peu près ce qu’est Zepto. Il s’agit essentiellement d’une version allégée et gratuite de jQuery qui peut être utilisée sur les appareils mobiles. Au fil du temps, elle a évolué vers une bibliothèque simplifiée qui ne prend plus en charge les navigateurs obsolètes.

C'est parfait pour moi compte tenu de ce pour quoi je développe et pour quoi, mais comme toujours, votre kilométrage peut varier. Vous pourriez être bloqué en utilisant des plugins jQuery qui nécessitent des modifications importantes pour les faire fonctionner sous Zepto, ou simplement vous sentir plus en confiance avec jQuery.

Quoi qu'il en soit, vous devez vraiment essayer Zepto et voir comment il s'intègre dans votre flux de travail avant d'annuler. Je l'ai fait et j'ai adoré !

D'accord, c'est tout ce que j'ai pour aujourd'hui. Faites-moi part de vos réflexions dans les commentaires ci-dessous et merci beaucoup d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!