• 移动开发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

  • 相关阅读:
    ios 工具大全,最全框架
    获取APP的启动图 -Launch Image
    OCP-052考试题库汇总(3)-CUUG内部解答版
    OCP-052考题汇总(2)-CUUG内部解答版
    OCP-052考题汇总(1)-CUUG内部解答版
    【第60题】【062题库】2019年OCP认证062考试新题
    【第59题】【062题库】2019年OCP认证062考试新题
    【第58题】【062题库】2019年OCP认证062考试新题
    【第57题】【062题库】2019年OCP认证062考试新题
    【第56题】【062题库】2019年OCP认证062考试新题
  • 原文地址:https://www.cnblogs.com/moqiutao/p/4838809.html
Copyright © 2020-2023  润新知