移动开发Javascript类库- Zepto.js

zepto.js是一个专为mobile WebKit浏览器(如：Safari和Chrome)而开发的一个JavaScript框架。Github 上面的源代码。

中文手册参考http://www.360weboy.com/handbook/zepto/index.html

Zepto 的兼容平台和浏览器如下：

桌面浏览器：

Safari 5+ (Mac, Win)
Chrome 5+ (Win, Mac, Linux, Chrome OS)
Mozilla Firefox 4+ (Win, Mac, Linux)
Opera 10+ (Win, Mac, Linux)

移动浏览器：

iOS 4+ Safari
Chrome for Android
Chrome for iOS
Android 2.2+ Browser
webOS 1.4.5+ Browser
BlackBerry Tablet OS 1.0.7+ Browser
Amazon Silk 1.0+
Firefox for Android
Firefox OS Browser
Practically any WebKit-based browsers/runtimes

Zepto 不兼容 IE，不过因为语法兼容 jQuery，IE 下可以使用 jQuery 替代：

<script>
   document.write('<script src=' +
   ('__proto__' in {} ? 'zepto' : 'jquery') +
   '.js><\/script>')
</script>

Zepto能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JS框架，是超轻量级的，只有5KB。zepto.js的语法借鉴并且兼容jQuery。 jQuery 的 ajax，addClass，find，next，toggle，wrap等主流的 jQuery API 都有了，如下：

方法

除了与jQuery相同的$(“#id”) , $(“.classname”) , $(“tagName”) 相当之外，还可以直接创建元素$(“<p>this is p</p>”)，而根据官方文档应该还有另外一种方法创建元素。

$.each 递归调用

$.extend 将多个对象的属性合到目标对象中去

$.fn.方法名 —— 可以调用所有的方法

$.is….普通是判断方法，内部为 return value instanceof Array/Object….

$.map 将一个数组转换为另一个数组（需要返回而非打印）

生成新数组

addclass(“classname”) 为元素添加class=classname

另外添加了 touch events。可以长按，滑动，就如使用 iOS 或者 Android 一样。

轻触：tap(解决click在移动端延迟的200-300ms)

双击：doubleTap

长按：longTap

滑动：swipe

滑动自定方向：swipeLeft, swipeRight, swipeUp, swipeDown

Github 上面Zepto 源码中有 14 个模块

polyfill，zepto，detect，event，ajax，form，fx 这7个就是标准版包含的模块
fx_methods 有了这个模块之后，.show() .hide() 等几个方法才能支持动画了，比如 .show('fast')
data 提供对 .data() 方法的完整支持，像 jQuery 一样用内存对象存储
assets 移除 img 元素后做一些特殊处理，用来清理内存
selector 更多的选择器的支持，后面会提到
touch 对触摸事件的支持，比如 tap 事件

Zepto使用过程中注意事项

元素的尺寸计算

首先 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) ，注意大小写！

.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()。

tap事件阻止冒泡的方法

$("a.btn").on("tap",function(e){
   e.stopPropagation();//该方法不起作用
   $("div.panel").show();
});
$(document).on("tap",function(e){
   $("div.panel").hide();
});

修改后的

$("a.btn").on("tap",function(){
    $("div.panel").show();
});
$(document).on("tap",function(e){
    if(!$(e.target).hasClass("btn")){
       $("div.panel").hide();
    }
});