11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。
1. Why Zepto.js?
- API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js
- Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发。
- Zepto增加了针对移动端的触摸和手势相关的事件
- 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的源码自行编译。
自定义编译步骤:
- 第一步:下载zeptojs源码:源码
- 第二步:解压源码,并打开命令行进入源码根目录
# 打开命令行工具,进入解压的zepto目录
$ cd zepto-master
# 安装npm包依赖
$ npm install
- 第三步:修改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(' ')
- 第四步:编译最终的zeptojs
$ npm run-script dist
3. zepto注意事项
- 注意某些模块必须打包进zeptojs文件才能用,比如:
fx_methods
模块的方法:hide() show()
等动画方法。 - Zepto只设置全局变量$指向它本身。 没有Zepto.noConflict方法。
- 不支持jQuery CSS 扩展, 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器
- Zepto.js: 无法获取隐藏元素宽高;
- Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
- 移动端端点透需要阻止默认行为来规避。
其实还有很多方法的缺失,所以大家自己在写代码的时候多留意下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开发值得推荐。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法