移动开发流量省起来之Zepto
来源:互联网 发布:美工笔记本配置2016 编辑:程序博客网 时间:2024/06/08 20:03
移动开发流量省起来之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!!!
然后看看功能方面。
选择器
<html><body> <ul id="items"> <p>This is it!</p> </ul> <script src="http://www.cnphp6.com/archives/zepto1.1.6.js"></script> <script> alert($("#items").html()); </script> </body></html>
追加
<html><body> <ul id="items"> <p>This is it!</p> <p>Hello</p> </ul> <script src="http://www.cnphp6.com/archives/zepto1.1.6.js"></script> <script> $('ul').append('<p>new list item</p>') </script> </body></html>
克隆 (注:zepto的clone()方法不能像jquery的clone()可以同时克隆data和绑定事件)
<html><body> <ul id="items"> <p>This is it!</p> <p>Hello</p> </ul> <script src="http://www.cnphp6.com/archives/zepto1.1.6.js"></script> <script> $('ul').append($("#items").clone()) </script> </body></html>
ajax
$.ajax({ type: 'GET', url: '/projects', data: { name: 'Zepto.js' }, dataType: 'json', timeout: 300, context: $('body'), success: function(data){ this.append(data.project.html) }, error: function(xhr, type){ alert('Ajax error!') } }) $.ajax({ type: 'POST', url: '/projects', data: JSON.stringify({ name: 'Zepto.js' }), contentType: 'application/json' })
因为Zepto是jQuery-compatible的,所有如果你会使用jquery,那么你已经会了Zepto。以上这些用法基本与jquery一致,下面说几个我看到的与jquery不同的地方。
1.Zepto基础库不支持很多css选择器
比如很常用的$(“:selected”),$(“p:eq(1)”),$(“li:first”)这类,不过Zepto的库提供很多拓展的模块,你只需要在他的官网上按需要编译你需要的模块然后保存为zepto.js即可,或者直接使用在线编译,其中如果开启了selector模块,你就能支持大部分的css选择器了。
2.如果你开启了detect模块,那么你就可以用Zepto判断用户设备、操作系统和浏览器的功能(测试了几个还算可以用,不知是否准确)
<html><body> <ul id="items"> <p>This is it!</p> </ul> <!-- 该js必须开启了detect模块 --> <script src="http://www.cnphp6.com/archives/zepto.js"></script> <script> // general device type alert($.os.phone); alert($.os.tablet); // specific OS alert($.os.ios); alert($.os.android); alert($.os.webos); alert($.os.blackberry); alert($.os.bb10); alert($.os.rimtabletos); // specific device type alert($.os.iphone); alert($.os.ipad); alert($.os.ipod); // [v1.1] alert($.os.touchpad); alert($.os.kindle); // specific browser alert($.browser.chrome); alert($.browser.firefox); alert($.browser.safari); // [v1.1] alert($.browser.webview); // (iOS) [v1.1] alert($.browser.silk); alert($.browser.playbook); alert($.browser.ie); // [v1.1] </script> </body></html>
3.如果开启了form模块,就可以对你的表单进行数据序列化,类似jquery的jquery form插件
<html><body> <form> <input name="user" value="xxx" type="text"/> <input name="password" value="123" type="password"/> </form> <!-- 该js必须开启了form模块 --> <script src="http://www.cnphp6.com/archives/zepto.js"></script> <script> var formData = $('form').serializeArray(); alert(formData[0]['name']); alert(formData[1]['name']); alert(formData[0]['value']); alert(formData[1]['value']); </script> </body></html>
4.如果开启了touch模块,你就可以使用tap(触屏点击) 和 swipe(触屏滑动),类似Jquery mobile 插件
<html><body> <style> .delete { display: none; } #items{font-size:30px;}</style> <ul id="items"> <li>List item 1 <span class="delete">DELETE</span></li> <li>List item 2 <span class="delete">DELETE</span></li> </ul> <!-- 该js必须开启了touch模块 --> <script src="http://www.cnphp6.com/archives/zepto.js"></script> <script> $('#items li').swipe(function(){ $('.delete').hide() $('.delete', this).show() }) $('.delete').tap(function(){ $(this).parent('li').remove() }) </script> </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在发展的同时可能因为很多历史遗留问题还有需要兼顾各种并不是主流的浏览器导致代码略臃肿。
0 0
- 移动开发流量省起来之Zepto
- 移动开发流量省起来之Zepto
- 轻量级javascript移动开发库 zepto
- 了解轻量级的移动开发Javascript类库- Zepto.js
- 移动手机应用开发js框架zepto.js入门介绍
- 了解轻量级的移动开发Javascript类库- Zepto.js
- zepto.js - 轻量级的移动开发JavaScript框架
- 移动端开发:使用jQuery Mobile还是Zepto
- zTouch-移动端触屏开发利器(zepto touch扩展)
- 移动端开发:使用jQuery Mobile还是Zepto
- 移动端开发:使用jQuery Mobile还是Zepto
- zepto实现移动端轮播图
- Zepto和Jquery的区别,以及在做移动端开发时,我们为什么选择使用zepto
- 移动测试之-流量测试方案
- 支付宝“移动”起来 移动支付标准之争白热化
- 移动端基础库zepto
- 移动开发js库Zepto.js使用中的一些注意点
- 移动端开发——zepto和jquery mobile的区别
- 2014年第五届蓝桥杯C/C++程序设计本科B组省赛 奇怪的分式(结果填空)
- 代码:打印一个如图所示的菱形
- mac git xcrun error active developer path 错误
- 4. Median of Two Sorted Arrays 两个有序数组的中位数
- Android之Intent Flag的介绍
- 移动开发流量省起来之Zepto
- 2014年第五届蓝桥杯C/C++程序设计本科B组省赛 六角填数(结果填空)
- Swift UIButton
- VMware虚拟机文件夹中各文件作用详解
- hdu 5610 Baby Ming and Weight lifting(思维,逻辑)
- 网络流学习笔记
- Android控制后台音乐播放器暂停,播放
- 编程基础——第一单元 变量、顺序和分支2
- 【C#——温习中体会你的三大结构】