Zepto.js: Mendedahkan elemen penting

Perpustakaan JavaScript moden adalah sangat besar – lihat saja jQuery. Apabila anda membuat apl mudah alih, atau malah hanya menyasarkan penyemak imbas moden, perpustakaan yang lebih bersih dan fleksibel menjadi cadangan yang lebih sedap.

Hari ini, kami akan memperkenalkan satu perpustakaan sedemikian yang dipanggil Zepto.

---

Masalah mencampurkan perpustakaan desktop dan peranti mudah alih

Peningkatan peranti mudah alih telah diabaikan oleh kebanyakan orang.

Anda lihat, Internet dan teknologi yang menyokongnya telah berkembang dengan pesat dalam beberapa tahun kebelakangan ini. Kami beralih daripada tapak web statik kepada aplikasi web kepada aplikasi web dinamik dan kemudian kepada aplikasi Thingamabob masa nyata masa nyata yang sangat responsif. Satu perkara yang kebanyakan orang tidak perasan ialah peningkatan peranti mudah alih.

Fikirkanlah: ramai di antara kita menggunakan telefon pintar dan menggunakannya untuk menyemak imbas secara tetap. Walaupun di rumah, sebahagian besar kalangan saya telah menggunakan peranti tablet untuk melayari kasual dan menghantar e-mel. Walaupun kemasukan peranti ini adalah perkara yang baik dari perspektif pendedahan, terdapat beberapa kaveat.

Sebagai pembangun, kita tidak seharusnya menganggap peranti ini terhad paparan seperti pengguna, sebaliknya perlu memikirkannya daripada perspektif sumber dan lebar jalur. Tidak semua peranti mempunyai Quad Gigabit Super CPU atau datang dengan jumlah memori yang besar. Kami tidak bermula dengan lebar jalur. Sebilangan besar populasi penyemak imbas masih terperangkap dengan alasan jahat ini untuk sambungan internet mudah alih.

Saya rasa anda sudah faham apa yang saya maksudkan. Perpustakaan monolitik yang besar seperti jQuery atau Prototaip pastinya mempunyai tempatnya, tetapi untuk zaman mudah alih ini, saya rasa ada tempat untuk sesuatu yang lebih fleksibel. Ramai pembangun nampaknya bersetuju dengan saya.

---

Semua kod yang menjadikan perpustakaan berfungsi merentas pelayar ditambah

Masalah besar lain yang saya tidak nyatakan ialah perpustakaan kontemporari melakukan banyak perkara merentas pelayar. Malah, salah satu daya tarikan awal jQuery ialah bagaimana ia menghilangkan banyak keanehan pelayar yang perlu ditangani oleh pembangun bahagian hadapan. Malah sekarang, jQuery melakukan banyak beban berat di bawah hud untuk memastikan tiada isu timbul merentas pelayar yang berbeza.

Tetapi jika anda seorang pembangun yang hanya mahu memenuhi keperluan peranti kontemporari, maka berani saya katakan, adakah anda benar-benar memerlukan semua ini? Jawapan paling mudah ialah tidak. Dengan mengalih keluar kod yang tidak diperlukan anda boleh:

• Prestasi dipertingkatkan kerana penyemak imbas mempunyai lebih sedikit baris kod untuk dihuraikan
• Kurangkan saiz fail, yang membantu pada peranti mudah alih dengan lebar jalur terhad.

Adakah anda rasa isu ini dibesar-besarkan? Berikut ialah sebahagian rawak kod daripada kod sumber 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;
		}
....

Atau sesuatu yang lebih esoterik:

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

Ini mungkin kelihatan agak remeh, tetapi ingat, ini sering menambah. Jika anda hanya mahu menyasarkan penyemak imbas moden (sama ada desktop atau mudah alih), maka anda tidak perlu melakukan semua pemeriksaan dan penggodaman tambahan ini. Dengan mempunyai lebih sedikit penyemak imbas daripada yang anda mahukan, anda mendapat kemenangan-menang dalam lebar jalur dan prestasi!

---

Apa urusan dengan Zepto?

Saya mendengar anda berkata "pengumpulan yang cukup! Sudah memberitahu kami tentang perpustakaan sialan!". Jadi mari kita mulakan.

Zepto, seperti tajuknya, ialah rangka kerja JavaScript mudah alih yang membetulkan kedua-dua masalah di atas. Pangkalan kodnya sangat kecil, dengan berat sekitar 8kb.

Ia sangat bersih dengan kebanyakannya mengalih keluar kandungan merentas pelayar. Apabila ia dicipta, tumpuan utama adalah untuk menyokong Webkit sahaja. Versi mudah alih Webkit lebih tepat. Kini, ia telah diperluaskan untuk berfungsi dengan penyemak imbas desktop - tetapi hanya pada penyemak imbas moden. Dalam IE6 ini, tidak perlu lagi meraba-raba untuk menyelesaikan sesuatu!

API Zepto serasi dengan jQuery. Jika anda menggunakan jQuery, anda sudah tahu cara menggunakan Zepto.

Satu lagi kawasan di mana Zepto berjaya dikecilkan ialah cara ia mengelakkan ciri-ciri kembung. Pustaka teras nampaknya tidak mengandungi sebarang fungsi luar. Malah kefungsian AJAX dan animasi tersedia sebagai modul berasingan jika diperlukan. Ini adalah anugerah mutlak untuk pengguna yang menggunakan perpustakaan terutamanya untuk melintasi dan manipulasi DOM.

Oh, adakah saya menyebut bahagian parti utama Zepto? API Zepto serasi dengan jQuery. Jika anda menggunakan jQuery, anda sudah tahu cara menggunakan Zepto.

---

Adakah Zepto dan jQuery boleh ditukar ganti?

Ya dan tidak. Bergantung adalah jawapan yang lebih sesuai.

Ya, kerana API teras Zepto meniru jQuery sebahagian besarnya. Untuk menjadikannya mudah digunakan dan memendekkan keluk pembelajaran dengan ketara, Zepto meniru API jQuery. Kaedah yang paling biasa digunakan (seperti operasi DOM) mempunyai nama yang hampir sama dan mempunyai parameter yang sama dalam susunan yang sama. Bagi seorang jurutera, tandatangan kaedah adalah sama.

Mari kita lihat contoh kecil:

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

Ini sepatutnya sangat serupa dengan cara biasa anda mengendalikan acara, kecuali anda mengikat pengendali pada acara yang berbeza dan itu sahaja.

---

Ringkasan

Ini sesuai untuk saya memandangkan untuk apa dan untuk siapa saya bangunkan; tetapi seperti biasa, perbatuan anda mungkin berbeza-beza.

Nah, itulah maksud Zepto. Pada asasnya, ia adalah versi percuma jQuery yang boleh digunakan pada peranti mudah alih. Dari masa ke masa, ia telah berkembang menjadi perpustakaan yang diperkemas yang tidak lagi menyokong pelayar lapuk.

Ini sesuai untuk saya memandangkan untuk dan untuk apa yang saya bangunkan; tetapi seperti biasa, perbatuan anda mungkin berbeza-beza. Anda mungkin terjebak menggunakan pemalam jQuery yang memerlukan pengubahsuaian yang ketara untuk menjadikannya berfungsi di bawah Zepto, atau hanya berasa lebih yakin dengan jQuery.

Walau bagaimanapun, anda benar-benar perlu mencuba Zepto dan melihat cara ia sesuai dengan aliran kerja anda sebelum anda membatalkannya. Saya melakukannya dan saya menyukainya!

Baiklah, itu sahaja yang saya ada untuk hari ini. Beritahu saya pendapat anda dalam ulasan di bawah dan terima kasih banyak kerana membaca!

Atas ialah kandungan terperinci Zepto.js: Mendedahkan elemen penting. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!