Maison > interface Web > js tutoriel > le corps du texte

Une brève discussion sur le principe de mise en œuvre de l'extension d'extension du plug-in jQuery

怪我咯
Libérer: 2017-03-31 09:31:03
original
1909 Les gens l'ont consulté

Je crois que tous les amis front-end connaissent jQuery L'un de ses plus grands charmes est qu'il dispose d'un grand nombre de plug-ins pour nous aider à accomplir diverses tâches. plus facilement.

Il y a quelques nuits, alors que je n'avais rien à faire, j'ai écrit moi-même un simple plug-in jQuery. La fonction est très simple, elle met simplement en évidence les éléments sélectionnés, mais certaines des idées qu'il contient le sont. ça vaut toujours la peine d'être appris. Oui, vous pouvez cliquer ici pour voir le code.

Cet article ne parlera pas de la façon d'écrire un plug-in jQuery. Parlons de la façon d'implémenter la fonction d'extension du plug-in jQuery. (Daniu peut sortir et tourner à droite...)

On peut simuler la création d'un mini jQuery.

var $ = {};
Copier après la connexion

D'accord, c'est aussi simple que ça...

Ensuite, nous devons monter une méthode d'extension sur cet objet, en utilisant Laisser les développeurs ajouter des fonctions et méthodes à mon objet.

var $ = {
   extend:function(ob){
      /**暂时不管里面写什么**/
   } 
 }
Copier après la connexion

Maintenant, nous avons ajouté une méthode extend à l'objet $, qui peut être appelée en externe via la méthode $.extend(obj).

Supposons maintenant que nous voulions ajouter une méthode à $, c'est-à-dire ajouter un plug-in, nous n'avons besoin que de :

$.extend({
   myFunction:function(obj){
     //do something....   
   }
 })
Copier après la connexion

Maintenant, nous n'avons besoin que de $.myFunction( obj); Vous pouvez réaliser ce que vous voulez faire dans la méthode.

Voici le nœud du problème. Nous montons clairement la méthode sur $.extend, pourquoi pouvons-nous l'appeler directement avec $ ? Ici, nous devons voir comment extend gère l'objet entrant en interne.

var $ = {
  extend:function(obj){
    for(var key in obj){
      this.proto[key]=obj[key];
    }
  }
}
Copier après la connexion

Il s'avère que extend traverse l'obj entrant puis l'accroche au proto de $ De cette façon, $ peut appeler des méthodes sur le prototype à tout moment.

Bien sûr, l'implémentation réelle de l'extension de jQuery est beaucoup plus compliquée que cela. Nous présentons ici uniquement l'idée de base de l'implémentation sous-jacente du plug-in jQuery, qui consiste à monter des méthodes publiques sur le fichier. prototype de l'objet.

Pour l'écriture spécifique du plug-in, vous pouvez consulter le lien au début de l'article. J'ai annoté chaque détail de l'écriture du plug-in afin que chacun puisse apprendre de chacun. autre!


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal