Zepto.js: 필수 요소 찾기

최신 JavaScript 라이브러리는 상당히 거대합니다. jQuery를 살펴보세요. 모바일 앱을 만들거나 최신 브라우저를 대상으로 하는 경우에도 더 깨끗하고 유연한 라이브러리가 더 맛있는 제안이 됩니다.

오늘은 그런 라이브러리 중 하나인 Zepto를 소개하겠습니다.

---

데스크톱 라이브러리와 모바일 장치를 혼합할 때 발생하는 문제

대부분의 사람들은 모바일 장치의 증가를 간과해 왔습니다.

보시다시피 인터넷과 이를 지원하는 기술은 지난 몇 년 동안 비약적으로 성장했습니다. 우리는 정적 웹사이트에서 웹 애플리케이션, 동적 웹 애플리케이션으로, 그리고 오늘날의 실시간 초반응형 Thingamabob 애플리케이션으로 전환했습니다. 대부분의 사람들이 눈치 채지 못한 것 중 하나는 모바일 장치의 증가입니다.

생각해 보세요. 우리 중 많은 사람들이 스마트폰을 사용하여 정기적으로 검색하는 데 사용합니다. 집에서도 내 주변의 상당 부분이 일상적인 서핑과 이메일 전송을 위해 태블릿 장치를 채택했습니다. 이러한 장치의 유입은 노출 관점에서 보면 좋은 일이지만 몇 가지 주의 사항이 있습니다.

개발자로서 우리는 이러한 장치를 소비자처럼 디스플레이가 제한된 것으로 생각해서는 안 되며 오히려 리소스 및 대역폭 관점에서 생각해야 합니다. 모든 장치에 Super Quad Gigabit CPU가 있거나 대용량 메모리가 함께 제공되는 것은 아닙니다. 우리는 대역폭으로 시작하지도 않습니다. 브라우징 인구의 상당 부분은 여전히 ​​모바일 인터넷 연결에 대한 이러한 지옥 같은 변명에 갇혀 있습니다.

제 말의 뜻을 이미 이해하신 것 같아요. jQuery나 Prototype과 같은 대규모 모놀리식 라이브러리는 확실히 그 자리를 차지하지만 모바일 시대에는 좀 더 유연한 것을 위한 자리가 있다고 생각합니다. 많은 개발자들이 내 의견에 동의하는 것 같습니다.

---

라이브러리를 브라우저 간 작동시키는 모든 코드가 추가됩니다

제가 언급하지 않은 또 다른 큰 문제는 현대 도서관이 브라우저 간 작업을 많이 한다는 것입니다. 실제로 jQuery의 초기 매력 중 하나는 프런트 엔드 개발자가 처리해야 하는 브라우저 간 문제를 추상화하는 방식이었습니다. 지금도 jQuery는 다양한 브라우저에서 문제가 발생하지 않도록 내부적으로 많은 작업을 수행합니다.

하지만 만약 당신이 단지 현대적인 장치에 맞는 개발자라면 이 모든 것이 정말 필요할까요? 가장 간단한 대답은 '아니요'입니다. 불필요한 코드를 제거하면 다음을 수행할 수 있습니다.

• 브라우저에서 구문 분석할 코드 줄이 적으므로 성능이 향상됩니다
• 파일 크기를 줄여 대역폭이 제한된 모바일 장치에 도움이 됩니다.

이 문제가 과장되었다고 생각하시나요? 다음은 jQuery 소스 코드에서 임의의 코드 덩어리입니다.

으아아아

또는 좀 더 난해한 것:

으아아아

사소해 보일 수도 있지만 이것이 종종 합산된다는 점을 기억하세요. 최신 브라우저(데스크톱이든 모바일이든)만 대상으로 삼으려는 경우 이러한 추가 확인 및 해킹을 모두 수행할 필요가 없습니다. 원하는 것보다 적은 수의 브라우저를 사용하면 대역폭과 성능 면에서 모두 윈윈할 수 있습니다!

---

Zepto와 무슨 관계인가요?

"충분히 축적됐어! 이미 빌어먹을 도서관에 대해 우리에게 말해줬어!"라고 말하는 걸 들었어요. 그럼 시작해 보겠습니다.

Zepto는 제목에서 알 수 있듯이 위의 두 가지 문제를 모두 해결하는 mobile 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 非常相似，我认为您可以放心地假设一切都是一流的。

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

이는 핸들러를 다른 이벤트에 바인딩한다는 점을 제외하면 일반적인 이벤트 처리 방법과 매우 유사합니다.

---

요약

이것은 내가 무엇을 위해, 누구를 위해 개발하는지를 고려하면 완벽하지만 언제나 그렇듯이 귀하의 마일리지는 다를 수 있습니다.

글쎄, 그게 바로 Zepto의 전부입니다. 기본적으로 이는 모바일 장치에서 사용할 수 있는 간단한 jQuery의 무료 버전입니다. 시간이 지나면서 더 이상 오래된 브라우저를 지원하지 않는 간소화된 라이브러리로 발전했습니다.

이것은 제가 개발하는 대상을 고려하면 완벽하지만 항상 그렇듯이 귀하의 마일리지는 다를 수 있습니다. Zepto에서 작동하려면 상당한 수정이 필요한 jQuery 플러그인을 사용하는 데 어려움을 겪을 수도 있고, jQuery에 대해 더 자신감을 가질 수도 있습니다.

어쨌든 취소하기 전에 Zepto를 사용해 보고 작업 흐름에 어떻게 적합한지 확인해야 합니다. 나는 그것을했고 그것을 좋아했습니다!

알겠습니다. 오늘은 여기까지입니다. 아래 댓글로 여러분의 생각을 알려주세요. 읽어주셔서 정말 감사합니다!

위 내용은 Zepto.js: 필수 요소 찾기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!