移动开发流量省起来之Zepto
事情是这样的：最近开发的一个手机网站客户反应访问起来特别慢，刷了半天才能看到页面，然后问我们是不是网站出问题了。于是我赶紧找了各种手机测试一下，没有问题，首先排除程序错误的问题，然后服务器用的又是云服务器，只要不是在国外应该不会太慢才对，打听了一下，原来是该客户用的是2G网络访问的，说是在信号不好的地方几乎刷不出页面。。。
虽然说客户的网络质量令人堪忧，不过作为一个有点追求（强迫症）的攻城狮还是决定帮他优化一下。
页面另存为，打开一个页面所需要加载的所有资源包括图片、js、html一共才300K（jquery库特地使用了压缩版的，只有100K左右。。。），将图片各种压缩，最终还是有160多K，看来只有把jquery库给去了，但是将所有的jquery代码改写成原生js又有一种想死的感觉，而且很多兼容问题层出不穷，那么有没有一个既像jquery这么好用的，又能省流量的js库呢？答案是：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在发展的同时可能因为很多历史遗留问题还有需要兼顾各种并不是主流的浏览器导致代码略臃肿。
分类: html/css/js