您好,欢迎访问一九零五行业门户网

Zepto源码中Gesture模块介绍

gesture 模块基于 ios 上的 gesture 事件的封装,利用 scale 属性,封装出 pinch 系列事件。
源码版本本文阅读的源码为 zepto1.2.0
gitbook《reading-zepto》
整体结构;(function($){ if ($.os.ios) { var gesture = {}, gesturetimeout $(document).bind('gesturestart', function(e){ ... }).bind('gesturechange', function(e){ ... }).bind('gestureend', function(e){ ... }) ;['pinch', 'pinchin', 'pinchout'].foreach(function(m){ $.fn[m] = function(callback){ return this.bind(m, callback) } }) } })(zepto)
注意这里有个判断 $.os.ios ,用来判断是否为 ios 。这个判断需要引入设备侦测模块 detect 。这个模块利用 useragent 来进行设备侦测,里面是一大堆正则表达式,所以这个模块后面是不打算分析的了。
然后是监测 gesturestart 、gesturechange、 gestureend 事件,根据这三个事件,可以组合出 pinch 、pinchin 和 pinchout 事件。其实就是缩小和放大的手势操作。
其中变量 gesture 对象和 touch 模块中的 touch 对象的作用差不多,可以先看看 《读zepto源码之touch模块》对 touch 模块的分析。
parentiftextfunction parentiftext(node){ return 'tagname' in node ? node : node.parentnode }
这个辅助方法是获取目标节点,如果节点不是元素节点,则用父节点作为目标节点。如果事件在文本节点或者伪类元素上触发时,会出现不是元素节点的情况。
事件gesturestartbind('gesturestart', function(e){ var now = date.now(), delta = now - (gesture.last || now) gesture.target = parentiftext(e.target) gesturetimeout && cleartimeout(gesturetimeout) gesture.e1 = e.scale gesture.last = now })
如 touch 模块一样,在 gesturestart 时,也用 delta 来记录两次 start 之间的时间间隔,用 gesture.target 来保存目标元素,e1 是起点时的缩放值。
gesturechangebind('gesturechange', function(e){ gesture.e2 = e.scale })
在 gesturechange 时,更新终点 guesture.e2 的缩放值。
gestureendif (gesture.e2 > 0) { math.abs(gesture.e1 - gesture.e2) != 0 && $(gesture.target).trigger('pinch') && $(gesture.target).trigger('pinch' + (gesture.e1 - gesture.e2 > 0 ? 'in' : 'out')) gesture.e1 = gesture.e2 = gesture.last = 0} else if ('last' in gesture) { gesture = {} }
如果 gesture.e2 存在(不可能有小于 0 的情况吧?),在起点的缩放值和终点的缩放值不相同的情况下,触发 pinch 事件;如果起点的缩放值比终点的缩放值大,则继续触发 pinchin 事件,则缩小效果;如果起点的缩放值比终点的缩放值小,则继续触发 pinchout 事件,即放大效果。
最终将 e1 、 e2  和 last 都设置为 0 。
在 last 不存在的情况下(在调用 preventdefault 时),将 gesture 清空。
以上就是zepto源码中gesture模块介绍的详细内容。
其它类似信息

推荐信息