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

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 $ = {};

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){
      /**暂时不管里面写什么**/
   } 
 }

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....   
   }
 })

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];
    }
  }
}

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!