摘要:模塊基于上的事件的封裝,利用屬性,封裝出系列事件。這個判斷需要引入設(shè)備偵測模塊。然后是監(jiān)測事件,根據(jù)這三個事件,可以組合出和事件。其中變量對象和模塊中的對象的作用差不多,可以先看看讀源碼之模塊對模塊的分析。
Gesture 模塊基于 IOS 上的 Gesture 事件的封裝,利用 scale 屬性,封裝出 pinch 系列事件。
讀 Zepto 源碼系列文章已經(jīng)放到了github上,歡迎star: reading-zepto
源碼版本本文閱讀的源碼為 zepto1.2.0
GitBook《reading-zepto》
整體結(jié)構(gòu);(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 。這個判斷需要引入設(shè)備偵測模塊 Detect 。這個模塊利用 userAgent 來進行設(shè)備偵測,里面是一大堆正則表達式,所以這個模塊后面是不打算分析的了。
然后是監(jiān)測 gesturestart 、gesturechange、 gestureend 事件,根據(jù)這三個事件,可以組合出 pinch 、pinchIn 和 pinchOut 事件。其實就是縮小和放大的手勢操作。
其中變量 gesture 對象和 Touch 模塊中的 touch 對象的作用差不多,可以先看看 《讀Zepto源碼之Touch模塊》對 Touch 模塊的分析。
parentIfTextfunction parentIfText(node){ return "tagName" in node ? node : node.parentNode }
這個輔助方法是獲取目標節(jié)點,如果節(jié)點不是元素節(jié)點,則用父節(jié)點作為目標節(jié)點。如果事件在文本節(jié)點或者偽類元素上觸發(fā)時,會出現(xiàn)不是元素節(jié)點的情況。
事件 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 的情況吧?),在起點的縮放值和終點的縮放值不相同的情況下,觸發(fā) pinch 事件;如果起點的縮放值比終點的縮放值大,則繼續(xù)觸發(fā) pinchIn 事件,則縮小效果;如果起點的縮放值比終點的縮放值小,則繼續(xù)觸發(fā) pinchOut 事件,即放大效果。
最終將 e1 、 e2 和 last 都設(shè)置為 0 。
在 last 不存在的情況下(在調(diào)用 preventDefault 時),將 gesture 清空。
系列文章讀Zepto源碼之代碼結(jié)構(gòu)
讀Zepto源碼之內(nèi)部方法
讀Zepto源碼之工具函數(shù)
讀Zepto源碼之神奇的$
讀Zepto源碼之集合操作
讀Zepto源碼之集合元素查找
讀Zepto源碼之操作DOM
讀Zepto源碼之樣式操作
讀Zepto源碼之屬性操作
讀Zepto源碼之Event模塊
讀Zepto源碼之IE模塊
讀Zepto源碼之Callbacks模塊
讀Zepto源碼之Deferred模塊
讀Zepto源碼之Ajax模塊
讀Zepto源碼之Assets模塊
讀Zepto源碼之Selector模塊
讀Zepto源碼之Touch模塊
參考指尖下的js —— 多觸式web前端開發(fā)之三:處理復(fù)雜手勢
License署名-非商業(yè)性使用-禁止演繹 4.0 國際 (CC BY-NC-ND 4.0)
最后,所有文章都會同步發(fā)送到微信公眾號上,歡迎關(guān)注,歡迎提意見:
作者:對角另一面
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/88643.html
摘要:在觸發(fā)事件前,先將保存定時器的變量釋放,如果對象中存在,則觸發(fā)事件,保存的是最后觸摸的時間。如果有觸發(fā)的定時器,清除定時器即可阻止事件的觸發(fā)。其實就是清除所有相關(guān)的定時器,最后將對象設(shè)置為。進入時,立刻清除定時器的執(zhí)行。 大家都知道,因為歷史原因,移動端上的點擊事件會有 300ms 左右的延遲,Zepto 的 touch 模塊解決的就是移動端點擊延遲的問題,同時也提供了滑動的 swip...
摘要:讀源碼系列文章已經(jīng)放到了上,歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法,這些方法在調(diào)用的時候,會為返回的結(jié)果添加的屬性,用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。 讀 Zepto 源碼系列文章已經(jīng)放到了github上,歡迎star: reading-zepto 源碼版本 本文閱讀的...
摘要:模塊處理的是表單提交。表單提交包含兩部分,一部分是格式化表單數(shù)據(jù),另一部分是觸發(fā)事件,提交表單。最終返回的結(jié)果是一個數(shù)組,每個數(shù)組項為包含和屬性的對象。否則手動綁定事件,如果沒有阻止瀏覽器的默認事件,則在第一個表單上觸發(fā),提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分,一部分是格式化表單數(shù)據(jù),另一部分是觸發(fā) submit 事件,提交表單。 讀 Zepto 源碼系列文章已...
摘要:所以模塊依賴于模塊,在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調(diào)用原有的方法,將元素顯示出來,這是實現(xiàn)動畫的基本條件。如果沒有傳遞,或者為值,則表示不需要動畫,調(diào)用原有的方法即可。 fx 模塊提供了 animate 動畫方法,fx_methods 利用 animate 方法,提供一些常用的動畫方法。所以 fx_methods 模塊依賴于 fx 模塊,在引入 fx_m...
摘要:用法與參數(shù)要理解這段代碼,先來看一下的用法和參數(shù)用法參數(shù)回調(diào)函數(shù),有如下參數(shù)上一個回調(diào)函數(shù)返回的值或者是初始值當前值當前值在數(shù)組中的索引調(diào)用的數(shù)組初始值,如果沒有提供,則為數(shù)組的第一項。接下來,檢測回調(diào)函數(shù)是否為,如果不是,拋出類型錯誤。 IOS3 模塊是針對 IOS 的兼容模塊,實現(xiàn)了兩個常用方法的兼容,這兩個方法分別是 trim 和 reduce 。 讀 Zepto 源碼系列文章...
閱讀 3537·2021-11-24 09:39
閱讀 795·2019-08-30 14:22
閱讀 3044·2019-08-30 13:13
閱讀 2330·2019-08-29 17:06
閱讀 2934·2019-08-29 16:22
閱讀 1268·2019-08-29 10:58
閱讀 2441·2019-08-26 13:47
閱讀 1641·2019-08-26 11:39