http://www.zeptojs.cn/     zepto英文站在线文档

http://www.css88.com/doc/zeptojs_api/       zepto中文站在线文档

http://chaoskeh.com/blog/some-experience-of-using-zepto.html

前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库。
为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的。
而 Zepto 只针对移动端浏览器编写,因此体积更小、效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低。

但是在开发过程中,我发现 Zepto 还远未成熟,其中包含了一些或大或小的“坑”,与 jQuery 的差距还是很明显的,所以写篇文章记录下,希望对后来者有帮助
注意,本文撰写时 Zepto 版本为 1.0 正式版

从哪里下载 Zepto

这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢?

There are more modules; a list of all modules is available in the README.

在这个 README 里面你会惊奇地发现,Zepto 源码中有 14 个模块,而官网提供的标准版里面只有 7 个模块!而且居然不包含对移动端开发非常重要的 touch 模块(提供对触摸事件的支持)!
所以我的建议是,不要从官网下载,而是从 Github 下载了源代码之后自己 Build 一个版本,这样你可以自行挑选适合的模块。比如我挑选的模块是这么几个:

  • polyfill,zepto,detect,event,ajax,form,fx 这7个就是标准版包含的模块
  • fx_methods 有了这个模块之后,.show() .hide() 等几个方法才能支持动画了,比如 .show('fast')
  • data 提供对 .data() 方法的完整支持,像 jQuery 一样用内存对象存储
  • assets 移除 img 元素后做一些特殊处理,用来清理内存
  • selector 更多的选择器的支持,后面会提到
  • touch 对触摸事件的支持,比如 tap 事件

如果你对 Node 不了解不知道如何 Build 的话,可以下载我的版本

不要用 click 事件,用 tap 代替

这个估计已经广为人知了,因为 click 事件有 200~300 ms 的延迟,为了更快的响应,最好用 Zepto 提供的 tap 事件
不相信的话,可以用以下代码测试一下

var t1,t2;
$('#id').tap(function () {
t1 = Date.now();
});
$('#id').click(function () {
t2 = Date.now();
alert(t2 - t1);
});

Zepto 对 CSS 选择器的支持

郑重提醒,:text :checkbox :first 等等在 jQuery 里面很常用的选择器,Zepto 不支持!
原因很简单,jQuery 通过自己编写的 sizzle 引擎来支持 CSS 选择器,而 Zepto 是直接通过浏览器提供的 document.querySelectorAll 接口。
这个接口只支持标准的 CSS 选择器,而上面提到的那些属于 jQuery 选择器扩展,所以仔细看看这个网页,注意一下这些选择器。

当然也有好消息,就是上面提到的 selector 模块,如果有这个模块的话,能够支持 部分 的 jQuery 选择器扩展,列举如下:

  • :visible :hidden
  • :selected :checked
  • :parent
  • :first :last :eq
  • :contains :has

元素的尺寸计算

首先 Zepto 没有 .innerHeight() .outerWidth() 等四个方法,其次,它的 .height()/.width() 方法也不完善,对于 display:none 的元素,计算出的高宽都是 0
而这在 jQuery 里面是没有问题的,因为 jQuery 针对这种元素,会先设置其 css 样式设置为position: "absolute", visibility: "hidden", display: "block" 
计算完高宽后再恢复,参见 https://github.com/jquery/jquery/blob/master/src/css.js#L460
如果遇到这种特殊情况,可以参考 jQuery 写一个类似的方法

.prop() 方法的陷阱

有次我要把一个文本框置为只读,写了这么一行 $('#text').prop('readonly', true) 结果死活不工作
找了半天才发现,正确的写法是这样 $('#text').prop('readOnly', true) ,如果你居然看不出两者的差别,那么悄悄提示你:注意大小写!
翻了一下相关的文档,原来只读属性的正确拼法确实是 readOnly,可是在 jQuery 里面上一段代码却能正常工作
于是到 jQuery 源码里面一找才发现,还有这么一段 https://github.com/jquery/jquery/blob/master/src/attributes.js#L466

jQuery.each([
"tabIndex",
"readOnly",
"maxLength",
"cellSpacing",
"cellPadding",
"rowSpan",
"colSpan",
"useMap",
"frameBorder",
"contentEditable"
], function() {
jQuery.propFix[ this.toLowerCase() ] = this;
});

从这里也能看到,jQuery 的成熟度真是难以超越,因为他把我们都惯坏了……
考虑到这段代码比较简单,我厚颜无耻地抄袭了一下然后给 Zepto 提了一个 pull request ,如果你们喜欢这种无脑的用法,可以去评论表达支持(记得用英文)

.show() 的动画效果

如果没有 fx_mehods 模块的话,.show() 方法是不支持动画的,不过有了这模块后,动画的支持还是有点小问题,比如这么一段 HTML

<div style="background:black;opacity:0.7;display:none">
test
</div>

如果你调用 $('div').show('fast') ,那么动画完成后你看到的不会是一个半透明的元素,而是全黑不透明的
因为 Zepto 的 .show() 动画实现的很简单,没有高宽的变化,而是将透明度从 0 逐渐变为 1,所以元素上原来设置的透明度就被替代了。
这种情况下,可以用 .fadeIn() 方法来替代 .show()

结语

看到这里相信你已经了解为什么我说” Zepto 还远未成熟“,目前它其实还仅仅处于“能用”,远未达到 jQuery “好用”的地步
最后,关于整个 HTML5 触屏版的前端开发,我有篇 Slide 做了总结,本文只是其中关于 Zepto 部分的详细阐述,感兴趣的可以去看看

Zepto 使用中的一些注意点(转)的更多相关文章

  1. Zepto 使用中的一些注意点

    Zepto 只针对移动端浏览器编写,因此体积更小.效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低. 但是在开发过程中,我发现 Zepto 还远未成熟,其中包含了一些或 ...

  2. 【移动互联网开发】Zepto 使用中的一些注意点 【转】

    前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库. 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大 ...

  3. ☀【Zepto】

    http://zeptojs.com/ https://github.com/madrobby/zepto Zepto 中文手册 http://www.360weboy.com/handbook/ze ...

  4. 学习笔记:Zepto笔记

    1.Zepto对象不能自定义事件 例如执行:$({}).bind('cust',function(){}); 结果:TypeError:Object#hasnomethod'addEventListe ...

  5. 移动开发js库Zepto.js使用中的一些注意点

    来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Z ...

  6. 别再迷信 zepto 了

    希望网上公开课的老师们不要再讲移动端网页用zepto了,坑了无数鸟啊 ~~~. 1.自己/公司/项目组所写和所积累(网上下的)的js函数都是以jQuery插件的写法来写的,如果要换到zepto上的话那 ...

  7. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  8. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  9. ORA-02020 : 过多的数据库链接在使用中-Windows环境解决步骤

    一.现象 编译存储过程时报ORA-02020错误. 错误详细信息:ORA-04052在查找远程对象 xx@yy时出错 ORA-00604 : 递归 SQL 级别 1 出现错误 ORA-02020 : ...

随机推荐

  1. SQL C# nvarchar类型转换为int类型 多表查询的问题,查询结果到新表,TXT数据读取到控件和数据库,生成在控件中的数据如何存到TXT文件中

    在数据库时候我设计了学生的分数为nvarchar(50),是为了在从TXT文件中读取数据插入到数据库表时候方便,但是在后期由于涉及到统计问题,比如求平均值等,需要int类型才可以,方法是:Conver ...

  2. OCR图片识别引擎

    OCR引擎 OCR(Optical Character Recognition)是指使用扫描仪或数码相机对文本资料进行扫描成图像文件,然后对图像文件进行分析处理,自动识别获取文字信息及版面信息的软件. ...

  3. Commons Codec基本使用(转载)

    在实际的应用中,我们经常需要对字符串进行编解码,Apache Commons家族中的Commons Codec就提供了一些公共的编解码实现,比如Base64, Hex, MD5,Phonetic an ...

  4. Delphi中register, pascal, cdecl, stdcall, safecall(转)

    源:http://blog.sina.com.cn/s/blog_552c78120100hsr9.html 注: 使用错误,或者在该加的地方没有加,可能会出现"privileged ins ...

  5. org.springside.modules.orm中的page类自我解读

    // // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernflower decompiler ...

  6. 电池和Adapter切换电路改进实验(转)

    源:电池和Adapter切换电路改进实验 目的:很多单电池的机器在大负载的情况下,如把背光开到最亮,运行3D游戏,此时拔DC电源很容易出现机器死机,或花屏现象: 原因:Q5的导通时间不够,希望通过G极 ...

  7. js动画(三)

    咳咳咳咳,感冒了感冒了,鼻塞,蓝瘦啊!嘴巴也开裂,哎,心疼自己.想到这是第三只唇膏了!只怪,放荡不倔爱自由, 行驶在冷风路上么,北风那个吹啊吹啊吹啊,好了,发神经发完了,接下来进入正题,严肃脸.(字数 ...

  8. (简单) POJ 1797 Heavy Transportation,Dijkstra。

    Description Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can no ...

  9. WAV音频格式分析

    wav是windows下无损的声音文件,该文件保存了音频的PCM信息和播放器播放该音乐的时候的大多数信息,他有两个块组成,第一个块是格式块,第二个块是数据块 先说格式块,格式块用一张图可以解释,如下 ...

  10. 【POJ2104】【HDU2665】K-th Number 主席树

    [POJ2104][HDU2665]K-th Number Description You are working for Macrohard company in data structures d ...