Application de fonction personnalisée jQuery et analyse

Cette fois, je vais vous présenter l'application et l'analyse de la fonction personnaliséejQuery, et quelles sont les précautions pour utiliser la fonction personnalisée jQuery. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Fonction personnalisée jQuery

1. Comment étendre la fonction jQuery ?
jQuery propose deux types d'extensions de fonctions personnalisées : l'une est le développement de fonctions au niveau de la classe, ce qui équivaut à traiter jQuery comme une classe et à étendre les fonctions à la classe elle-même, également appelée
fonction globale . Les fonctions globales de jQuery sont des fonctions qui appartiennent à l'espace de noms jQuery. L'autre est le développement de fonctions au niveau de l'objet, qui consiste à ajouter des méthodes aux objets générés par le sélecteur jQuery. Ce qui suit est une description détaillée du développement des deux fonctions.

1) Développement de fonctions globales :

La compréhension la plus directe du développement de plug-ins au niveau de la classe consiste à ajouter des méthodes de classe à la classe jQuery, ce qui peut être compris comme l'ajout de méthodes statiques. Un exemple typique est la fonction jQuery.AJAX(), qui est définie dans l'espace de noms jQuery. Le développement de plug-ins au niveau de la classe peut être étendu sous les formes suivantes :
a. Ajouter une nouvelle fonction globale
Pour ajouter une fonction globale, il suffit de la définir comme suit :

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };

Ensuite, il peut être exécuté en appelant $.test();.

b. Ajouter plusieurs fonctions globales
Pour ajouter plusieurs fonctions globales, vous pouvez utiliser la définition suivante :

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };

La méthode d'appel est la même que ci-dessus.

c. Utilisez jQuery.extend(object)　

jQuery.extend({ 
         test:function() { 
                alert(‘This is a test!!!’); 
         }, 
         test1: function() { 
                alert(‘This is a test1!!!’); 
             },  
         add:function(a,b){ 
             return a+b; 
         } 
});

2). Développement de fonctions au niveau de l'objet :

Le développement de fonctions au niveau de l'objet peut être effectué des deux manières suivantes
a .

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);

Remarque : Cette méthode peut également être définie directement avec jQuery.fn.extend. Ceci est écrit pour limiter le signe dollar à un espace de noms. processus de définition pour éviter les conflits avec Le symbole $ entre en conflit avec d'autres bibliothèques et n'a aucun autre effet.

b. Accepter les paramètres d'options pour contrôler le comportement du plug-in

Quand une fonction personnalisée doit passer de nombreux paramètres, il y a trop de paramètres et une mauvaise lisibilité. On peut envisager de passer un objet, par exemple. Par exemple, nous devons définir une fonction qui définit la couleur d'arrière-plan et la couleur du texte pour p. Nous pouvons l'écrire comme ceci :

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;

Appelez le code de test de la fonction :

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });

. Nous verrons le fond du tableau rouge, les polices sont toutes bleues.

2. Résumé de l'analyse
Dans le manuel de l'API de jQuery, nous voyons que extend est en fait deux méthodes différentes montées sur jQuery et jQuery.fn, bien que jQuery soit à l'intérieur de jQuery .extend() et jQuery.fn. .extend() sont implémentés avec le même code, mais leurs fonctions sont différentes. Explication officielle :

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的

Méthode d'instance jQuery)

On peut voir que jQuery a des méthodes statiques et des méthodes d'instance, donc jQuery.extend() et jQuery.fn.extend() sont l'un est utilisé pour étendre les méthodes statiques et l'autre est utilisé pour étendre les méthodes d'instance.
Le code source de la partie personnalisation de jQuery est le suivant :

jQuery.extend = jQuery.fn.extend = function(obj){ 
             //obj是传递过来扩展到this上的对象 
             var target=this; 
             for (var name in obj){ 
             //name为对象属性 
             //copy为属性值 
             copy=obj[name]; 
             //防止循环调用 
             if(target === copy) continue; 
             //防止附加未定义值 
             if(typeof copy === ‘undefined’) continue; 
             //赋值 
             target[name]=copy; 
             } 
             return target; 
            }

Les méthodes JavaScript sont également des objets, donc la fonction dite d'extension est pour les deux objets jQuery.extend et jQuery .fn.extend Pour étendre un nouvel attribut, le paramètre formel est notre fonction personnalisée, qui sera éventuellement copiée et renvoyée en tant qu'objet cible, et fusionnée dans l'objet jQuery.extend ou l'objet jQuery.fn.extend, qui est essentiellement équivalent à ajouter un nouvel attribut à la classe jQuery elle-même ou à ajouter une méthode à l'objet prototype de l'objet jQuery.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le plug-in de pagination de jquery

Comment créer un effet de loupe pour JD détails du produit

Comment obtenir l'effet de battement de balle avec javascript

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!