移动开发js库Zepto.js使用中的一些注意点 - 为程序员服务
为程序员服务
推荐团队博客
相关专栏文章
最近更新博客
移动开发js库Zepto.js使用中的一些注意点
来自的参考。
前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了
这个著名的 DOM 操作库。
为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。
而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以学习成本也很低。
但是在开发过程中，我发现 Zepto 还远未成熟，其中包含了一些或大或小的“坑”，与 jQuery 的差距还是很明显的，所以写篇文章记录下，希望对后来者有帮助
注意，本文撰写时 Zepto 版本为 1.0 正式版
从哪里下载 Zepto
这个问题看起来很蠢，从官网下载不就行了嘛！可是你有没有发现下载链接上面有行小字呢？
Th a list of all modules is available in the 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 选择器，而上面提到的那些属于 ，所以仔细看看这个网页，注意一下这些选择器。
当然也有好消息，就是上面提到的 selector 模块，如果有这个模块的话，能够支持 部分 的 jQuery 选择器扩展，列举如下：
:visible :hidden
:selected :checked
:first :last :eq
:contains :has
元素的尺寸计算
首先 Zepto 没有 .innerHeight() .outerWidth() 等四个方法，其次，它的 .height()/.width() 方法也不完善，对于 display:none 的元素，计算出的高宽都是 0
而这在 jQuery 里面是没有问题的，因为 jQuery 针对这种元素，会先设置其 css 样式设置为 position: "absolute", visibility: "hidden", display: "block"
计算完高宽后再恢复，参见
如果遇到这种特殊情况，可以参考 jQuery 写一个类似的方法
.prop() 方法的陷阱
有次我要把一个文本框置为只读，写了这么一行 $('#text').prop('readonly', true) 结果死活不工作
找了半天才发现，正确的写法是这样 $('#text').prop('readOnly', true) ，如果你居然看不出两者的差别，那么悄悄提示你：注意大小写！
翻了一下相关的文档，原来只读属性的正确拼法确实是 readOnly，可是在 jQuery 里面上一段代码却能正常工作
于是到 jQuery 源码里面一找才发现，还有这么一段
jQuery.each([
"tabIndex",
"readOnly",
"maxLength",
"cellSpacing",
"cellPadding",
"rowSpan",
"colSpan",
"frameBorder",
"contentEditable"
], function() {
jQuery.propFix[ this.toLowerCase() ] =
从这里也能看到，jQuery 的成熟度真是难以超越，因为他把我们都惯坏了……
考虑到这段代码比较简单，我厚颜无耻地抄袭了一下然后给 Zepto 提了一个
，如果你们喜欢这种无脑的用法，可以去评论表达支持（记得用英文）
.show() 的动画效果
如果没有 fx_mehods 模块的话，.show() 方法是不支持动画的，不过有了这模块后，动画的支持还是有点小问题，比如这么一段 HTML
&div style="background:opacity:0.7;display:none"&
如果你调用 $('div').show('fast') ，那么动画完成后你看到的不会是一个半透明的元素，而是全黑不透明的
因为 Zepto 的 .show() 动画实现的很简单，没有高宽的变化，而是将透明度从 0 逐渐变为 1，所以元素上原来设置的透明度就被替代了。
这种情况下，可以用 .fadeIn() 方法来替代 .show()
看到这里相信你已经了解为什么我说” Zepto 还远未成熟“，目前它其实还仅仅处于“能用”，远未达到 jQuery “好用”的地步
最后，关于整个 HTML5 触屏版的前端开发，我有篇
做了总结，本文只是其中关于 Zepto 部分的详细阐述，感兴趣的可以去看看
相关文章推荐：氪空间项目“环信即时通讯云”：移动IM功能是刚需，用开源思想做移动IM通讯底层开发 36氪开放日北京站
| 环信刘俊彦：现在移动互联网很像十年前的PC互联网，围绕App开发的基础服务兴起，个推做推送，ShareSDK做分享，友盟做数据统计分析，即时通讯是尚未被攻破的堡垒
发布： 16:48:25作者：36氪
氪空间项目“环信即时通讯云”：移动IM功能是刚需，用开源思想做移动IM通讯底层开发#36氪开放日北京站# | 环信刘俊彦：现在移动互联网很像十年前的PC互联网，围绕App开发的基础服务兴起，个推做推送，ShareSDK做分享，友盟做数据统计分析，即时通讯是尚未被攻破的堡垒http://t.cn/RvKrVdP by @冷夏17
大家都在看
48小时点击榜
Copyright (C)
Inc. All Rights Reserved.
上海看看牛视网络传播有限公司 版权所有附近人在搜什么
成都首批百家移动企业成天翼空间应用合作伙伴
　　速途网讯 日，天翼空间应用工厂移动应用开发运营平台发布暨合作伙伴招募会在成都举行。四川省经济和信息化委员会李建疆副主任，四川省经济和信息化委员会邓文红处长，成都市经济和信息化委员会黎邦华副主任，成都高新区管委会软件服务外包产业推进办公室周智副主任，成都高新区管委会创新中心黄海副部长，成都市温江区光华现代服务业推进办公室赵华副主任出席平台发布暨签约仪式。中国电信四川公司副总经理周清久现场致辞，天翼空间总经理赵锦鹏、平台战略合作伙伴海豚浏览器副总裁梁振、国信安总经理熊壮，智翔集团副总裁包雨在发布会上发表了精彩演讲。在启动仪式后，艾瑞集团咨询事业部总经理杨华就行业移动应用的发展做了深度评估。天翼空间应用工厂与三友集团、国信安培训学校、思珩集团现场签订了移动应用开发运营平台战略合作协议，双方将在移动互联网应用产业区域、面向开发者、使用者、及推广者进行一站式服务。
　　主题演讲精彩绝伦现场开发者成粉丝
　　天翼空间总经理赵锦鹏先生在其主题演讲《行业移动应用的光荣与梦想》中表示，依托中国电信政企资源，以及逐步开放的技术资源，天翼空间能够为移动互联网创业者提供面向全国乃至全球的成熟市场环境及相关服务。对于开发者，可以获得大量用户，并快速获得盈利;对于行业企业，可以花更低的成本拥有更多选择，获得更专业的技术力量和更完善的售后支持，天翼空间应用工厂携30万开发者为其服务;对于合作伙伴，天翼空间应用工厂提供电信能力开放和第三方能力、业务、产品和解决方案的接入，将个体智慧的成功转化为众多开发者的成功，营造多赢局面。放眼未来，行业移动应用市场日趋成熟，天翼空间应用工厂将与广大移动应用开发者一起，致力于行业移动市场的拓展。
　　开放平台战略合作伙伴海豚浏览器副总裁梁振就《移动应用开发新趋势》展开话题演讲，演讲围绕着以下问题：未来网络意味着什么?移动应用开发运营平台怎样才能腾飞?如果实现节点制胜?梁振表示，未来移动互联网应用开发会朝着垂直化细分领域，面向企业的移动应用以及全面进入Web时代发展。而此次发布的开放平台旨在提供跨平台解决方案，将单个智慧的成功转化为众多开发者的成功，营造多赢局面。
　　成都国信安熊壮发表的《移动互联网应用开发的新机遇与挑战》同样获得现场企业与开发者的认可。他从端游、网游、手游小范围延伸到移动互联网应用开发领域，认为从运营商、终端厂商、操作系统(如塞班、安卓)、应用平台(如苹果App
Store)、跨平台应用(如360、QQ)、单平台应用(如海豚浏览器)，到手机网站(如3G门户)，每一个链条，都会出现一些平台属性的公司，它们拥有大量的用户，同时也具有吸收各种资源服务用户的拓展性和能力，由此形成一个坚固的利益共生体，从而催生移动互联网应用开发运营平台的出现。
　　行业携手整合资源 百家企业成天翼空间伙伴
　　艾瑞集团咨询事业部总经理杨华在《行业移动应用的发展》的演讲中，用数据说话，统计显示，季度移动应用广告出现迅猛发展之势，特别是电商类的访问行为及流量剧增，致使广告主投放的意愿增长，这正说明移动应用需求量大。数据还表明，企业行业应用需求与开发者渴求展示的舞台成正比。杨总在会上提到：以目前移动互联网用户数量和产业规模的急剧膨胀，在这个大发展背景下，移动互联网必将给社会各行各业带来深刻变革。
　　在此次活动中，首批100家移动互联网企业成为天翼空间应用工厂合作伙伴，携手推动移动互联网产业的发展。此前海豚浏览器和中国电信天翼空间在今年7月24日签署战略合作协议，共同构建具有国际影响力的移动互联网开放平台。此次企业移动开放平台也是该战略合作的重要部分，整合了海豚浏览器的海外、技术优势以及中国电信天翼空间的平台优势，能够有效帮助企业移动信息化的发展以及国内开发者通过开放平台推进应用开发并实现快速成功。
　　强势推出云端平台打造移动互联网“开发之城”
　　随着新一轮产业革命席卷全球，根据成都市“五大兴市战略”和奋力打造西部经济核心增长极的总体部署，成都高新区选择了移动互联网产业作为产业结构升级、产业规模倍增、提高自主创新能力和提升国际化水平的战略性支柱产业。
　　今年6月以来，成都高新区管委会先后发布了《关于加快推进移动互联网产业发展的意见》和《加快移动互联网产业发展的若干政策》，对移动互联网产业发展提出规划。在此时机下，推出天翼空间应用工厂移动应用开发运营平台抓住了契机，在为行业企业解决系统方案时，也为开发者提供了良好的创业平台。
　　中国电信四川公司副总经理周清久表示，中国电信积极响应市场需求，在政府的大力支持下，在帮助企业解决困难的同时，开发者也在此平台上获得了前所未有的发挥，找到了创业的突破口。
　　中国电信相关负责人同时表示，十分看好移动互联网发展前景，成都高新区在移动互联网产业上必将有大作为。中国电信天翼空间应用工厂将以强大的综合信息能力汇聚企业移动应用开发运营需求和全球优秀开发者，并提供快速开发工具、应用组件模版、电信及第三方能力开放、云测试平台、云托管环境、项目质量管控工具、源代码管理、版本管理、运营管理等工具，助力开发者快速开发，并全面助推成都高新区抢抓全球移动互联网产业兴起的发展机遇，快步实现打造“移动互联网开发者之城”的目标。
北京IT故事第7集}