Eine kurze Diskussion über das Implementierungsprinzip der Erweiterung des jQuery-Plug-Ins

Ich glaube, dass jeder Front-End-Freund mit jQuery vertraut ist. Einer seiner größten Reize ist, dass es über eine große Anzahl von Plug-Ins verfügt, die uns bei der Lösung verschiedener Aufgaben helfen einfacher. Funktion.

Vor ein paar Nächten, als ich nichts zu tun hatte, habe ich selbst ein einfaches jQuery-Plug-in geschrieben. Die Funktion ist sehr einfach, sie hebt nur die ausgewählten Elemente hervor, aber einige der darin enthaltenen Ideen sind es Es lohnt sich immer noch, es zu lernen. Ja, Sie können hier klicken, um den Code anzuzeigen.

In diesem Artikel geht es nicht darum, wie man ein jQuery-Plug-in schreibt. Lassen Sie uns darüber sprechen, wie Sie die Plug-in-Erweiterungsfunktion von jQuery implementieren. (Daniu kann rausgehen und rechts abbiegen...)

Wir können die Erstellung einer Mini-jQuery simulieren.

var $ = {};

Okay, so einfach ist das...

Als nächstes müssen wir eine Erweiterungsmethode für dieses Objekt bereitstellen, indem wir Entwickler Funktionen hinzufügen lassen und verwenden Methoden zu meinem Objekt.

var $ = {
   extend:function(ob){
      /**暂时不管里面写什么**/
   } 
 }

Jetzt haben wir dem $-Objekt eine Erweiterungsmethode hinzugefügt, die extern über die Methode $.extend(obj) aufgerufen werden kann.

Angenommen, wir möchten jetzt eine Methode zu $ ​​hinzufügen, das heißt, ein Plug-In hinzufügen, wir brauchen nur:

$.extend({
   myFunction:function(obj){
     //do something....   
   }
 })

Jetzt brauchen wir nur noch $.myFunction( obj); Sie können mit der Methode erreichen, was Sie tun möchten.

Hier liegt der Kern des Problems. Wir mounten die Methode eindeutig auf $.extend. Warum können wir sie direkt mit $ aufrufen? Hier müssen wir sehen, wie Extend das eingehende Objekt intern verarbeitet.

var $ = {
  extend:function(obj){
    for(var key in obj){
      this.proto[key]=obj[key];
    }
  }
}

Es stellt sich heraus, dass Extend das eingehende Objekt durchläuft und es dann an den Prototyp von $ hängt. Auf diese Weise kann $ jederzeit Methoden auf dem Prototyp aufrufen.

Natürlich ist die eigentliche Implementierung von jQuerys Erweiterung viel komplizierter. Hier stellen wir nur die Grundidee der zugrunde liegenden Implementierung des jQuery-Plug-Ins vor, nämlich das Mounten öffentlicher Methoden Prototyp des Objekts.

Informationen zum Schreiben spezifischer Plug-Ins finden Sie unter dem Link am Anfang des Artikels. Ich habe jedes Detail des Plug-In-Schreibens mit Anmerkungen versehen, damit jeder daraus lernen kann andere!

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über das Implementierungsprinzip der Erweiterung des jQuery-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!