Zepto学习笔记

Posted 2020-06-08

 

Zepto和jQuery的很多API都很一致，思路也很相似，我不会全都整理出来，只是把一些平时用到了的或者不同的地方需要注意一下的地方总结出来。另外，Zepto现在还不是很成熟，无论是对大小写的敏感还是选择器Sizzle的支持广度等等等等都不如jQuery，但是即便如此依然有很多个人和公司在使用它，很多大牛也很推荐Zepto，无论如何，先学习起来，市场总是需要新技术的更替，对Zepto，我们还是拭目以待吧！

 

=========2016年1月25日========

tap()方法

不要用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);
});

 

Sizzle

:text :checkbox :first 等等在jQuery里面很常用的选择器，Zepto是不支持的。

jQuery 通过自己编写的 sizzle 引擎来支持 CSS 选择器，而 Zepto 是直接通过浏览器提供的 document.querySelectorAll 接口，而这个接口只支持标准的 CSS 选择器。

但是Zepto的模块selector扩展了Sizzle，使得Zepto也能支持部分jQuery选择器：

:visible 
:hidden

:selected 
:checked

:parent
:first 
:last 
:eq

:contains 
:has

 

尺寸

1.Zepto没有innerWidth(), innerHeight(),outerWidth(),outerHeight()这些方法

2.它的.height()/.width()方法也不完善

3.对于display:none 的元素，计算出的高宽都是0

而这在 jQuery 里面是没有问题的，因为 jQuery 针对这种元素，会先设置其CSS样式设置为position: "absolute", visibility: "hidden", display: "block" ，计算完高宽后再恢复。

Zepto是由盒模型(box-sizing)决定的，而jQuery忽略盒模型，始终返回内容区域的宽/高(不包含padding/border)

解决方式就是使用 .css(‘width‘) 而不是 .width()

 

prop()方法

这么写是不work的

$(‘#text‘).prop(‘readonly‘, true);

这么写才是work的

$(‘#text‘).prop(‘readOnly‘, true);

区别在于大小写

而jQuery的源码里是这么处理的

jQuery.each([
    "tabIndex",
    "readOnly",
    "maxLength",
    "cellSpacing",
    "cellPadding",
    "rowSpan",
    "colSpan",
    "useMap",
    "frameBorder",
    "contentEditable"
], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

看到toLowerCase()的时候恍然大悟

 

fx_methods与show()方法

fx_methods是一些和show() hide() toggle()有关的模块，但是这个模块现在也不成熟，比如说show()，

<div style="background:black;opacity:0.7;display:none">
    test
</div>

如果我们把这个div用show()显示出来

$(‘div‘).show(‘fast‘);

得到的结果会是一个opacity为1.0的div

因为zepto的show()很简单，没有宽高的变化，只是单纯地把opacity从0渐变为1。

解决的方法是，使用fadeIn()，或者自己写一个。

 

 

 

 

===========我是touch事件的分割线============

先看一下我之前总结的jQuery Mobile的事件总结，请狠狠地摸我

据说，jQuery Mobile不是很好用，我在做一个银行的ipad项目的时候也发现了这个问题，响应速度好慢啊！（当然，速度慢也有一些是json数据传输量太大的缘故。）

反正，无论如何，总之，业内都说Zepto在移动端的事件响应比jQuery Mobile要好，那就学习一下好了。

 

重要属性

我们可以从event.touches[0]里获取属性，它长这样：

clientX,clientY:触摸点相对于浏览器窗口viewport的位置;

pageX,pageY: 触摸点相对于页面的位置;

screenX,screenY：触摸点相对于屏幕的位置;

identifier:touch对象的unique ID 。

 

事件类型

touchstart:手指触摸屏幕上的时候触发 

$(‘#touchs‘).bind("touchstart",function(event){
    var touchpros =event.touches[0];
    console.log(touchpros);
});

 

touchmove:手指在屏幕上移动的时候触发 

$(‘#touchs‘).bind("touchmove",function(){
    //touchmove
});

 

touchend:手指从屏幕上拿起的时候触发 

$(‘#touchs‘).bind("touchend",function(){
    //touchend
});

 

touchcancel:系统取消touch事件的时候触发

$(‘#touchs‘).bind("touchcancel",function(){
    //touchcancel
});

 

当你触摸屏幕并抬起手指，只触发touchstart和touched。

可以根据基本的touch事件来封装成你想要实现复杂的效果，比如向左或向右滑动，向上或向下滑动，并在滑动时封装你想实现的效果。