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 使用中的一些注意点的更多相关文章

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

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

  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. 让magento的validate验证hidden field

    Object.extend(Validation, { isVisible : function(elm) { return true; }, insertAdvice : function(elm, ...

  2. [LeetCode] Interleaving String [30]

    题目 Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example, Given: ...

  3. [Android 4.4.3] 泛泰A860 Omni4.4.3 20140610 RC2.0 三版通刷 by syhost

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  4. UIColor-Hex-Swift

    // // UIColorExtension.swift // HEXColor // // Created by R0CKSTAR on 6/13/14. // Copyright (c) 2014 ...

  5. transition的唧唧歪歪

    transition是css3新出的一个属性,大白话叫做过渡. 主要有下面这四个属性: transition-property.transition-duration.transition-timin ...

  6. 清理SQL数据库日志

    Use DBSelect NAME,size From sys.database_files ALTER DATABASE DB SET RECOVERY SIMPLE WITH NO_WAIT AL ...

  7. Sqlserver系列(三) 小技巧

    (1)取别名 as 省略 as XX= select 'a' as name select 'a' name select name='a' 示例

  8. css模板之 web模板一

    效果 <html><head><style type="text/css">div.container{width:100%;margin:0p ...

  9. HDU 5730 - Shell Necklace

    题意: 给出连续的1-n个珠子的涂色方法 a[i](1<=i<=n), 问长度为n的珠链共有多少种涂色方案 分析: 可以得到DP方程: DP[n] = ∑(i=1,n) (DP[n-i]* ...

  10. Android 真机调试显示offline

    今天调试程序部署的时候显示设备状态时offline. 然后突然想起来我通过命令行操作过设备. 然后找来一下,如下命令. adb kill-server adb devices