移动开发js库Zepto.js使用中的一些注意点
来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考。
前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库。
为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的。
而 Zepto 只针对移动端浏览器编写,因此体积更小、效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低。
但是在开发过程中,我发现 Zepto 还远未成熟,其中包含了一些或大或小的“坑”,与 jQuery 的差距还是很明显的,所以写篇文章记录下,希望对后来者有帮助
注意,本文撰写时 Zepto 版本为 1.0 正式版
从哪里下载 Zepto
这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢?
There are more modules; a list of all modules is available in the README.
在这个 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 选择器,而上面提到的那些属于 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 的成熟度真是难以超越,因为他把我们都惯坏了……
考虑到这段代码比较简单,我厚颜无耻地抄袭了一下然后给 Zepto 提了一个 pull request ,如果你们喜欢这种无脑的用法,可以去评论表达支持(记得用英文)
.show() 的动画效果
如果没有 fx_mehods 模块的话,.show() 方法是不支持动画的,不过有了这模块后,动画的支持还是有点小问题,比如这么一段 HTML
- <div style="background:black;opacity:0.7;display:none">
- test
- </div>
如果你调用 $('div').show('fast')
,那么动画完成后你看到的不会是一个半透明的元素,而是全黑不透明的
因为 Zepto 的 .show() 动画实现的很简单,没有高宽的变化,而是将透明度从 0 逐渐变为 1,所以元素上原来设置的透明度就被替代了。
这种情况下,可以用 .fadeIn() 方法来替代 .show()
结语
看到这里相信你已经了解为什么我说” Zepto 还远未成熟“,目前它其实还仅仅处于“能用”,远未达到 jQuery “好用”的地步
最后,关于整个 HTML5 触屏版的前端开发,我有篇 Slide 做了总结,本文只是其中关于 Zepto 部分的详细阐述,感兴趣的可以去看看
http://cssor.com/some-experience-of-using-zepto.html
转载于:https://www.cnblogs.com/ryan1990/p/4301512.html
移动开发js库Zepto.js使用中的一些注意点相关推荐
- [转载] 使用backbone.js、zepto.js和trigger.io开发HTML5 App
来源:http://mobile.51cto.com/web-343388.htm ---------------------------------------------------------- ...
- 轻量级的移动开发JavaScript框架-zepto.js
Zepto.js 是移动端轻量级的JavaScript框架,实现JQuery的大部分API,针对手机上web开发,轻量级的是相对性的减少用户访问流量 Zepto官网 地址 可以到 github上下载 ...
- 移动手机应用开发js框架zepto.js入门介绍
zepto.js是一个专为mobile WebKit浏览器(如:Safari和Chrome)而开发的一个JavaScript框架. 它标榜自己在其简约的开发理念,能够帮助开发人员简单.快速地完成开发交 ...
- 前端学习-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。
介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有 ...
- 前端高效开发必备的 js 库梳理
之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标, ...
- 使用模块化工具Rollup打包自己开发的JS库
使用模块化工具Rollup打包自己开发的JS库 打包JS库demo项目地址:https://github.com/Miazzy/xdata-utils-btools 背景 最近有个需求,需要为小程序写 ...
- 【Zepto笔记】Zepto.js
Zepto.js Zepto 简介 jQuery 与 Zepto 的区别 关于浏览器兼容 既然有了JQuery,为什么要Zepto呢 Zepto 设计模块 Zepto 案例 选择器案例 动画案例 动画 ...
- 前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
- 有哪些必看的前端 JS 库?
前端自动化 前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – A ...
最新文章
- 计算概论(A)/基础编程练习1(8题)/4:求一元二次方程的根
- idea中Could not autowire. No beans of 'xxxxMapper' type found.问题解决
- java基础不好框架能学会吗_转行Java能学会吗?零基础学习Java的学习路线
- 多进程 VS 多线程
- 【算法】剑指 Offer 42. 连续子数组的最大和 【重刷】
- electron-vue使用electron-updater实现自动更新
- 【李宏毅2020 ML/DL】P74 Generative Adversarial Network | Basic Idea
- linux 桌面共享xfce,漂亮而且轻量级的桌面-----xfce安装
- 远程高效办公指南,每天都是能量满满的workaholism!
- 【程序8】输出9*9口诀 and 【程序9】输出国际象棋棋盘
- HTML经典绝对定位图片
- java代码获取银行实时汇率
- matlab体素化,一种三维激光点云数据快速体素化处理方法与流程
- could not locate named parameter [***]; nested exception is org.hibernate.QueryParameterException: c
- 免费的优质英文字体打包下载
- (翻译)自我监督模式(Self-Monitoring)
- html icon 引入emoji,给自己网站增加Emoji表情图标(可以在百度显示类
- 宽带拨号失败服务器未响应什么意思,宽带拨号服务器未响应
- 网址精灵 v1.68 build 272 免费
- 华南x79主板u盘装系统教程_华南x99主板装win7系统及BIOS设置教程