Eine kurze Diskussion über den jQuery-Ereignisquellcode „positioning

Eine kurze Diskussion über den jQuery-Ereignisquellcode „positioning_jquery'.

WBOY

Freigeben： 2016-05-16 16:43:59

Original

1347 Leute haben es durchsucht

Jemand in der Gruppe hat gestern eine Frage zum Speicherort des Ereignisquellcodes gestellt. Eine kurze Beschreibung lautet wie folgt.

Wie kann ich schnell den Ereigniscode finden, der an eine Seite gebunden ist, die ich nicht geschrieben habe? (Die Seite verwendet jQuery)
Dieses Problem ist nicht schwer zu sagen, aber es ist nicht so einfach, es zu sagen. Es wird schwieriger, wenn die Delegation verwendet wird.

In der Chrome-Konsole gibt es Event-Listener, die die Ereignisse des von Ihnen ausgewählten Elements anzeigen. Wenn es sich um ein natives Ereignis handelt, wird es direkt angezeigt,
Wenn Sie auf ein Ereignis klicken, wird zum entsprechenden Code gesprungen, aber das an jQuery gebundene Ereignis ist nicht so. Nach dem Klicken wird nur zum jQuery-Quellcode gesprungen,
Der jQuery-Quellcode nach min ist so dicht, dass es schwindelerregend ist, ihn anzusehen.

Was das Event-Management von jQuery betrifft, so haben die Experten es ebenfalls sehr gründlich analysiert. Ich werde nicht näher darauf eingehen, da es nicht der Schwerpunkt dessen ist, worüber wir heute sprechen wollen.
Der wichtigste Punkt, über den wir sprechen möchten, ist das Auffinden des Ereignisquellcodes. Da es viele Versionen von jQuery gibt und es viele Male umgestaltet wurde, müssen wir es von Fall zu Fall erklären.

Grundsätzlich gibt es zwei Fälle: 1.2.6-1.8 und 1.9. Nach dem Test wird im Allgemeinen festgestellt, dass es sich um die folgenden zwei Versionen handelt
1.2.6-1.8 Verwenden Sie $.data(elem, "events", undefiniert, true); 1.9 Verwenden Sie $._data( elem, "events" );

PS: Sie können jetzt F12 drücken, um die Konsole zu öffnen, um die Ergebnisse anzuzeigen. Natürlich können Sie auch den Quellcode unten kopieren, um ihn selbst zu testen.

Da Google stark blockiert war, habe ich das CDN auf das von Baidu geändert. 07.06.2014

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="http://libs.baidu.com/jquery/1.4.0/jquery.js"></script>
</head>

<body>
  <input type="button" id="testbtn" value="testbtn" />
  <script>
    var version = ["1.2.6", "1.3.0", "1.4.0", "1.5.0", "1.6.0", "1.7.0", "1.8.0", "1.9.0", "1.10.0"],
      elem = $("#testbtn")[0], // 待操作的元素
      url, // jquery 地址
      jq = null, // 保存新的jquery句柄
      jqver, // jqury 版本
      fn; // 函数句柄

    for (var i = 0; i < version.length; i++) {
      url = "http://libs.baidu.com/jquery/" + version[i] + "/jquery.min.js";

      $.getScript(url, function() {
        jq = $.noConflict(true); // 释放控制权
        jqver = jq.fn.jquery; // 当前 jquery 版本
        fn = new Function('ver_' + jqver.replace(/\./g, "_"), ''); // 生成类似 function (ver_1_9_0) {} 这样的函数
        jq(elem).click(fn).click(fn).bind("test", fn); // 普通事件和自定义事件

        console.log(
          jqver,
          jq.data && jq.data(elem, "events", undefined, true),
          jq._data && jq._data(elem, "events")
        );
      });
    }
  </script>
</body>
</html>

Nach dem Login kopieren

Wenn nichts anderes passiert, können Sie das Anzeigeergebnis so auf der Konsole sehen

Nach der Erweiterung können Sie sehen, dass die Version in den gebundenen Funktionsparametern der aktuellen Version entspricht.

kann gesehen werden

1.2.6-1.4 unterstützt nur $.data(elem, "events", undefiniert, true); 1.5-1.8 Beide werden unterstützt

1.9-1.11 unterstützt nur $._data( elem, "events" );
Dann können wir eine einfache Funktion schreiben, um es kompatibel zu machen, und dann ist es vollständig kompatibel

Rufen Sie nun „lookEvents“ auf, um das entsprechende Ereignisobjekt abzurufen.

function lookEvents (elem) {
  return $.data &#63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}

Nach dem Login kopieren

Obwohl wir das von uns gebundene benutzerdefinierte Ereignis sehen können, wissen wir immer noch nicht, in welcher Datei und Zeile es sich befindet.

Jetzt lokalisieren wir seine konkrete Position. Versuchen wir es mit 1,7.

PS: Die folgenden Vorgänge werden alle in der Konsole ausgeführt. Meine Umgebung ist Chrome 34

Kopieren Sie auf die Konsole und drücken Sie zum Ausführen die Eingabetaste. Wie erwartet wird das folgende Ergebnis angezeigt.

function lookEvents (elem) {
  return $.data &#63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件
event.click[0].handler // 获取click事件的第一个事件源码地址

Nach dem Login kopieren

Haben Sie 1.html:36 in der unteren rechten Ecke gesehen? Dies ist die Datei, in der sich der Quellcode befindet, und die entsprechende Zeilennummer.

Sie können direkt auf 1.html:36 klicken, um zum entsprechenden Code zu springen. Ist das nicht sehr leistungsfähig?

Die obige Methode eignet sich für die jQuery-Version 1.5. Für die Versionen 1.2.6-1.4 ist sie etwas anders, aber auch sehr einfach.

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefiniert, true ) : $._data( elem, "events" );}var event = lookEvents($("# testbtn")[0]); // Das gebundene Ereignis abrufen event.click; // Überprüfen Sie, wie viele Klickereignisse vorhanden sind. Wenn Sie andere Ereignisse überprüfen möchten, geben Sie einfach event ein und drücken Sie die Eingabetaste

Die oben gezeigte Codierung entspricht dem Ereignishandle. Bei meinen 1, 2 Ereignissen (wie in der Abbildung unten gezeigt) sind diese Nummern nicht in Ordnung, daher sollten Sie darauf achten.

event.click[1] // Holen Sie sich die Ereignisquellcode-Adresse des Klickereignisses, dessen ID 1 ist

Es überrascht nicht, dass Sie das folgende Ergebnis sehen können.

In Bezug auf die Bedienung sind beide Versionen 1.2.6-1.4 und 1.5 nahezu gleich, mit der Ausnahme, dass Version 1.5 den Array-Modus zur Verwaltung von Funktionshandles verwendet, was praktischer ist.

Okay, das ist alles, was gesagt werden muss. Lasst uns anfangen, es auszuprobieren, Freunde.