移动开发流量省起来之Zepto

一张图说明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在发展的同时可能因为很多历史遗留问题还有需要兼顾各种并不是主流的浏览器导致代码略臃肿。
 
posted @ 2015-07-15 15:38  走在起点  阅读(263)  评论(0)  编辑  收藏  举报