10-Zepto

Zepto

Zepto是一个轻量级专门为现代智能手机浏览器推出的JavaScript库，完全兼容jQuery写法，精简了大量浏览器兼容性代码，所以更加轻量

获取Zepto

从Zepto官网获取最新版，从官方github.获取完整版本或历史版本，也可以去其他CDN官网进行获取Zepto的不同版本

点开下载连接会打开一个只有代码的页面，可以复制粘贴到自己本地建立的zepto.js文件中，也可使用右击下辖连接地址选择另存为下载至本地

默认下载的只有核心库，包含AJAX和对IE10以上的兼容支持等，若需要其他功能则需要引入相应的模块

模块名	描述
fx	自定义动画 animate()方法库（与jQuery不同的是基于CSS3过渡动画实现）
fx_methods	内置动画方法库，包括show()、hide()方法等（基于fx库）
touch	移动端事件库

与jQuery不同的API

1. Zepto的atrr()方法获取存在的属性会返回属性值，而不存在的属性会返回false，并不是undefined
2. Zepto在创建HTML代码片段时，可以添加该HTML代码片段的配置对象
3. Zepto的each()方法可遍历字符串，将字符串看作字符数组
4. Zepto只有width()和hight()方法，获取的宽高包括边框和内边距，相当于jQuery中的outerWidth()和outerHight()
5. Zepto的offset()方法返回的对象不仅仅包括偏移量，而且还包括当前元素的宽高（包括边框和内边距）
6. Zepto无法获取隐藏元素的宽高
7. Zepto不支持jQuery扩展的选择器
8. Zepto动画基于CSS3过渡实现，无需动画队列，并且不支持"+="的写法
9. Zepto事件只能使用on()注册，没有封装像jQuery中的click()的基础事件，除非引入touch模块

touch事件

在使用滑动事件之前需要将该元素CSS设置为touch-action: none;来禁止翻页，无法获取滑动距离

方法名	描述
Zepto.prototype.tap(callback)	触摸事件
Zepto.prototype.singleTap(callback)	单击事件
Zepto.prototype.doubleTap(callback)	双击事件
Zepto.prototype.longTap(callback)	长按事件
Zepto.prototype.swipe(callback)	滑动事件
Zepto.prototype.swipeLeft(callback)	左滑
Zepto.prototype.swipeRight(callback)	右滑
Zepto.prototype.swipeUp(callback)	上滑
Zepto.prototype.swipeDown(callback)	下滑

Zepto中的bug

触发要求：委托同一个父元素、同一个事件、具有委托关联（委托子元素选择器在回调函数中发生改变）

触发描述：在点击a时，b的回调函数也会触发，并且b回调中的this也指向a

<div class="box">
    <div class="a">a</div>
    <div class="b">b</div>
</div>
<script>
$(".box").on("click",".a",function(e){
    console.log(this);
    $(this).removeClass().addClass("b");
})
$(".box").on("click",".b",function(e){
    console.log(this);
    $(this).removeClass().addClass("a");
})
</script>

原因：Zepto中元素上所有委托时间都依次放到一个队列中，在执行完毕当前要执行的回调后，会向队列中寻找下一个符合条件的回调函数，由于当前回调中修改了class为b，下一个符合条件的就是class为b的回调函数了，所以就触发b的回调函数，可以通过以下代码试出来是这个原理

<div class="box">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>
<script>
  //点击a时，a、b、c回调函数都会执行
$(".box").on("click",".a",function(e){
    console.log(this);
    $(this).removeClass().addClass("b");
})
$(".box").on("click",".b",function(e){
    console.log(this);
    $(this).removeClass().addClass("c");
})
$(".box").on("click",".c",function(e){
    console.log(this);
    $(this).removeClass().addClass("a");
})
</script>