recherche

Maison  >  Article  >  interface Web  >  Une brève discussion sur le code source de l'événement jQuery positionnement_jquery

Une brève discussion sur le code source de l'événement jQuery positionnement_jquery

WBOY
WBOYoriginal
2016-05-16 16:43:591339parcourir

Quelqu'un dans le groupe a posé hier une question sur l'emplacement du code source de l'événement. Une brève description est la suivante.

Comment localiser rapidement le code d'événement lié à une page que je n'ai pas écrite ? (La page utilise jQuery)
Ce problème n'est pas difficile à dire, mais il n'est pas si simple à dire. Il sera plus gênant si la délégation est utilisée.

Il y a des Event Listeners dans la console Chrome, qui afficheront les événements de l'élément que vous avez sélectionné. S'il s'agit d'un événement natif, il sera affiché directement,
. Lorsque vous cliquez sur un événement, il passera au code correspondant, mais l'événement lié à jQuery n'est pas comme ça. Après avoir cliqué, il passera uniquement au code source de jQuery,
. Le code source de jQuery après min est si dense qu’il est vertigineux de le regarder.

Concernant la gestion des événements de jQuery, les experts l’ont également analysée de manière très approfondie. Je n’entrerai pas dans les détails car ce n’est pas l’objet de ce dont nous voulons parler aujourd’hui.
Le point clé dont nous voulons parler est de savoir comment localiser le code source de l'événement. Comme il existe de nombreuses versions de jQuery et qu’il a été refactorisé à plusieurs reprises, nous devons l’expliquer au cas par cas.

En gros, il y a deux cas : 1.2.6-1.8 et 1.9 Après tests, il est généralement déterminé qu'il s'agit des deux versions suivantes
. 1.2.6-1.8 Utilisez $.data(elem, "events", undefined, true
); 1.9 Utilisez $._data( elem, "events" );

PS : Vous pouvez maintenant appuyer sur F12 pour ouvrir la console et voir les résultats. Bien sûr, vous pouvez également copier le code source ci-dessous pour le tester vous-même.
Comme Google était sévèrement bloqué, j'ai remplacé le CDN par celui de Baidu. 2014-06-07

<!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>

Si rien d'autre, vous pouvez voir le résultat de l'affichage comme ceci sur la console

Après expansion, vous pouvez voir que la version dans les paramètres de la fonction liée correspond à la version actuelle.

visible
1.2.6-1.4 ne prend en charge que $.data(elem, "events", undefined, true
); 1.5-1.8 Les deux pris en charge
1.9-1.11 ne prend en charge que $._data( elem, "events" );

Ensuite, nous pouvons écrire une fonction simple pour la rendre compatible, et elle sera alors entièrement compatible 

function lookEvents (elem) {
  return $.data &#63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
Appelez maintenant lookEvents pour obtenir l'objet événements correspondant.

Bien que nous puissions voir l'événement personnalisé que nous avons lié, nous ne savons toujours pas dans quel fichier et dans quelle ligne il se trouve.

Localisons maintenant sa position spécifique. Essayons-le avec 1.7.

PS : Les opérations suivantes sont toutes effectuées dans la console. Mon environnement est chrome 34
. 

function lookEvents (elem) {
  return $.data &#63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件
event.click[0].handler // 获取click事件的第一个事件源码地址
Copiez sur la console et appuyez sur Entrée pour exécuter Comme prévu, vous verrez le résultat suivant.

Avez-vous vu 1.html:36 dans le coin inférieur droit ? Il s'agit du fichier où se trouve le code source et le numéro de ligne correspondant ?

Vous pouvez directement cliquer sur 1.html:36 pour accéder au code correspondant. N'est-il pas très puissant ?

La méthode ci-dessus convient à jQuery version 1.5. Pour les versions 1.2.6-1.4, elle est légèrement différente, mais elle est également très simple.

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );}var event = lookEvents($("# testbtn")[0]); // Récupère l'événement lié event.click; // Vérifiez le nombre d'événements de clic. Si vous souhaitez vérifier d'autres événements, entrez simplement l'événement et appuyez sur Entrée

Le codage vu ci-dessus correspond au handle d'événement. Par exemple, mes événements 1, 2 (comme le montre la figure ci-dessous), ces chiffres ne sont pas dans l'ordre, vous devez donc y prêter attention.

event.click[1] // Récupère l'adresse du code source de l'événement de clic dont l'identifiant est 1
Sans surprise, vous pouvez voir le résultat suivant.

En termes de fonctionnement, les deux versions 1.2.6-1.4 et 1.5 sont presque identiques, sauf que la version 1.5 utilise le mode tableau pour gérer les descripteurs de fonctions, ce qui est plus pratique.

D'accord, c'est tout ce qu'il faut dire, commençons à le tester, mes amis.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript implémente un défilement d'image simple avec les compétences download_javascript du code sourceArticle suivant：JavaScript implémente un défilement d'image simple avec les compétences download_javascript du code source

Articles Liés

Voir plus