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

 
jquery 1.x最新版284KB,压缩后94KB;jquery2.x最新版247KB,压缩后84KB;Zepto最新版54KB,压缩后9KB!!!
 
然后看看功能方面。
 

选择器

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

追加

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

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

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

ajax

  1. 1 $.ajax({
  2. 2 type: 'GET',
  3. 3 url: '/projects',
  4. 4 data: { name: 'Zepto.js' },
  5. 5 dataType: 'json',
  6. 6 timeout: 300,
  7. 7 context: $('body'),
  8. 8 success: function(data){
  9. 9 this.append(data.project.html)
  10. 10 },
  11. 11 error: function(xhr, type){
  12. 12 alert('Ajax error!')
  13. 13 }
  14. 14 })
  15. 15
  16. 16 $.ajax({
  17. 17 type: 'POST',
  18. 18 url: '/projects',
  19. 19 data: JSON.stringify({ name: 'Zepto.js' }),
  20. 20 contentType: 'application/json'
  21. 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. 1 <html><body>
  2. 2 <ul id="items">
  3. 3 <p>This is it!</p>
  4. 4 </ul>
  5. 5 <!-- js必须开启了detect模块 -->
  6. 6 <script src="./zepto.js"></script>
  7. 7 <script>
  8. 8 // general device type
  9. 9 alert($.os.phone);
  10. 10 alert($.os.tablet);
  11. 11
  12. 12 // specific OS
  13. 13 alert($.os.ios);
  14. 14 alert($.os.android);
  15. 15 alert($.os.webos);
  16. 16 alert($.os.blackberry);
  17. 17 alert($.os.bb10);
  18. 18 alert($.os.rimtabletos);
  19. 19
  20. 20 // specific device type
  21. 21 alert($.os.iphone);
  22. 22 alert($.os.ipad);
  23. 23 alert($.os.ipod); // [v1.1]
  24. 24 alert($.os.touchpad);
  25. 25 alert($.os.kindle);
  26. 26
  27. 27 // specific browser
  28. 28 alert($.browser.chrome);
  29. 29 alert($.browser.firefox);
  30. 30 alert($.browser.safari); // [v1.1]
  31. 31 alert($.browser.webview); // (iOS) [v1.1]
  32. 32 alert($.browser.silk);
  33. 33 alert($.browser.playbook);
  34. 34 alert($.browser.ie); // [v1.1]
  35. 35 </script>
  36. 36 </body></html>

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

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

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

  1. 1 <html><body>
  2. 2
  3. 3 <style>
  4. 4 .delete { display: none; }
  5. 5 #items{font-size:30px;}</style>
  6. 6
  7. 7 <ul id="items">
  8. 8 <li>List item 1 <span class="delete">DELETE</span></li>
  9. 9 <li>List item 2 <span class="delete">DELETE</span></li>
  10. 10 </ul>
  11. 11
  12. 12 <!-- js必须开启了touch模块 -->
  13. 13 <script src="./zepto.js"></script>
  14. 14 <script>
  15. 15 $('#items li').swipe(function(){
  16. 16 $('.delete').hide()
  17. 17 $('.delete', this).show()
  18. 18 })
  19. 19
  20. 20 $('.delete').tap(function(){
  21. 21 $(this).parent('li').remove()
  22. 22 })
  23. 23 </script>
  24. 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在发展的同时可能因为很多历史遗留问题还有需要兼顾各种并不是主流的浏览器导致代码略臃肿。
 

移动开发流量省起来之Zepto的更多相关文章

  1. 手机开发类型jquery的框架Zepto(API)

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. http://www.html-5.cn/M ...

  2. Android开发——流量统计

    1. 获取应用UID 在设备的proc目录下我们可以看到一些比较熟悉的目录/文件,比如data,system,cpuinfo(获取CPU信息)等,其中uid_stat的各个以应用Uid命名的目录下,便 ...

  3. 移动端开发:使用jQuery Mobile还是Zepto

    原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobil ...

  4. Zepto

    移动开发流量省起来之Zepto 事情是这样的:最近开发的一个手机网站客户反应访问起来特别慢,刷了半天才能看到页面,然后问我们是不是网站出问题了.于是我赶紧找了各种手机测试一下,没有问题,首先排除程序错 ...

  5. 【Hadoop离线基础总结】流量日志分析网站整体架构模块开发

    目录 数据仓库设计 维度建模概述 维度建模的三种模式 本项目中数据仓库的设计 ETL开发 创建ODS层数据表 导入ODS层数据 生成ODS层明细宽表 统计分析开发 流量分析 受访分析 访客visit分 ...

  6. zepto源码学习-01-整体感知

    在公司一直做移动端的项目,偶尔会做点PC端的东西,但基本上都是和移动端打交道. 移动端嘛必须上zepto,简单介绍下Zepto:它是一个面向高级浏览器的JavaScript框架的,实现JQuery的大 ...

  7. Zepto的天坑汇总

    前言 最近在做移动端开发,用的是zepto,发现他跟jquery比起来称之为天坑不足为过,但是由于项目本身原因,以及移动端速度要求的情况下,也只能继续用下去. 所以在这里做一下汇总 对img标签空sr ...

  8. 使用MVVM框架(avalonJS)进行快速开发

    背景 在运营活动开发中,因为工作的重复性很大,同时往往开发时间短,某些情况下也会非常紧急,导致了活动开发时间被大大压缩,同时有些活动逻辑复杂,数据或者状态变更都需要手动渲染,容易出错,正是因为这些问题 ...

  9. android app 流量统计

    https://blog.csdn.net/yzy9508/article/details/48300265 | android 数据流量统计 - CSDN博客https://blog.csdn.ne ...

随机推荐

  1. EF – 1.模式

      3种数据库 code first model first database first       创建EF http://www.cnblogs.com/tangge/p/3834578.htm ...

  2. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  3. 与你相遇好幸运,Sail.js创建.sailsrc文件

    在项目根目录下创建.sailsrc文件 {  "generators": {    "modules": {}  },  "hooks": ...

  4. Nginx详解(一)

    1.Nginx是什么? Nginx就是反向代理服务器. 首先我们先来看看什么是代理服务器,代理服务器一般是指局域网内部的机器通过代理服务发送请求到互联网上的服务器,代理服务器一般作用于客户端.比如Go ...

  5. ASP.NET WebApi Document Helper

    本项目实现了ASP.NET WebApi 接口文档的自动生成功能. 微软出的ASP.NET WebApi Help Page固然好用,但是我们项目基于Owin 平台的纯WebApi 项目,不想引入MV ...

  6. JavaScript高级程序设计 读书笔记

    第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...

  7. Oracle 监听器

    Oracle监听器listener是一个重要的数据库服务器组件,在整个Oracle体系结构中,扮演着重要的作用. 监听器Lisener功能 从当前的Oracle版本看,Listener主要负责下面的几 ...

  8. 如何学习FPGA?FPGA学习必备的基础知识

    如何学习FPGA?FPGA学习必备的基础知识 时间:2013-08-12 来源:eepw 作者: 关键字:FPGA   基础知识       FPGA已成为现今的技术热点之一,无论学生还是工程师都希望 ...

  9. 聊聊传统oo和js的某些对比——对象/函数/new关键字等

    自己的学习记录,写的短点可以以后短时间内理清一些疑惑,看前要求你至少了解js中关于原型链等基本概念,因为文章直接以总结的形式理出知识点,没有去解释一些基本的概念! 1.1.熟记两句话,预预热 1. 函 ...

  10. r0遍历系统进程方法总结

    方法1: ZwQuerySystemInformation 这个方法网上一搜一大堆,不举例了 方法2:暴力枚举PID枚举进程,代码: NTSTATUS DriverEntry(PDRIVER_OBJE ...