Einführung in das Gesture-Modul im Zepto-Quellcode

Das

Gesture-Modul basiert auf der Kapselung des IOS-Ereignisses auf Gesture und verwendet das scale-Attribut, um die pinch-Ereignisreihe zu kapseln.

Quellcode-Version

Der in diesem Artikel gelesene Quellcode ist zepto1.2.0

GitBook

《reading-zepto》

Gesamtstruktur

;(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)

Beachten Sie, dass es hier ein Urteil $.os.ios gibt, mit dem beurteilt wird, ob es ios ist. Dieses Urteil erfordert die Einführung des Geräteerkennungsmoduls Detect. Dieses Modul verwendet userAgent zur Geräteerkennung, das viele reguläre Ausdrücke enthält, sodass dieses Modul später nicht analysiert wird.

Überwachen Sie dann die Ereignisse gesturestart, gesturechange, gestureend. Basierend auf diesen drei Ereignissen können pinch, pinchIn und pinchOut Ereignisse kombiniert werden. Tatsächlich handelt es sich um eine Gestenbedienung zum Vergrößern und Verkleinern.

Das variable gesture-Objekt hat ähnliche Funktionen wie das Touch-Objekt im touch-Modul. Sie können sich zunächst die Analyse des Touch-Moduls in „Touch Module Reading Zepto Source Code“ ansehen. .

parentIfText

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

Diese Hilfsmethode dient zum Abrufen des Zielknotens. Wenn der Knoten kein Elementknoten ist, verwenden Sie den übergeordneten Knoten als Zielknoten. Wenn das Ereignis auf einem Textknoten oder Pseudoklassenelement ausgelöst wird, handelt es sich nicht um einen Elementknoten.

Ereignis

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
})

Genau wie das Touch-Modul, wenn gesturestart, delta auch zur Aufzeichnung der Zeit zwischen zwei Zeitintervall, verwenden Sie start, um das Zielelement zu speichern, und gesture.target ist der Skalierungswert am Startpunkt. e1

Gestenänderung

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

Aktualisieren Sie bei

den Skalierungswert des Endpunkts gesturechange. 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 = {}
}

Wenn

existiert (es kann nicht kleiner als gesture.e2 sein, oder?), wenn der Skalierungswert des Startpunkts und der Skalierungswert von Wenn der Endpunkt unterschiedlich ist, wird das Ereignis 0 ausgelöst. Wenn der Zoomwert des Startpunkts größer ist als der Zoomwert des Endpunkts, wird das Ereignis pinch weiterhin ausgelöst Der Zoomwert des Startpunkts ist kleiner als der Zoomwert des Endpunkts und löst weiterhin das Ereignis pinchIn aus, dh den Verstärkungseffekt. pinchOut

setzt letztendlich

, e1 und e2 alle auf last . 0

Löscht

, wenn es nicht existiert (wenn last aufgerufen wird). preventDefault

Das obige ist der detaillierte Inhalt vonEinführung in das Gesture-Modul im Zepto-Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!