移动开发js库Zepto.js应用详解

从哪里下载 Zepto

地址:http://zeptojs.com/

中文版地址http://www.css88.com/doc/zeptojs_api/

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

在这个 README 里面你会惊奇地发现,Zepto 源码中有 14 个模块,而官网提供的标准版里面只有 7 个模块!而且居然不包含对移动端开发非常重要的 touch 模块(提供对触摸事件的支持)!

所以我的建议是,不要从官网下载,而是从 Github 下载了源代码之后自己 Build 一个版本,这样你可以自行挑选适合的模块。

build版本地址:http://github.e-sites.nl/zeptobuilder/

比如我挑选的模块是这么几个:

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

如果需要所有模块的总合,可点击这儿下载zepto.js

不要用 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 的成熟度真是难以超越,因为他把我们都惯坏了……

.show() 的动画效果

如果你调用 $(‘div‘).show(‘fast‘) ,那么动画完成后你看到的不会是一个半透明的元素,而是全黑不透明的

因为 Zepto 的 .show() 动画实现的很简单,没有高宽的变化,而是将透明度从 0 逐渐变为 1,所以元素上原来设置的透明度就被替代了。

这种情况下,可以用 .fadeIn() 方法来替代 .show()。

结语

看到这里相信你已经了解为什么我说” Zepto 还远未成熟“,目前它其实还仅仅处于“能用”,远未达到 jQuery “好用”的地步。

转载地址:http://cssor.com/some-experience-of-using-zepto.html

时间: 2024-10-14 05:56:31

移动开发js库Zepto.js应用详解的相关文章

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

来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库. 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的. 而 Zepto 只针对移动端浏览器编写,因此体积更小.效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习

使用backbone.js、zepto.js和trigger.io开发HTML5 App

为了力求运行速度快.响应迅即,我们推荐使用backbone.js和zepto.js. 为了让这个过程更有意思,我们开发了一个小小的示例项目,使用CSS重置样式.Backbone.js和带转场效果的几个页面.我们的项目会显示Trigger推特更新内容和单个的推特消息.与往常一样,我们将使用同一个HTML5代码库创建安卓和iOS应用程序.在这个过程中,我们将介绍如何: 把你的JavaScript文件添加到应用程序中 使用Backbone.js来显示响应迅即的界面 使用CSS重置样式,减少跨平台出现的

js 面向对象日历实现原理详解

对于前端开发来说,日历空间在网站里应用的很多,比如:填写表单时,是选取一下事件了--等等.下面就来分析一下怎么用js来写一个自己万年历. 在没有开始之前,我们是先弄明白是什么原理,要通过几个步骤来实现. 第一,我们的知道某一个月的某第一天是星期几. 第二,我们得知道某一个月有一共有几天, 只要有了这两部就可以循环出来了,下面看一下代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

js对象浅拷贝和深拷贝详解

js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

移动端的内容滑块js库 swipe.js

swipe.js 是一个轻量级的移动端内容滑块,类似于pc端的slide.js,用于实现轮播广告或其他内容滑动模块 ,支持移动端屏幕滑动手势操作.此库不依赖于任何其他的js库,可独立使用 使用swipe.js时只需将下载好的文件引用到页面,然后在页面中写好对应的结构 <div id="slider" class="swipe"> <div class="swipe-wrap"> <div></div>

js showModalDialog参数的使用详解(转)

js showModalDialog参数的使用详解_javascript技巧_脚本之家 http://www.jb51.net/article/45281.htm 本篇文章主要是对js中showModalDialog参数的使用进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 基本介绍: showModalDialog()              (IE 4+ 支持)showModelessDialog()           (IE 5+ 支持)window.showModa