移动端:zepto框架

zepto框架


一、zepto框架概述

  1. Zepto是一个轻量级的针对现代高级浏览器的JavaScript
  2. 库兼容性:
    • Zepto.js是专门为现代智能手机浏览器推出的JavaScript框架
    • Zepto的一些可选功能专门针对移动浏览器,因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案
  3. 优势:
    • 更小型的JavaScript框架
    • 完全兼容jQuery语法
    • 精简大量浏览器兼容性代码,更轻量
    • 封装了移动端手势
  4. 下载:
    • www.zeptojs.cn 网站上通过点击Download打开下载页面
    • 下载的zepto文件只要包括core、Ajax、Event、Form、IE这些模块。其中并没有包括Effects和Touch模块。所以后续在使用zepto的这些功能的时候还需要添加相关的插件或重新下载完整版的zepto
  5. 引入:
    • <body>     <script src=zepto.min.js></script>     </body>
  6. CDN加速服务:http://cdn.uedsc.com/zepto/ 【CDN内容分发网络】

二、 zepto和jQuery的区别

  1. 针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互,Zepto是不支持IE浏览器的
  2. Dom操作的区别:添加id时jQuery不会生效而Zepto会生效
  3. 事件触发的区别:使用jQuery时load事件的处理函数不会执行;使用Zepto时load事件的处理函数会执行
  4. 事件委托的区别:zepto中,选择器上所有的委托事件都依次放入到一个队列中,而在jquery中则委托成独立的多个事件
  5. width()和height()的区别
    • Zepto由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css(‘width‘)返回包含border等的结果
    • jQuery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border)
  6. offset()的区别
    • Zepto返回{top,left,width,height}
    • jQuery返回{width,height}
    • Zepto无法获取隐藏元素宽高,jQuery 可以
  7. Zepto中没有为原型定义extend方法而jQuery有
  8. Zepto的each方法只能遍历数组,不能遍历JSON对象

三、 zepto和jQuery相同方法或属性

  • $(selector, [context])
    • $(<Zepto collection>)
    • $(<DOM nodes>)
    • $(htmlString)
    • $(htmlString, attributes)
    • Zepto(function($){ ... })

技术图片

四、zepto独有特效

  • CSS transform
    • translate(X|Y|Z|3d)
    • rotate(X|Y|Z|3d)
    • scale(X|Y|Z)
    • skew(X|Y)
  • tap事件类似PC端上的click事件,它表示手指触摸某个元素会被触发
  • Touch
    • tap :元素被触摸的时候触发
    • singleTap and doubleTap:这一对事件可以用来检测元素上的单击和双击
    • longTap:当一个元素被按住超过750ms触发
    • swipe、swipeLeft、swipeRight、swipeUp、swipeDown:当元素被划过时触发

五、 完整Zepto文件

  • 通过www.zeptojs.cn网站下载的默认核心文件Zepto在这里就不能使用,为什么?
  • 默认的zepto文件不包括Effects和Touch模块
    • 通过访问github地址:https://github.com/madrobby/zepto下载到所需要的完整zepto文件

六、项目案例

  1. 滑动解锁
    • 锁屏时间更新
      • 时间使用插件完成:http://momentjs.cn/
      • 定时器
    • 调用锁屏插件
      • 插件地址:http://ignitersworld.com/lab/patternLock.html
    • 插件使用
      • patternLock.js
      • md5.js
  2. 首页界面设计
    • font-awesome字体图标 http://www.fontawesome.com.cn/faicons/

 

相关文章