了解轻量级的移动开发Javascript类库- Zepto.js

了解轻量级的移动开发Javascript类库- Zepto.js 现代的javascript类库都非常巨大，看看jQuery就可以了，当你需要创建一个基于移动设备的应用，这些类库显得非常臃肿，记得前段时间我们介绍过的5个jQuery的备选轻量级移动客户端开发(Mobile development)类库？其中就有我们今天即将介绍的zepto.js。 移动设备中使用桌面类库和的几个问题 新酷技术支持下的互联网在最近发展的很快，几乎是跳跃的发展。我们从静态的页面发展到动态的web应用程序，然后到实时的动态高度responsive的web应用。其中最明显的就是移动客户端的而发展。 大家想想，很多用户都使用智能手机，甚至在家里我们也愿意是用平板电脑进行浏览和上网。这类的设备都非常适合进行页面浏览工作。 作为一个开发人员来说，我们需要考虑相关的因素，例如，带宽资源。很多时候不是所有的设备都拥有超棒的硬件条件或者网络状况。 我估计大家已经猜到了我介绍的以上内容。 很多超大的类库jQuery或者Prototype肯定在移动开发中扮演重要的角色，但是依然很多情况下你需要使用更加锐利的类库，相信很多的开发人员都同意我的观点。 所有代码使得一个类库可以兼容所有的浏览器 另外一个很大的问题在于一些很知名的类库都使用了大量代码来兼容不同的浏览器。事实上，jQuery就内建了很多代码用来处理不同浏览器的兼容性问题，这些问题往往对于开发人员是比较难于克服的。事实上，即使现在jQuery很实用了很多代码用来处理不同浏览器的兼容性问题。 但是如果我们需要开发的应用只需要支持特定的设备呢？你是不是觉得还有必要去处理如此多的兼容性问题？ 如果你去掉这些代码，你可以： 去掉代码可以大大提高性能 是的你开发文件更小，帮助客服移动设别带宽问题 是不是觉得我们小题大作了？看看下面的jQuery代码吧： isPlainObject: function( obj ) { // Must be an Object. // Because of IE, we also have to check the presence of the constructor property. // Make sure that DOM nodes and window objects don't pass through, as well if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) { return false; } .... 或者这些： // Perform a simple check to determine if the browser is capable of // converting a NodeList to an array using builtin methods. // Also verifies that the returned array holds DOM nodes // (which is not the case in the Blackberry browser) try { Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType; // Provide a fallback method if it does not work } catch( e ) { // The intended fallback } .... 代码可能并不是很复杂，但是你看到的确处理了很多的不同设备浏览器的问题。如果所有这些代码加起来，最后的性能问题我觉得你不得不考虑。 使用Zepto有什么区别？ 我可以听到大家再说”说的够多的了！告诉我们这个类库“。接下来我们开始介绍它 Zepto是一个javascript的框架用来处理我们上面提到的问题。非常小的一个代码，总共只有8kb。 它删除了处理跨浏览器问题的代码，因此非常的苗条。当初开发的时候，就是用来处理webkit内核浏览器。当然mobile版本的webkit。现在它已经扩展支持桌面浏览器。当然，只支持现代浏器。 别指望它支持IE6这种古董界别的浏览器。 另外一个使得zepto非常轻量级的原因是避免了太多的特性。核心类库不包含过多的功能。甚至是AJAX和动画功能都是作为模块独立存在的。对于那些主要使用类库来处理DOM操作的人来说，这个类库非常棒。 还有一点，zepto的类库和jQuery类库是兼容的。如果你使用jQuery，其实你已经知道如何使用zepto了。 Zepto和jQuery是否可以互换？ 是的！因为Zepto的核心API很大程度的模仿了jQuery类库。目的是为了减少学习难度。很多的方法，例如，处理DOM操作，都使用一样参数，甚至一样的顺序。我们看看下面例子： $('#gbin1element').html("Hey! Are you using gbin1.com?"); 看起来是不是非常熟悉？实际上和你使用jQuery来开发代码一模一样。而不仅仅是这一个方法。很多其它的功能API类似，例如，AJAX。 另一方面， API并不是100%的一样。Zepto放弃了一些在jQuery中破坏你的代码的方法。事实上，zepto是jQuery的一个子集，你可能会错过一些特别的内建功能，例如，Deferred。你不能指望在zepot和jQuery中方法执行一样。 对于我来说，最大的障碍在于很多方法都来自于jQuery，但是有不同的特性。有些时候最让人恼火的是你认为这么使用正确，但是其实并不正确。clone方法来拷贝事件handler就是一个很好的例子。如果不看代码的话，绝对不知道这个问题。 了解核心的API 废话不说了，这里我们开始介绍核心API。 修改一个容器的HTML内容 这是典型的DOM操作：读取并且修改HTML的内容。使用zepto，你可以调用html方法，传递新的HTML，如下： var containerText = $('#gbin1element').html(); 或者修改内容： $('#gbin1element').html("do you use gbin1.com"); 是不是很简答？ 向一个容器添加或者前端添加元素 和jQuery类似，zepto也使用append和preappend方法。如下： $('#gbin1element').append("

This is the appended element.

"); 或者 $('#gbin1element').prepend("

This is the appended element.

"); 事件(Events) Zepto提供了一堆非常容易使用的方法。很多都是基于on方法，是不是和jQuery很类似？ $('#gbin1element').on('click', function(e){ // 添加你需要执行的代码 }); 如果你觉得需要使用bind，delegate或者live，千万不要，因为和jQuery一样，这些方法都已经deprecated了。 AJAX 很多现代类库都提供使用简答的AJAX方法，zepto也不例外。 $.ajax({ type: 'POST', url: '/project', data: { name: 'gbin1.com' }, dataType: 'json', success: function(data){ //成功时执行的方法 }, error: function(xhr, type){ alert('Hi, Not work?') } }); 看起来复杂，其实非常明了。 创建一个AJAX对象并且传递参数 指定POST方法。缺省应该是GET 指定POST处理的URL 指定需要传递到服务器URL的参数，这里我们创建了gbin1.com这个值。 指定方法成功后或者失败执行的callback。 对于jQuery来说，它拥有分开的GET和POST及其load方法 动画 那么动画如何处理呢？Zepto提供了animate方法用来处理动画： $('#gbin1element').animate({ opacity: 0.50, top: '30px', color: '#656565' }, 0.5) 我们只需要选择执行动画的元素，调用anmiate方法，指定动画属性，zepto会帮助我们处理其它。 如果你需要显示/隐藏元素，调用toggle方法。 到这里我相信大家都非常清楚了 - Zepto的DOM，动画和事件API都不同程度模仿了jQuery，我们都知道jQuery非常擅长处理这些。如果你使用过jQuery，那么使用zepto绝对很简单。 触摸事件及其其它超棒的特性 Zepto也提供了对于触摸设备的事件支持，如下： swipe tap doubleTap longTap - 当你长按超过750ms会触发这个事件 这里是一个例子：

• List item 1 DELETE
• List item 2 DELETE

<script> // show delete buttons on swipe $('#items li').swipe(function(){ $('.delete').hide() $('.delete', this).show() }) // delete row on tapping delete button $('.delete').tap(function(){ $(this).parent('li').remove() }) </script> 当你挥击一个项目，其它项目的删除按钮会隐藏，点击删除，这个项目会被删除。 总结 以上就是所有的Zepto介绍，可能仁者见仁，智者见智，不同人对于这个类库理解也不一样。可能你依然愿意使用jQuery来处理web应用，但是还是希望你能够使用zepto来尝试一样，毕竟俩者的代码构造变化不大，希望大家觉得这篇文章有帮助，如果你有问题，请给我们留言，谢谢！