从哪里下载 Zeptocss
这个问题看起来很蠢,从官网下载不就好了嘛!但是你有没有发现下载连接上面有行小字呢?html
There are more modules; a list of all modules is available in the README.前端
在这个 README 里面你会惊奇地发现,Zepto 源码中有 14 个模块,而官网提供的标准版里面只有 7 个模块!并且竟然不包含对移动端开发很是重要的 touch 模块(提供对触摸事件的支持)!
因此个人建议是,不要从官网下载,而是从 Github 下载了源代码以后本身 Build 一个版本,这样你能够自行挑选适合的模块。好比我挑选的模块是这么几个:html5
- polyfill,zepto,detect,event,ajax,form,fx 这7个就是标准版包含的模块
- fx_methods 有了这个模块以后,.show() .hide() 等几个方法才能支持动画了,好比
.show('fast')
- data 提供对 .data() 方法的完整支持,像 jQuery 同样用内存对象存储
- assets 移除 img 元素后作一些特殊处理,用来清理内存
- selector 更多的选择器的支持,后面会提到
- touch 对触摸事件的支持,好比 tap 事件
若是你对 Node 不了解不知道如何 Build 的话,能够下载个人版本jquery
不要用 click 事件,用 tap 代替
这个估计已经广为人知了,由于 click 事件有 200~300 ms 的延迟,为了更快的响应,最好用 Zepto 提供的 tap 事件
不相信的话,能够用如下代码测试一下git
var t1,t2; $(function () { t1 = Date.now(); }); $(function () { t2 = Date.now(); alert(t2 - t1); });
Zepto 对 CSS 选择器的支持
郑重提醒,:text :checkbox :first
等等在 jQuery 里面很经常使用的选择器,Zepto 不支持!
缘由很简单,jQuery 经过本身编写的 sizzle 引擎来支持 CSS 选择器,而 Zepto 是直接经过浏览器提供的 document.querySelectorAll
接口。
这个接口只支持标准的 CSS 选择器,而上面提到的那些属于 jQuery 选择器扩展,因此仔细看看这个网页,注意一下这些选择器。github
固然也有好消息,就是上面提到的 selector 模块,若是有这个模块的话,可以支持 部分 的 jQuery 选择器扩展,列举以下:ajax
- :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 写一个相似的方法api
.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([ function() { jQuery.propFix[ this.toLowerCase() ] = this; });
从这里也能看到,jQuery 的成熟度真是难以超越,由于他把咱们都惯坏了……
考虑到这段代码比较简单,我厚颜无耻地抄袭了一下而后给 Zepto 提了一个 pull request ,若是大家喜欢这种无脑的用法,能够去评论表达支持(记得用英文)
2013-11-25 这个 PR 已经被 Merge
.show() 的动画效果
若是没有 fx_mehods 模块的话,.show() 方法是不支持动画的,不过有了这模块后,动画的支持仍是有点小问题,好比这么一段 HTML
<div style=">
test
</div>
若是你调用 $('div').show('fast')
,那么动画完成后你看到的不会是一个半透明的元素,而是全黑不透明的
由于 Zepto 的 .show() 动画实现的很简单,没有高宽的变化,而是将透明度从 0 逐渐变为 1,因此元素上原来设置的透明度就被替代了。
这种状况下,能够用 .fadeIn() 方法来替代 .show()
结语
看到这里相信你已经了解为何我说” Zepto 还远未成熟“,目前它其实还仅仅处于“能用”,远未达到 jQuery “好用”的地步
最后,关于整个 HTML5 触屏版的前端开发,我有篇 Slide 作了总结,本文只是其中关于 Zepto 部分的详细阐述,感兴趣的能够去看看