必威体育Betway必威体育官网
当前位置:首页 > IT技术

移动端开发教程-zepto.js入门教程

时间:2019-10-14 16:45:44来源:IT技术作者:seo实验室小编阅读:84次「手机版」
 

zepto

11-移动端开发教程-zepto.js入门教程

Zepto.js是一个轻量级的针对现代浏览器javaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。

>  转者有话说:这里有坑,不要以为会jQuery就可以了,还是要看一下常用的api。比如zepto中$.ajax 指定请求方法是用type,如果后端只接受post请求,你就好好查查为什么吧,今天就是遇到这个坑,明明用method指定了post请求方法,卡了半个钟。所以今天才有这篇博客转载

1. Why Zepto.js?

  1. API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js
  2. Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发。
  3. Zepto增加了针对移动端的触摸和手势相关的事件
  4. Zepto模块化做的很灵活,可以自定义组合模块

2. Zepto.js下载

代码下载:zeptojs中文站 、 github

2.1 自定义Zepto.js文件模块

zepto默认是有五个模块的,分别为zepto、event、ajax、form、ie,这五个模块被称为核心模块。

moduledefaultdescription
zepto核心模块;包含许多方法
event通过on()off()处理事件
ajaxXMLHttprequestjsonp 实用功能
form序列化 & 提交web表单
ie增加支持桌面的Internet Explorer 10+和windows Phone 8。
detect 提供 $.os和 $.browser消息
fx The animate()方法
fx_methods 以动画形式的 showhidetoggle, 和 fade*()方法.
assets 实验性支持从DOM中移除image元素后清理iOS内存
data 一个全面的 data()方法, 能够在内存中存储任意对象。
deferred 提供 $.Deferredpromises API. 依赖"callbacks" 模块. 当包含这个模块时候, $.ajax() 支持promise接口链式的回调。
callbacks 为"deferred"模块提供 $.Callbacks
selector 实验性的支持 jQuery CSS 表达式 实用功能,比如 $('p:first')el.is(':visible')
touch 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。
gesture 在触摸设备上触发 pinch 手势事件。
stack 提供 andSelfend()链式调用方法
ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ,以兼容 iOS 3.x.

如果需要其他非核心模块,需要下载github的源码自行编译。

自定义编译步骤:

  1. 第一步:下载zeptojs源码:源码
  2. 第二步:解压源码,并打开命令行进入源码根目录
# 打开命令行工具,进入解压的zepto目录
$ cd zepto-master
# 安装npm包依赖
$ npm install
  1. 第三步:修改make编译文件的依赖模块
modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')
## 修改:增加 touch gesture fx fx_methods等模块 ## 
modules = (env['MODULES'] || 'zepto event ajax form ie touch gesture fx fx_methods').split(' ')

  1. 第四步:编译最终的zeptojs
$ npm run-script dist

3. zepto注意事项

  1. 注意某些模块必须打包进zeptojs文件才能用,比如:fx_methods模块的方法:hide() show()等动画方法。
  2. Zepto只设置全局变量$指向它本身。 没有Zepto.noConflict方法。
  3. 不支持jQuery CSS 扩展, 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器
  4. Zepto.js: 无法获取隐藏元素宽高;
  5. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
  6. 移动端端点透需要阻止默认行为来规避。

其实还有很多方法的缺失,所以大家自己在写代码的时候多留意下zepto和jQuery的区别吧,在此就不多赘述了。

4. zepto的应用demo

用法基本跟jQuery一致,直接上手就行,不用客气。

<ul>
    <li>list item 1</li>
    <li class="yaotaiyang">list item 2</li>
    <li>list item 3</li>
</ul>
<p>a paragraph</p>

<script type="text/JavaScript">
$(function() {
  $("p").on('click', function(e) {
    $("li").toggleClass("yaotaiyang");
  });
});
</script>

5. 总结

zepto.js确实非常小巧,而且非常讨巧的利用了大家熟悉jQuery的优势,确实非常可爱的一个js库,设计的模块中庸而又实用,在移动端的触屏事件封装的很不错,移动端web开发值得推荐。

作者:FlyDragon

出处:http://www.cnblogs.com/fly_dragon/

关于作者:专注于微软平台项目架构、管理和企业解决方案。如有问题或建议,请多多赐教!

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通[email protected] 联系我,非常感谢。

相关阅读

JS Binding 技术(1)

背景 Lynx 作为一个基于 JavaScript 语言(后续简称 JS )的跨平台开发框架,与 JS 的通信是”与生俱来”的,框架和 JS 引擎打交道是必不

Json详解以及fastjson使用教程

Json是一种轻量级的数据交换格式,采用一种“键:值”对的文本格式来存储和表示数据,在系统交换数据过程中常常被使用,是一种理想的数据

从恶意软件获得的新姿势——通过rundll32.exe执行js原

今年7月份,国外研究机构发现了一个比较新型的恶意软件,这个恶意软件不会在系统上安装任何文件,而是藏身在windows的注册表中通过rund

js 中汉字和Unicode 互转

   首先,什么是Unicode,百科知识:Unicode(统一码、万国码、单一码)是计算机科学领域里的一项业界标准,包括字符集、编码方案等;Unicode

JSTL

使用JSTL: 引入JSTL的相关的jar包. 在页面中引入标签库.<%@ taglib uri=”” prefix=””%> jstl标签 <body> <h1>jst

分享到:

栏目导航

推荐阅读

热门阅读