

在移动端开发应用时,Zepto.js 被广泛应用。 Zepto.js 提供 jQuery 的类似的 API 但是体积远远小于 jQuery 。但是在使用过程中你可能会碰到一些问题,本文做了详细的总结,供你参考。
首先推荐一下 Zepto.js API 中文文档 (1.2.0)
问题1:判断当前对象是否是Zepto实例化对象的方法
在 jQuery 中,判断是不是 jQuery 实例化对象,直接用 instanceof
就行,即:
var a=$("body"); if(a instanceof jQuery){ //... }
在 Zepto 中这样用是无效的,一般 Zepto 是如下来判断的即:
var a=$("body"); if(Zepto.zepto.isZ(a)){ //... }
问题2:Zepto 中不存在的方法
Zepto 并没有 100% 覆盖 jQuery,例如 nextAll()
, prevAll()
这些方法在 Zepto 中不存在
问题3:Zepto.js 中的点透问题
案例如下:
<div id="css88">点头事件测试</div> <a href="">www.css88.com</a>
div 是绝对定位的蒙层,并且 z-index 高于 a。而 a 标签是页面中的一个链接,我们给 div 绑定 tap 事件:
$('#css88').on('tap',function(){ $('#css88').hide(); });
我们点击蒙层时 div 正常消失,但是当我们在 a 标签上点击蒙层时,发现 a 链接被触发,这就是所谓的点透事件。
原因:
touchstart 早于 touchend 早于 click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时 click 还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。
解决:
- 尽量都使用 touch 事件来替换 click 事件。例如用 touchend 事件(推荐)。
- 用fastclick,https://github.com/ftlabs/fastclick
- 用preventDefault阻止a标签的click
- 延迟一定的时间(300ms+)来处理事件 (不推荐)
- 以上一般都能解决,实在不行就换成click事件。
下面介绍一下 touchend 事件,如下:
$("#css88").on("touchend", function (event) { event.preventDefault(); });
问题4:移动端点击300ms延迟
300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。
推荐两个js,一个是 fastclick,一个是 tap.js
问题5:Zepto 对象 不能自定义事件
例如执行:
$({}).bind('haorooms', function(){});
结果: TypeError: Object has no method ‘addEventListener’
解决办法是创建一个脱离文档流的节点作为事件对象: 例如:
$('').bind('haorooms', function(){});
问题6:Zepto 获取select元素的选中 option
获取select元素的选中 option ,可以用$(‘option[selected]’),但是不能用$(‘option:selected’)。
测试发现jQuery可以用 $(‘option:selected’) 获取选中的选项,但是zepto会报错! 会报如下错误:
Uncaught DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘option:selected’ is not a valid selector.
但是获取有select中含有disabled属性的元素可以用 $(this).find(“option:not(:disabled)”) 因为disabled是标准属性
另外:zepto 在操作 Dom 的 selected 和 checked 属性时尽量使用 prop 方法
问题7:Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 ” or 单引号 ‘ 括起来
例如执行:
$('[data-userid=haorooms]')
结果:Error: SyntaxError: DOM Exception 12
解决办法:
$('[data-userid="haorooms]"') or $("[data-userid='haorooms']")
问题8:隐藏元素尺寸
Zepto.js: 无法获取宽高;jQuery: 可以获取。
问题9:innerWidth(), innerHeight(),outerWidth(),outerHeight()
Zepto 是根据标准浏览器写的,所以对于节点尺寸的方法只提供 width() 和 height(),省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂