Zepto.js: Die wesentlichen Elemente aufdecken

Moderne JavaScript-Bibliotheken sind ein ziemlicher Riese – schauen Sie sich nur jQuery an. Wenn Sie mobile Apps erstellen oder einfach nur auf moderne Browser abzielen, sind sauberere, flexiblere Bibliotheken eine attraktivere Lösung.

Heute stellen wir eine solche Bibliothek namens Zepto vor.

---

Probleme beim Mischen von Desktop-Bibliotheken und Mobilgeräten

Der Aufstieg mobiler Geräte wurde von den meisten Menschen übersehen.

Sie sehen, das Internet und die Technologie, die es unterstützt, sind in den letzten Jahren sprunghaft gewachsen. Wir sind von statischen Websites über Webanwendungen zu dynamischen Webanwendungen und dann zu den heutigen Echtzeit-, hyperresponsiven Thingamabob-Anwendungen übergegangen. Was die meisten Menschen nicht bemerkt haben, ist der Aufstieg mobiler Geräte.

Denken Sie darüber nach: Viele von uns nutzen Smartphones und nutzen diese regelmäßig zum Surfen. Selbst zu Hause nutzt ein großer Teil meiner Bekannten Tablet-Geräte zum gelegentlichen Surfen und E-Mail-Versand. Obwohl dieser Zustrom an Geräten aus Sicht der Belichtung eine gute Sache ist, gibt es einige Vorbehalte.

Als Entwickler sollten wir uns diese Geräte nicht wie Verbraucher als anzeigebegrenzt vorstellen, sondern müssen sie vielmehr aus einer Ressourcen- und Bandbreitenperspektive betrachten. Nicht alle Geräte verfügen über Quad-Gigabit-Super-CPUs oder sind mit viel Speicher ausgestattet. Wir fangen noch nicht einmal mit der Bandbreite an. Ein großer Teil der Internetnutzer hängt immer noch an diesen höllischen Ausreden für die mobile Internetverbindung fest.

Ich denke, du verstehst bereits, was ich meine. Große monolithische Bibliotheken wie jQuery oder Prototype haben definitiv ihre Berechtigung, aber im mobilen Zeitalter gibt es meiner Meinung nach auch einen Platz für etwas Flexibleres. Viele Entwickler scheinen mir zuzustimmen.

---

Der gesamte Code, der dafür sorgt, dass die Bibliothek browserübergreifend funktioniert, summiert sich

Das andere große Problem, das ich nicht erwähnt habe, ist, dass moderne Bibliotheken viele Dinge browserübergreifend erledigen. Tatsächlich bestand einer der ersten Reize von jQuery darin, dass es viele der browserübergreifenden Macken abstrahierte, mit denen Front-End-Entwickler zu kämpfen hatten. Schon jetzt leistet jQuery eine Menge Arbeit unter der Haube, um sicherzustellen, dass bei verschiedenen Browsern keine Probleme auftreten.

Aber wenn Sie ein Entwickler sind, der nur auf moderne Geräte eingehen möchte, dann wage ich zu sagen: Brauchen Sie das alles wirklich? Die einfachste Antwort ist nein. Durch das Entfernen unnötigen Codes können Sie:

• Die Leistung wird verbessert, da der Browser weniger Codezeilen analysieren muss
• Reduzieren Sie die Dateigröße, was auf Mobilgeräten mit begrenzter Bandbreite hilfreich ist.

Halten Sie dieses Problem für übertrieben? Hier ist ein zufälliger Codeabschnitt aus dem jQuery-Quellcode:

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

Oder etwas Esoterischeres:

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

Das mag ziemlich trivial erscheinen, aber denken Sie daran, dass sich das oft summiert. Wenn Sie nur auf moderne Browser (ob Desktop oder Mobilgerät) abzielen möchten, müssen Sie nicht all diese zusätzlichen Überprüfungen und Hacks durchführen. Wenn Sie weniger Browser haben, als Sie möchten, profitieren Sie von Bandbreite und Leistung!

---

Was ist mit Zepto los?

Ich höre dich sagen: „Genug angehäuft! Hab uns schon von der verdammten Bibliothek erzählt!“. Also fangen wir an.

Zepto ist, wie der Titel schon sagt, ein mobiles JavaScript-Framework, das beide oben genannten Probleme behebt. Die Codebasis ist sehr klein und wiegt etwa 8 KB.

Es ist so sauber, da größtenteils browserübergreifende Inhalte entfernt werden. Bei der Erstellung lag das Hauptaugenmerk darauf, nur Webkit zu unterstützen. Genauer gesagt die mobile Version von Webkit. Jetzt wurde es erweitert, um mit Desktop-Browsern zu funktionieren – allerdings nur auf modernen Browsern. In diesem IE6 müssen Sie nicht mehr herumfummeln, um alles zum Laufen zu bringen!

Zeptos API ist mit jQuery kompatibel. Wenn Sie jQuery verwenden, wissen Sie bereits, wie man Zepto verwendet.

Ein weiterer Bereich, in dem Zepto miniaturisiert werden kann, ist die Vermeidung von Funktionsüberflutungen. Die Kernbibliothek scheint keine überflüssigen Funktionen zu enthalten. Sogar AJAX- und Animationsfunktionen sind bei Bedarf als separate Module verfügbar. Dies ist ein absoluter Glücksfall für Benutzer, die die Bibliothek hauptsächlich für die DOM-Traversierung und -Manipulation verwenden.

Oh, habe ich Zeptos Hauptpartystück erwähnt? Die API von Zepto ist mit jQuery kompatibel. Wenn Sie jQuery verwenden, wissen Sie bereits, wie man Zepto verwendet.

---

Sind Zepto und jQuery austauschbar?

Ja und nein. Hängt davon ab, ob die Antwort angemessener ist.

Ja, weil die Kern-API von Zepto jQuery weitgehend nachahmt. Um die Verwendung zu vereinfachen und die Lernkurve erheblich zu verkürzen, emuliert Zepto die API von jQuery. Die am häufigsten verwendeten Methoden (z. B. DOM-Operationen) haben nahezu identische Namen und dieselben Parameter in derselben Reihenfolge. Für einen Ingenieur ist die Methodensignatur dieselbe.

Schauen wir uns ein kleines Beispiel an:

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

Dies sollte dem normalen Umgang mit Ereignissen sehr ähnlich sein, außer dass Sie den Handler an ein anderes Ereignis binden und das war’s.

---

Zusammenfassung

Das ist perfekt für mich, wenn man bedenkt, wofür und für wen ich entwickle, aber wie immer kann Ihr Kilometerstand variieren.

Nun, genau darum geht es bei Zepto. Im Wesentlichen handelt es sich um eine abgespeckte, kostenlose Version von jQuery, die auf mobilen Geräten verwendet werden kann. Im Laufe der Zeit hat es sich zu einer optimierten Bibliothek entwickelt, die veraltete Browser nicht mehr unterstützt.

Das ist perfekt für mich, wenn man bedenkt, wofür ich entwickle, aber wie immer kann Ihr Kilometerstand variieren. Möglicherweise stecken Sie bei der Verwendung von jQuery-Plugins fest, die erhebliche Änderungen erfordern, damit sie unter Zepto funktionieren, oder Sie fühlen sich mit jQuery einfach sicherer.

In jedem Fall müssen Sie Zepto unbedingt ausprobieren und sehen, wie es in Ihren Arbeitsablauf passt, bevor Sie kündigen. Ich habe es gemacht und es hat mir sehr gut gefallen!

Okay, das ist alles, was ich für heute habe. Teilen Sie mir Ihre Meinung in den Kommentaren unten mit und vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonZepto.js: Die wesentlichen Elemente aufdecken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!