移动开发流量省起来之Zepto

最新推荐文章于 2024-07-24 16:18:16 发布

weixin_30469895

最新推荐文章于 2024-07-24 16:18:16 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mopagunda/p/4648486.html

本文对比了Zepto.js与jQuery的大小及功能，Zepto.js更轻量且专注移动端，支持选择器、追加、克隆、AJAX等功能，并可通过模块化方式扩展更多功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一张图说明Zepto.js的优势：

jquery 1.x最新版284KB,压缩后94KB；jquery2.x最新版247KB，压缩后84KB；Zepto最新版54KB，压缩后9KB！！！

然后看看功能方面。

选择器

1 <html><body> 2 <ul id="items"> 3 <p>This is it!</p> 4 </ul> 5 <script src="./zepto1.1.6.js"></script> 6 <script> 7  alert($("#items").html()); 8 </script> 9 </body></html>

追加

 1 <html><body>  2 <ul id="items">  3 <p>This is it!</p>  4 <p>Hello</p>  5 </ul>  6 <script src="./zepto1.1.6.js"></script>  7 <script>  8  $('ul').append('<p>new list item</p>')  9 </script> 10 </body></html>

克隆（注：zepto的clone()方法不能像jquery的clone()可以同时克隆data和绑定事件）

 1 <html><body>  2 <ul id="items">  3 <p>This is it!</p>  4 <p>Hello</p>  5 </ul>  6 <script src="./zepto1.1.6.js"></script>  7 <script>  8  $('ul').append($("#items").clone())  9 </script> 10 </body></html>

ajax

 1 $.ajax({
 2   type: 'GET',
 3  url: '/projects',  4  data: { name: 'Zepto.js' },  5  dataType: 'json',  6  timeout: 300,  7  context: $('body'),  8  success: function(data){  9  this.append(data.project.html) 10  }, 11  error: function(xhr, type){ 12  alert('Ajax error!') 13  } 14 }) 15 16 $.ajax({ 17  type: 'POST', 18  url: '/projects', 19  data: JSON.stringify({ name: 'Zepto.js' }), 20  contentType: 'application/json' 21 })

因为Zepto是jQuery-compatible的，所有如果你会使用jquery，那么你已经会了Zepto。以上这些用法基本与jquery一致，下面说几个我看到的与jquery不同的地方。

1.Zepto基础库不支持很多css选择器

比如很常用的$(":selected"),$("p:eq(1)"),$("li:first")这类，不过Zepto的库提供很多拓展的模块，你只需要在他的官网上按需要编译你需要的模块然后保存为zepto.js即可，或者直接使用在线编译，其中如果开启了selector模块，你就能支持大部分的css选择器了。

2.如果你开启了detect模块，那么你就可以用Zepto判断用户设备、操作系统和浏览器的功能(测试了几个还算可以用，不知是否准确)

 1 <html><body>  2 <ul id="items">  3 <p>This is it!</p>  4 </ul>  5 <!-- 该js必须开启了detect模块 -->  6 <script src="./zepto.js"></script>  7 <script>  8 // general device type  9 alert($.os.phone); 10 alert($.os.tablet); 11 12 // specific OS 13 alert($.os.ios); 14 alert($.os.android); 15 alert($.os.webos); 16 alert($.os.blackberry); 17 alert($.os.bb10); 18 alert($.os.rimtabletos); 19 20 // specific device type 21 alert($.os.iphone); 22 alert($.os.ipad); 23 alert($.os.ipod); // [v1.1] 24 alert($.os.touchpad); 25 alert($.os.kindle); 26 27 // specific browser 28 alert($.browser.chrome); 29 alert($.browser.firefox); 30 alert($.browser.safari); // [v1.1] 31 alert($.browser.webview); // (iOS) [v1.1] 32 alert($.browser.silk); 33 alert($.browser.playbook); 34 alert($.browser.ie); // [v1.1] 35 </script> 36 </body></html>

3.如果开启了form模块，就可以对你的表单进行数据序列化，类似jquery的jquery form插件

 1 <html><body>  2 <form>  3 <input name="user" value="xxx" type="text"/>  4 <input name="password" value="123" type="password"/>  5 </form>  6 <!-- 该js必须开启了form模块 -->  7 <script src="./zepto.js"></script>  8 <script>  9 var formData = $('form').serializeArray(); 10  alert(formData[0]['name']); 11  alert(formData[1]['name']); 12  alert(formData[0]['value']); 13  alert(formData[1]['value']); 14 </script> 15 </body></html>

4.如果开启了touch模块，你就可以使用tap(触屏点击) 和 swipe(触屏滑动),类似Jquery mobile 插件

 1 <html><body>  2  3 <style>  4 .delete { display: none; }  5 #items{font-size:30px;}</style>  6  7 <ul id="items">  8 <li>List item 1 <span class="delete">DELETE</span></li>  9 <li>List item 2 <span class="delete">DELETE</span></li> 10 </ul> 11 12 <!-- 该js必须开启了touch模块 --> 13 <script src="./zepto.js"></script> 14 <script> 15 $('#items li').swipe(function(){ 16  $('.delete').hide() 17  $('.delete', this).show() 18 }) 19 20 $('.delete').tap(function(){ 21  $(this).parent('li').remove() 22 }) 23 </script> 24 </body></html>

注：Zepto的swipe事件在某些Android手机(如安卓4.4)仍存在不起作用的情况。期待Zepto修复这个bug。

这么多有用的模块如果用jquery来实现，除了需要加载那个压缩后还有90多KB的核心库外，我还要加载各种插件诸如jquery mobile,jquery form,jquery detect等等，这个大小不用我说，要多臃肿多臃肿，而Zepto全部开启模块后只有39KB，所以说作为业绩良心省流量的手机网站还是使用Zepto吧。

总的来说，Zepto像是一个Jquery体系的一个精简版，专注于移动端，兼顾主流PC浏览器，对于Jquery库的文件大小问题我猜想Jquery在发展的同时可能因为很多历史遗留问题还有需要兼顾各种并不是主流的浏览器导致代码略臃肿。

转载至：深蓝的镰刀

转载于:https://www.cnblogs.com/mopagunda/p/4648486.html