成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

讀Zepto源碼之Gesture模塊

coolpail / 2355人閱讀

摘要：模塊基于上的事件的封裝，利用屬性，封裝出系列事件。這個(gè)判斷需要引入設(shè)備偵測模塊。然后是監(jiān)測事件，根據(jù)這三個(gè)事件，可以組合出和事件。其中變量對象和模塊中的對象的作用差不多，可以先看看讀源碼之模塊對模塊的分析。

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)

注意這里有個(gè)判斷 $.os.ios ，用來判斷是否為 ios 。這個(gè)判斷需要引入設(shè)備偵測模塊 Detect 。這個(gè)模塊利用 userAgent 來進(jìn)行設(shè)備偵測，里面是一大堆正則表達(dá)式，所以這個(gè)模塊后面是不打算分析的了。

然后是監(jiān)測 gesturestart 、gesturechange、 gestureend 事件，根據(jù)這三個(gè)事件，可以組合出 pinch 、pinchIn 和 pinchOut 事件。其實(shí)就是縮小和放大的手勢操作。

其中變量 gesture 對象和 Touch 模塊中的 touch 對象的作用差不多，可以先看看 《讀Zepto源碼之Touch模塊》對 Touch 模塊的分析。

parentIfText 
function parentIfText(node){
  return "tagName" in node ? node : node.parentNode
}

這個(gè)輔助方法是獲取目標(biāo)節(jié)點(diǎn)，如果節(jié)點(diǎn)不是元素節(jié)點(diǎn)，則用父節(jié)點(diǎn)作為目標(biāo)節(jié)點(diǎn)。如果事件在文本節(jié)點(diǎn)或者偽類元素上觸發(fā)時(shí)，會(huì)出現(xiàn)不是元素節(jié)點(diǎn)的情況。

事件 gesturestart 
bind("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 時(shí)，也用 delta 來記錄兩次 start 之間的時(shí)間間隔，用 gesture.target 來保存目標(biāo)元素，e1 是起點(diǎn)時(shí)的縮放值。

gesturechange 
bind("gesturechange", function(e){
  gesture.e2 = e.scale
})

在 gesturechange 時(shí)，更新終點(diǎn) guesture.e2 的縮放值。

gestureend 
if (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 的情況吧？），在起點(diǎn)的縮放值和終點(diǎn)的縮放值不相同的情況下，觸發(fā) pinch 事件；如果起點(diǎn)的縮放值比終點(diǎn)的縮放值大，則繼續(xù)觸發(fā) pinchIn 事件，則縮小效果；如果起點(diǎn)的縮放值比終點(diǎn)的縮放值小，則繼續(xù)觸發(fā) pinchOut 事件，即放大效果。

最終將 e1 、 e2 和 last 都設(shè)置為 0 。

在 last 不存在的情況下（在調(diào)用 preventDefault 時(shí)），將 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)

最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注,歡迎提意見：

作者：對角另一面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/88643.html

相關(guān)文章

  • 讀Zepto源碼之Touch模塊

    摘要：在觸發(fā)事件前，先將保存定時(shí)器的變量釋放，如果對象中存在，則觸發(fā)事件，保存的是最后觸摸的時(shí)間。如果有觸發(fā)的定時(shí)器，清除定時(shí)器即可阻止事件的觸發(fā)。其實(shí)就是清除所有相關(guān)的定時(shí)器，最后將對象設(shè)置為。進(jìn)入時(shí)，立刻清除定時(shí)器的執(zhí)行。 大家都知道，因?yàn)闅v史原因，移動(dòng)端上的點(diǎn)擊事件會(huì)有 300ms 左右的延遲，Zepto 的 touch 模塊解決的就是移動(dòng)端點(diǎn)擊延遲的問題，同時(shí)也提供了滑動(dòng)的 swip...

    Prasanta 評論0 收藏0

  • 讀Zepto源碼之Stack模塊

    摘要：讀源碼系列文章已經(jīng)放到了上，歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法，這些方法在調(diào)用的時(shí)候，會(huì)為返回的結(jié)果添加的屬性，用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的...

    crossea 評論0 收藏0

  • 讀Zepto源碼之Form模塊

    摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā)事件，提交表單。最終返回的結(jié)果是一個(gè)數(shù)組，每個(gè)數(shù)組項(xiàng)為包含和屬性的對象。否則手動(dòng)綁定事件，如果沒有阻止瀏覽器的默認(rèn)事件，則在第一個(gè)表單上觸發(fā)，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā) submit 事件，提交表單。 讀 Zepto 源碼系列文章已...

    陳江龍 評論0 收藏0

  • 讀Zepto源碼之fx_methods模塊

    摘要：所以模塊依賴于模塊，在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調(diào)用原有的方法，將元素顯示出來，這是實(shí)現(xiàn)動(dòng)畫的基本條件。如果沒有傳遞，或者為值，則表示不需要?jiǎng)赢?，調(diào)用原有的方法即可。 fx 模塊提供了 animate 動(dòng)畫方法，fx_methods 利用 animate 方法，提供一些常用的動(dòng)畫方法。所以 fx_methods 模塊依賴于 fx 模塊，在引入 fx_m...

    junbaor 評論0 收藏0

  • 讀Zepto源碼之IOS3模塊

    摘要：用法與參數(shù)要理解這段代碼，先來看一下的用法和參數(shù)用法參數(shù)回調(diào)函數(shù)，有如下參數(shù)上一個(gè)回調(diào)函數(shù)返回的值或者是初始值當(dāng)前值當(dāng)前值在數(shù)組中的索引調(diào)用的數(shù)組初始值，如果沒有提供，則為數(shù)組的第一項(xiàng)。接下來，檢測回調(diào)函數(shù)是否為，如果不是，拋出類型錯(cuò)誤。 IOS3 模塊是針對 IOS 的兼容模塊，實(shí)現(xiàn)了兩個(gè)常用方法的兼容，這兩個(gè)方法分別是 trim 和 reduce 。 讀 Zepto 源碼系列文章...

    lavnFan 評論0 收藏0

發(fā)表評論

0條評論

coolpail

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<