Zepto.js: 重要な要素を明らかにする-jsチュートリアル-php.cn

Zepto.js: 重要な要素を明らかにする

最新の JavaScript ライブラリは非常に巨大です。jQuery を見てください。モバイルアプリを作成する場合、または単に最新のブラウザーをターゲットにする場合でも、よりクリーンでより柔軟なライブラリがより魅力的な提案になります。

今日は、Zepto というライブラリの 1 つを紹介します。

デスクトップライブラリとモバイルデバイスの混在に関する問題

モバイルデバイスの台頭は、ほとんどの人に見落とされてきました。

ご覧のとおり、インターネットとそれをサポートするテクノロジーは、ここ数年で飛躍的に成長しました。私たちは静的な Web サイトから Web アプリケーション、動的な Web アプリケーション、そして今日のリアルタイムで非常に応答性の高い Thingamabob アプリケーションに移行しました。ほとんどの人が気づいていないことの 1 つは、モバイルデバイスの台頭です。

考えてみてください: 私たちの多くはスマートフォンを使用しており、定期的に閲覧するために使用しています。自宅でも、私のサークルのかなりの部分が、気軽なサーフィンや電子メールにタブレットデバイスを採用しています。このようなデバイスの流入は、露出の観点からは良いことですが、いくつかの注意点があります。

開発者として、私たちはこれらのデバイスを消費者のようにディスプレイに制限されたものとして考えるのではなく、リソースと帯域幅の観点から考える必要があります。すべてのデバイスにクアッドギガビットスーパー CPU が搭載されていたり、大量のメモリが搭載されているわけではありません。帯域幅から始めるわけでもありません。閲覧人口の大部分は、依然としてモバイルインターネット接続に関するこうした地獄のような言い訳に囚われています。

私が言いたいことはすでに理解されていると思います。 jQuery や Prototype のような大きなモノリシックライブラリには間違いなくその役割がありますが、このモバイル時代には、より柔軟なものの余地があると思います。多くの開発者が私に同意しているようです。

ライブラリをクロスブラウザで動作させるすべてのコードを合計します

私が言及しなかったもう 1 つの大きな問題は、現代のライブラリが多くのクロスブラウザー機能を実行していることです。実際、jQuery の最初の魅力の 1 つは、フロントエンド開発者が対処しなければならなかったクロスブラウザーの癖の多くを抽象化する方法でした。現在でも、jQuery はさまざまなブラウザ間で問題が発生しないように、内部で多くの重労働を行っています。

しかし、あなたが現代のデバイスに対応したいだけの開発者であれば、あえて言わせてください。本当にこれらすべてが必要ですか?最も単純な答えは「ノー」です。不要なコードを削除すると、次のことが可能になります。

ブラウザが解析する必要があるコード行が少なくなるため、パフォーマンスが向上する可能性があります
ファイルサイズを小さくします。帯域幅が限られているモバイルデバイスで役立ちます。

この問題は誇張されていると思いますか?これは、jQuery ソースコードからのコードのランダムな部分です:

リーリー

あるいはもっと難解なもの:

リーリー

これはかなり些細なことのように思えるかもしれませんが、多くの場合、これが積み重なることを覚えておいてください。最新のブラウザー (デスクトップまたはモバイル) のみをターゲットにしたい場合は、これらの追加のチェックやハッキングをすべて実行する必要はありません。ブラウザの数を必要よりも少なくすることで、帯域幅とパフォーマンスの点で双方にメリットが得られます。

Zeptoとの取引はどうなりましたか?

「蓄積は十分だ! 図書館のことはもう教えてもらった!」という声が聞こえてきます。それでは始めましょう。

Zepto は、タイトルが示すように、上記の問題の両方を修正する ~~mobile~~ JavaScript フレームワークです。コードベースは非常に小さく、約 8kb です。

クロスブラウザーのコンテンツをほとんど削除したため、非常にクリーンになりました。作成された時点では、Webkit のみをサポートすることが主な焦点でした。正確にはWebkitのモバイル版。現在、デスクトップブラウザで動作するように拡張されていますが、それは最新のブラウザでのみです。この IE6 では、動作させるために手探りする必要はもうありません。

Zepto の API は jQuery と互換性があります。 jQuery を使用している場合は、Zepto の使用方法をすでに知っています。

Zepto が小型化を実現しているもう 1 つの領域は、機能の肥大化を回避する方法にあります。コアライブラリには無関係な機能が含まれていないようです。 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 中删除。

これは、ハンドラーを別のイベントにバインドすることを除いて、通常のイベントの処理方法と非常に似ています。それだけです。