zepto-模块|学习笔记

简介: 快速学习 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、slideDownslideUp 方法,但 zepto 中没有 slideDownslideUp 方法

这就符合了 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

相关文章
|
JavaScript
JS 学习笔记一 (基础)
JS 学习笔记一 (基础)
65 0
|
前端开发
前端学习笔记202306学习笔记第三十五天-js-js中内置的类2
前端学习笔记202306学习笔记第三十五天-js-js中内置的类2
34 0
|
前端开发
前端学习笔记202306学习笔记第三十五天-js-js中内置的类1
前端学习笔记202306学习笔记第三十五天-js-js中内置的类1
35 0
|
前端开发
前端学习笔记202306学习笔记第三十六天-js-js中内置函数2
前端学习笔记202306学习笔记第三十六天-js-js中内置函数2
37 0
|
前端开发
前端学习案例16-js中的HMR
前端学习案例16-js中的HMR
68 0
前端学习案例16-js中的HMR
|
JavaScript
js基础笔记学习91-window对象2
js基础笔记学习91-window对象2
45 0
js基础笔记学习91-window对象2
|
JavaScript
js基础笔记学习90-window对象1
js基础笔记学习90-window对象1
53 0
js基础笔记学习90-window对象1
|
JavaScript
js基础笔记学习294引入jquery
js基础笔记学习294引入jquery
86 0
js基础笔记学习294引入jquery
|
JavaScript 前端开发 API
移动端框架zepto.js
移动端框架zepto.js
67 0
|
JavaScript 前端开发 API
【青训营】写好JS——组件封装(上)
【青训营】写好JS——组件封装(上)
231 0
【青训营】写好JS——组件封装(上)
下一篇
无影云桌面