Zepto 与 jQuery 的差异总结

Zepto 是一个与 jQuery 高度相似的库,API 与 jQuery 一致,优点是体积小,核心模块压缩以后不到 10K。我们知道 jQuery 的缺点就是体积大,即便到了 2.x 版本,仍然有 80 多 K。而 Zepto 非常适合在移动端代替 jQuery,并且很多功能做成了模块,可以根据需要选用。

logo

虽然 API 与 jQuery 高度一致,但实际使用中,还是有着不少差异的,如下:

.css() 方法

在 jQuery 中的 .css() 方法非常强大,可以自动替你处理各个浏览器的 CSS 前缀,比如:

$('#el').css('transform', 'scale(0.5)');

如果浏览器不支持上面的属性,jQuery 可以自动帮你加前缀,比如 -webkit-transform 等。而这一点 Zepto 还做不到。你必须自己探测浏览器支持哪种前缀,然后使用 $('#el').css('-webkit-transform', 'scale(0.5)')

另外一点,.css() 方法支持驼峰式的属性名,比如 $('#el').css('backgroundColor', 'green'),jQuery 和 Zepto 可以转换为 background-color。但是对于带前缀的属性,Zepto 就不行了,如:

$('#el').css('webkitTransform', 'scale(0.5)');

在 jQuery 可以,但是 Zepto 会把属性名转换为 webkit-transform,少了前面的 - 号。

其他几处差异

  • 使用属性选择器,$('[attr="value"]')value 必须要加引号
  • 没有 innerWidth(), innerHeight(), outerWidth(), outerHeight() 四个方法,只有 width()height(),分别返回 offsetWidthoffsetHeight
  • offset() 方法返回元素在文档中的位置,jQuery 中只有 top, left 两个属性,Zepto 多了 widthheight
  • .clone() 不支持克隆元素上的事件
  • .animate() 的参数有区别
  • 使用自定义事件时,都支持命名空间,比如 $(el).on('click.myPlugin', fn),而 Zepto 不支持事件名称出现 . 号,可以换成冒号

额外功能

有一些 jQuery 常用的功能,Zepto 的核心模块里都没有,因为出于缩小体积的考虑。必须添加额外的模块才能使用这些功能:

  • .data() 方法默认只能存储字符串,如果想要存储对象,需要 data.js 模块
  • tapswipe 事件,需要 touch.js。Zepto 的 tap 事件不是很完美,经常导致穿透现象,建议改用 FastClick
  • pinch 事件需要 gesture.js
  • $.Deferred需要 deferred.js
  • .animate() 需要 fx.js。show/hide/toggle/fadeIn/fadeOut 需要 fx_methods.js
  • .end()andSelf() 方法,需要 stack.js
flight