11-移动端开发教程-zepto.js入门教程

Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。

1. Why Zepto.js?

  1. API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js
  2. Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发。
  3. Zepto增加了针对移动端的触摸和手势相关的事件
  4. Zepto模块化做的很灵活,可以自定义组合模块

2. Zepto.js下载

代码下载:zeptojs中文站 、 github

2.1 自定义Zepto.js文件模块

zepto默认是有五个模块的,分别为zepto、event、ajax、form、ie,这五个模块被称为核心模块。

module

default

description

zepto

核心模块;包含许多方法

event

通过on()& off()处理事件

ajax

XMLHttpRequest 和 JSONP 实用功能

form

序列化 & 提交web表单

ie

增加支持桌面的Internet Explorer 10+和Windows Phone 8。

detect

提供 $.os和 $.browser消息

fx

The animate()方法

fx_methods

以动画形式的 show, hide, toggle, 和 fade*()方法.

assets

实验性支持从DOM中移除image元素后清理iOS的内存。

data

一个全面的 data()方法, 能够在内存中存储任意对象。

deferred

提供 $.Deferredpromises API. 依赖"callbacks" 模块. 当包含这个模块时候, $.ajax() 支持promise接口链式的回调。

callbacks

为"deferred"模块提供 $.Callbacks。

selector

实验性的支持 jQuery CSS 表达式 实用功能,比如 $('div:first')和el.is(':visible')。

touch

在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。

gesture

在触摸设备上触发 pinch 手势事件。

stack

提供 andSelf& end()链式调用方法

ios3

String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ,以兼容 iOS 3.x.

如果需要其他非核心模块,需要下载github的源码自行编译。

自定义编译步骤:

  1. 第一步:下载zeptojs源码:源码
  2. 第二步:解压源码,并打开命令行进入源码根目录
# 打开命令行工具,进入解压的zepto目录
$ cd zepto-master
# 安装npm包依赖
$ npm install
  1. 第三步:修改make编译文件的依赖模块
modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')
## 修改:增加 touch gesture fx fx_methods等模块 ## 
modules = (env['MODULES'] || 'zepto event ajax form ie touch gesture fx fx_methods').split(' ')
  1. 第四步:编译最终的zeptojs
$ npm run-script dist

3. zepto注意事项

  1. 注意某些模块必须打包进zeptojs文件才能用,比如:fx_methods模块的方法:hide() show()等动画方法。
  2. Zepto只设置全局变量$指向它本身。 没有Zepto.noConflict方法。
  3. 不支持jQuery CSS 扩展, 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器
  4. Zepto.js: 无法获取隐藏元素宽高;
  5. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
  6. 移动端端点透需要阻止默认行为来规避。

其实还有很多方法的缺失,所以大家自己在写代码的时候多留意下zepto和jQuery的区别吧,在此就不多赘述了。

4. zepto的应用demo

用法基本跟jQuery一致,直接上手就行,不用客气。

<ul>
    <li>list item 1</li>
    <li class="yaotaiyang">list item 2</li>
    <li>list item 3</li>
</ul>
<p>a paragraph</p>

<script type="text/javascript">
$(function() {
  $("p").on('click', function(e) {
    $("li").toggleClass("yaotaiyang");
  });
});
</script>

5. 总结

zepto.js确实非常小巧,而且非常讨巧的利用了大家熟悉jQuery的优势,确实非常可爱的一个js库,设计的模块中庸而又实用,在移动端的触屏事件封装的很不错,移动端web开发值得推荐。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

微信小程序填坑-Android真机环境下的bluebird.js

今天,有朋友反映说,我的微信小程序的例子在andriod真机环境下运行出错,研究调试了半天,发现原来是使用的bluebird.js(Promise实现库)导致的...

813
来自专栏冰霜之地

大话大前端时代(一) —— Vue 与 iOS 的组件化

今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity...

1853
来自专栏HT

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 Web...

2467
来自专栏有趣的django

python爬虫入门(五)Selenium模拟用户操作

爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider) 之间恢宏壮阔的斗争... 小莫想要某站上所有的电影,写了...

6493
来自专栏搞前端的李蚊子

微信小程序模板消息详解

先放代码 wxml: <form name='pushMsgFm' report-submit bindsubmit='orderSign'> <vi...

6459
来自专栏司想君

React编程思想

在我们团队看来,React是使用JavaScript构建大型、快速的Web apps的首选方式。它已经在Facebook和Instagram项目中,表现出了非常...

4149
来自专栏企鹅号快讯

5 款最酷的 Linux 终端模拟器

Xiki 首先我要推荐的第一个终端是 Xiki。 Xiki 是 Craig Muth 的智慧结晶,他是一个天才程序员,也是一个有趣的人(有趣在此处的意思是幽默,...

42910
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

5255
来自专栏极乐技术社区

五个套路看懂微信小程序开发(上)

你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

3009
来自专栏华仔的技术笔记

Xcode 7 自动测试XCTestCase

4207

扫码关注云+社区

领取腾讯云代金券