Exemples détaillés de quatre scénarios d'utilisation de jquery.proxy

En fait, il n'y a que deux façons de l'utiliser, mais chacune est subdivisée selon qu'il faut ou non transmettre des paramètres.

Donnez-moi d'abord un morceau de HTML, qui sera utilisé pour les tests plus tard :

Test

1, jquery.proxy(fonction, contexte);

utiliser le contexte comme contexte d'exécution de la fonction (c'est-à-dire ceci)

2, jQuery.proxy(function, context [, supplementArguments]);

Passer les paramètres à la fonction

Utilisation scénario : au clic, Pour exécuter la fonction, dans le contexte donné, deux paramètres sont passés en même temps. Si un événement est requis, il peut être utilisé comme troisième paramètre de la fonction.

Remarque : Si le proxy n'est pas applicable dans l'environnement d'exécution de la fonction, le contexte sera l'objet actuellement cliqué Maintenant que d'autres contextes sont spécifiés, cela n'a plus rien à voir avec l'objet actuellement cliqué. objet.

 var me = {
   /* I'm a dog */
   type: "dog",
   
   /* Note that event comes *after* one and two */
   test: function(one, two, event) {
     $("#log")
       /* `one` 是第一个附加参数，与对象`you`对应 */
       .append( "<h3>Hello " + one.type + ":</h3>" )
       /* `two` 是第二个附加参数，与对象`they`对应 */
       .append( "and they are " + two.type + ".<br>" )
       /* `this` 是上下文，与普通对象`me`对应 */
       .append( "I am a " + this.type + ", " )
  
       
       /* 事件类型是点击"click" */
       .append( "Thanks for " + event.type + "ing " )
       /* `event.target`是被点击元素，类型是按钮button */
       .append( "the " + event.target.type + "." );
   }
 };
  
 var you  = { type: "cat" };
 var they = { type: "fish" };
  
 
 /* 一共4个参数：第一个是function，第二个是context，第三、四是参数 */
 var proxy = $.proxy( me.test, me, you, they );
 
 $("#test").on( "click", proxy );
 /* 运行结果：
 Hello cat:
 and they are fish.
 I am a dog, Thanks for clicking the submit.
 */

Dans ce cas, le clic est juste équivalent à un bouton de déclenchement, et la fonction exécutée après le déclenchement n'a rien à voir avec le clic.

3, jQuery.proxy(context, name);

Scénario d'utilisation : le contexte est un PlainObject et le nom est sa méthode. Il est exécuté au clic, mais le contexte d'exécution de la fonction de test est obj, pas $("#test")

 var obj = {
     name: "John",
     test: function() {
         console.log(this);
         $("#log").append( this.name );
         $("#test").off("click", obj.test);
     }
 };
 $("#test").on( "click", jQuery.proxy( obj, "test" ) );//在click时执行，但又
不是click的上下文

Analyse du résultat : après avoir lié l'événement click, la première fois qu'il est exécuté, la liaison est supprimée.

Après la suppression, il n'y a pas d'événement de clic sur le bouton, donc si vous cliquez à nouveau sur le bouton, il n'y aura aucune réaction.

4, jQuery.proxy(context, name [, supplementArguments]);

Une question :

Je veux vous poser une question,

jQuery.proxy (contexte, fonction, paramètres);

et

function.call(contexte, paramètres);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!