zepto-模块|学习笔记

开发者学堂课程【移动 Web 前端开发：zepto-模块】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/594/detail/8503

zepto-模块

zepto 默认构建包含以下模块：core，ajax，event，form，IE

除了这几个默认模块还有一下模块需要了解；

Ÿ zepto：

核心模块;包含许多方法，比如 each 方法就是核心方法。

Ÿ event：

通过 on()& off()  处理事件，jQuery 中也有 on()& off()  处理事件模块，所以可以认为是事件绑定模块。

Ÿ ajax：

XIMLHttpRequest 和 JSONP 实用功能

Ÿ form：

表单模块，表单序列化和提交web表单，jQuery 中有关于表单的模块，后面 ajax 中也会用到。

Ÿ ie：

增加支持桌面的 Internet Explorer 10+ 和 Windows Phone8，意味这 Zepto 也想适用IE的高版本浏览器，所以才会有 ie 模块。 

以上是 Zepto 核心的 5 个模块，下面是其他模块：

Ÿ detect：

包含两个模块 $.os 和 $.browser，通过 detect 模块提供 $.os 系统相关信息和$.browser 是浏览器相关信息。

detect 是封装好的模块，而这个封装好的模块是怎么封装的，系统信息是从哪里来的，

下面做一个演示：

在浏览器新标签中打开 zepto.min.js 后，进入浏览器控制台 Consele 界面，然后打开 navigator 里面的 userAgent，

这个 navigator.userAgent 是浏览器自带的属性，与 windows 下面的 document一样的，是与 html 结构相关的 BOM，

所以这个 navigator.userAgent 是由浏览器提供的，比如说当前系统是64的，内核时 webkit 的内核，还有现在适用的谷歌版本为47.0.2526.73的，非常清除。

所以 detect 里提供系统相关信息和浏览器相关信息，

如：

>navigator . userAgent

<"Mozi1la/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36"

Ÿ fx:

这个模块里面有 The animate() 方法，

jQuery 中也有 The animate() 动画。

Ÿ fx_methods：

jQuery 中已经封装好的动画方法有 show,hide,toggle. 和 fade*()，fadeIn、 fadeOut、slideDown、slideUp 方法，但 zepto 中没有 slideDown、slideUp 方法。

这就符合了 zepto 的 API 并不是百分比覆盖，有些有而有些没有。

Ÿ assets：

实验性支持从 DOM 中移除 Image 元素后清理 IOS 的内存。

Ÿ data:

 一个全面的 data() 方法，能够在内存中存储任意对象。

Ÿ deferred：

提供 s.Deferred promises API.依赖 'allbacks" 模块，当包含这个模块时候，$.aiex()  支持 promise 接口链式的回调。

Ÿ callbacks：

为"deterred 模块提供 Scallbacks 。

Ÿ selector：

 实验性的支持 jQuery CSS 表达式实用功能，比如 ${'div:first')和el.is(" :visible')。

注意是 jQuery 的 CSS 表达式，不是 CSS 的。jQuery 中${'div:first')表达式可以认为是扩展性的选择器，CSS 当中是无效的，jQuery 中扩展性的选择器在 selector 模块当中也能用。

visible 是选中当前所有显示的元素，对于 hidden 是选中当前所有隐藏的元素。想这些选择器是扩展性的，CSS 本身是没有的。

Ÿ touch：

在触摸设备上触发 1ap- 和 swipe- 相关事件。这适用于所有的 touch (IOS, Android) 和 ' pointer' 事件 (Windows Phone)。

touch 是已经封装好的手势事件模块，提供了 tap 相关事件，之前 t ap 中提过某些移动端框架已经提供了这个事件，此处就是 Zepto 当中的 touch 提供的 tap 事件。

swipe 就是滑动手势事件，左右上下滑动。同时还兼容了 Windows Phone，而Windows Phone 上面使用的就不是 touch 了而是 pointer。

Ÿ gesture：

在触摸设备上触发 pinch 手势，放大缩小的事件，在放大缩小过程中还可以进行方向的转换，但使用不多，因为存在系统兼容问题，ios 系统兼容而安卓却不兼容。

Ÿ stack：

提供 andself& end()  链式调用方法，end 是返回上一级查询。查找 div 再找到 find后跟上end添加一个css样式，应该是添加 css 样式到 div 上如：$(‘div’).find(‘p’).end().css();css 加到 div 上，而$(‘div’).find(‘p’).andSelf().css();css 加到 div 和 Self 上。

Ÿ ios3：

String. prototype trim和Aray.protoype.reduce 方法(如果他们不存在) ,以兼 容 IOS 3.x