zepto
11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的javaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
> 转者有话说：这里有坑，不要以为会jQuery就可以了，还是要看一下常用的api。比如zepto中$.ajax 指定请求方法是用type，如果后端只接受post请求，你就好好查查为什么吧，今天就是遇到这个坑，明明用method指定了post请求方法，卡了半个钟。所以今天才有这篇博客转载。
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 表达式 实用功能，比如 $('p: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开发值得推荐。
作者：FlyDragon
出处：http://www.cnblogs.com/fly_dragon/
关于作者：专注于微软平台项目架构、管理和企业解决方案。如有问题或建议，请多多赐教！
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通[email protected] 联系我，非常感谢。
相关阅读
背景 Lynx 作为一个基于 JavaScript 语言（后续简称 JS ）的跨平台开发框架，与 JS 的通信是”与生俱来”的，框架和 JS 引擎打交道是必不
Json是一种轻量级的数据交换格式，采用一种“键：值”对的文本格式来存储和表示数据，在系统交换数据过程中常常被使用，是一种理想的数据
从恶意软件获得的新姿势——通过rundll32.exe执行js原
今年7月份，国外研究机构发现了一个比较新型的恶意软件，这个恶意软件不会在系统上安装任何文件，而是藏身在windows的注册表中通过rund
首先，什么是Unicode，百科知识：Unicode（统一码、万国码、单一码）是计算机科学领域里的一项业界标准，包括字符集、编码方案等；Unicode
使用JSTL： 引入JSTL的相关的jar包. 在页面中引入标签库.<%@ taglib uri=”” prefix=””%> jstl标签 <body> <h1>jst