Fonction jQuery.extend et détails d'utilisation

Fonction jQuery.extend et détails d'utilisation_jquery

WBOY

Libérer： 2016-05-16 15:40:30

original

1322 Les gens l'ont consulté

Explication détaillée de la fonction jquery.extend

Méthode d'extension de JQuery :

La méthode d'extension de Jquery extend est une méthode couramment utilisée lorsque nous écrivons des plug-ins. Cette méthode a des prototypes surchargés. Ici, apprenons-en ensemble.

1. Le prototype de la méthode d'extension de Jquery est :

extend(dest,src1,src2,src3...);

Copier après la connexion

Sa signification est de fusionner src1, src2, src3... dans dest, et la valeur de retour est la destination fusionnée. On peut voir que cette méthode modifie la structure de dest après la fusion. Si vous souhaitez obtenir le résultat fusionné mais ne souhaitez pas modifier la structure de dest, vous pouvez l'utiliser comme suit :

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数

Copier après la connexion

De cette façon, src1, src2, src3... peuvent être fusionnés, puis le résultat fusionné sera renvoyé à newSrc. Par exemple :

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

Copier après la connexion

Puis le résultat fusionné

result={name:"Jerry",age:21,sex:"Boy"}

Copier après la connexion

C'est-à-dire que si le dernier paramètre a le même nom que le paramètre précédent, alors le dernier paramètre écrasera la valeur du paramètre précédent.

2. Omettez le paramètre dest

Le paramètre dest dans le prototype de la méthode extend mentionné ci-dessus peut être omis. S'il est omis, la méthode ne peut avoir qu'un seul paramètre src, et le src est fusionné dans l'objet qui appelle la méthode extend, tel que :

1. $.extend(src)

Cette méthode consiste à fusionner src dans l'objet global de jquery, tel que :

 $.extend({
 hello:function(){alert('hello');}
 });

Copier après la connexion

consiste à fusionner la méthode hello dans l'objet global de jquery.

2. $.fn.extend(src)

Cette méthode fusionne src dans l'objet instance jquery, tel que :

 $.fn.extend({
 hello:function(){alert('hello');}
 });

Copier après la connexion

consiste à fusionner la méthode hello dans l'objet instance jquery.

Voici quelques exemples d'extensions couramment utilisées :

$.extend({net:{}});

Copier après la connexion

Il s'agit d'étendre un espace de noms net dans l'objet global jquery.

 $.extend($.net,{
  hello:function(){alert('hello');}
 })

Copier après la connexion

Il s'agit d'étendre la méthode hello dans l'espace de noms net Jquery précédemment étendu.

3. La méthode extend de Jquery a également un prototype surchargé :

extend(boolean,dest,src1,src2,src3...)

Copier après la connexion

Le premier paramètre booléen indique s'il faut effectuer une copie profonde. Les autres paramètres sont les mêmes que ceux introduits précédemment. Regardons un exemple :

var result=$.extend( true, {}, 
  { name: "John", location: {city: "Boston",county:"USA"} }, 
  { last: "Resig", location: {state: "MA",county:"China"} } );

Copier après la connexion

On voit que le sous-objet location:{city:"Boston"} est imbriqué dans src1, et le sous-objet location:{state:"MA"},Le Le premier paramètre de copie complète est vrai, alors le résultat fusionné est :

result={name:"John",last:"Resig",
    location:{city:"Boston",state:"MA",county:"China"}}

Copier après la connexion

C'est-à-dire qu'il fusionnera également les sous-objets imbriqués dans src, et si le premier paramètre booléen est faux, voyons quel est le résultat de la fusion, comme suit :

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
          );

Copier après la connexion

Ensuite, le résultat fusionné est :

 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

Copier après la connexion

Voici quelques détails sur lesquels $.extend() est souvent utilisé dans les projets.

À ajouter : nous utilisons aussi souvent la méthode extend() pour écrire des plug-ins jquery, donc les types de plug-ins jquery sont les suivants :

Types de plug-ins jQuery

1. Encapsulation des méthodes objet. Ce plug-in encapsule les méthodes objet et est utilisé pour faire fonctionner les objets jQuery obtenus via des sélecteurs. Ce type de plug-in peut tirer parti des puissants avantages des sélecteurs jQuery. Un nombre considérable de méthodes jQuery sont « insérées » dans le noyau sous cette forme au sein de la bibliothèque de scripts jQuery, comme la méthode parent() et appendTo(. ) méthode attendez.

2. L'encapsulation de fonctions globales peut ajouter des fonctions indépendantes à l'espace de noms jQuery. Par exemple, la méthode jQuery.ajax() couramment utilisée et la méthode jQuery.trim() qui supprime les espaces de début et de fin sont toutes des plugins attachés au noyau en tant que fonctions globales dans jQuery.

3. Plug-in de sélection Bien que le sélecteur de jQuery soit très puissant, dans certains cas, vous devez toujours utiliser le plug-in de sélection pour étendre certains de vos sélecteurs préférés.

jQuery.fn.extend() est principalement utilisé pour étendre le premier des trois types mentionnés ci-dessus, et jQuery.extend() est utilisé pour étendre les deux derniers plug-ins. Les deux méthodes acceptent un paramètre, de type Object. Les "paires nom/valeur" de l'objet Object représentent respectivement "le corps de la fonction ou du nom de la méthode/de la fonction".

Explication détaillée de l'utilisation de la fonction jquery.extend

J'ai étudié jQuery récemment. Enregistrez l'utilisation de la fonction d'extension jQuery.extend.

1. Étendre les méthodes statiques jQuery.

$.extend({
test:function(){alert('test函数')}
})

Copier après la connexion

Utilisation : $.test()

2. Fusionner plusieurs objets

Prenons jQuery.extend(css1, css2) comme exemple. css1 et css2 ont quelques attributs (la méthode s'en occupera toujours, ici nous parlons d'attributs). La fonction extend ajoutera les attributs que css2 a mais n'a pas dans css2 à css1. Si un certain attribut de css2 partage le même nom qu'un certain attribut de css1, l'attribut de css2 sera utilisé pour écraser l'attribut du même nom. de CSS1. css1 est l'objet d'intégration final. Ou vous pouvez également utiliser :

3.深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

 // 以前的 .extend()  
  jQuery.extend(  
   { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
  );  
   // 结果:  
   // => { name: “John”, last: “Resig”, location: { state: “MA” } }
  // 新的更深入的 .extend()  
  jQuery.extend( true,  
  { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
 );  
 // 结果  
  // => { name: “John”, last: “Resig”,  
 //   location: { city: “Boston”, state: “MA” } }

Copier après la connexion