总体结构
|
|
这里是一个自执行函数的返回值赋值给了Zepto,在下面给window下面的Zepto赋值,我们就可以通过Zepto(“#id”)这样来调用,之后的也是赋值给了window下的$,这也是我们最常见的$(“#id”)
初始化
我们已经知道总体是怎么回事,那么我们就看看自执行函数里面返回的$是什么
|
|
这里可以看出这个$返回了一个初始化函数,这个初始化函数主要的左右是来判断$(“”)这里面到底是什么样式,根据不同的样式来分配给不同的方法处理
|
|
最后调用的是zepto.z(dom, selector)该方法是通过选择器表达式查找DOM
zepto.Z.prototype 继承所有$.fn所有原型方法
|
|
在fn对象里面创建常用的方法
下面是一些用到的知识点
matchesSelector
在SELECTORS API Level 2规范中,为DOM节点添加了一个方法,主要是用来判断当前DOM节点不否能完全匹配对应的CSS选择器规则;如果匹配成功,返回true,反之则返回false。语法如下:
|
|
这个方法在我们做事件委托时就显得非常有用,并且jquery也封装了类似得方法来做委托,示例代码如下:
|
|
zepto的用法
|
|
检测对象基本对象
这是一个十分常见的问题,用 typeof 是否能准确判断一个对象变量,答案是否定的,null 的结果也是 object,Array 的结果也是 object,有时候我们需要的是 “纯粹” 的 object 对象。如何避免呢?比较好的方式是:
|
|
如下面的使用方法
|
|
toString为Object的原型方法,而Array ,function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串…..),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object上原型toString方法。
touch.js
click事件在移动端上会有 300ms 的延迟,同时因为需要 长按,双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库。zepto 实现了’swipe’, ‘swipeLeft’, ‘swipeRight’, ‘swipeUp’, ‘swipeDown’, ‘doubleTap’, ‘tap’, ‘singleTap’, ‘longTap’ 这样一些功能。
MSGesture
Windows 8 Release Preview 的 IE10 中引入了 JavaScript 中的手势识别对象。网站可以创建手势对象,决定处理哪些指针(鼠标、手写笔或触摸)并将手势事件指向相应的元素。然后,浏览器将计算正执行的手势并通过事件通知页面。这样开发人员便可构建出在其他任何本机浏览器中都尚无法实现的手势体验。其中包括多个并发手势(例如,使用您的双手旋转两块拼图)。
我们来看一下这一切是如何在代码中实现的。
在您的网站中处理手势的第一步是实例化手势对象。
|
|
接下来,为该手势提供一个目标元素。浏览器将对该元素触发手势事件。同时,该元素还可以确定事件的坐标空间。
|
|
最后,告知手势对象在手势识别期间处理哪些指针。
|
|
|
|
然后依次在document onready事件里根据touchstart, touchmove, touchend 做了一些封装和判断,然后通过 zepto 自己的事件体系来注册和触发。