Tutorial zur Entwicklung von JavaScript-Plug-Ins (1)_Javascript-Kenntnisse

1, Eröffnungsanalyse

Hallo zusammen! In der heutigen Artikelserie geht es hauptsächlich um die Entwicklung von Plug-Ins auf Basis von „JavaScript“. Ich denke, dass viele Menschen mit dem Wort „Plug-In“ vertraut sind

Manche Leute nennen es vielleicht „Komponente“ oder „Komponente“. Der Schlüssel liegt darin, wie man eine umfassende Überlegung anstellt. Ich denke, jeder hat Recht

Ich habe ein gewisses Verständnis für die „jQuery-Plug-in-Methode“. Lassen Sie uns dieses Thema gemeinsam besprechen und schließlich relevante Implementierungspläne vorlegen, um unsere Fähigkeiten kontinuierlich zu verbessern.

Zweitens geben Sie das Hauptthema des Plug-Ins ein

Im Allgemeinen ist die Entwicklung von jQuery-Plug-Ins in zwei Typen unterteilt: Der eine ist die globale Funktion, die im jQuery-Namespace hängt und auch als statische Methode bezeichnet werden kann.

Die andere ist die Methode auf jQuery-Objektebene, dh die Methode, die unter dem jQuery-Prototyp hängt, sodass die über den Selektor erhaltene jQuery-Objektinstanz diese Methode ebenfalls gemeinsam nutzen kann.

(1), Plug-in-Entwicklung auf Klassenebene

Das direkteste Verständnis der Plug-In-Entwicklung auf Klassenebene besteht darin, Klassenmethoden zur Klasse „jQuery“ hinzuzufügen, was als Hinzufügen statischer Methoden verstanden werden kann. Ein typisches Beispiel ist die Funktion „$.ajax()“, die die Funktion im jQuery-Namespace definiert. Die Plug-in-Entwicklung auf Klassenebene kann in den folgenden Formen erweitert werden:

1.1 Fügen Sie eine globale Funktion hinzu. Wir müssen sie nur wie folgt definieren. Sehen Sie sich den Code an:

Code kopieren Der Code lautet wie folgt:

$.hello = function(){
alarm("Hallo, großer Bär!") ;
} ;

1.2 Mehrere globale Funktionen hinzufügen, die wie folgt definiert werden können:

Code kopieren Der Code lautet wie folgt:

$.extend({
Hallo: Funktion(Name){
              // Geben Sie hier Ihren Code ein
} ,
Welt: function(){
              // Geben Sie hier Ihren Code ein
}
}) ;

Beschreibung: „$.extend(target, [object1], [objectN])“ (Diese Methode wird hauptsächlich verwendet, um den Inhalt (Eigenschaften) von zwei oder mehr Objekten im ersten Objekt zusammenzuführen und das zusammengeführte erste Objekt zurückzugeben .

Wenn die Methode nur ein Parameterziel hat, erweitert dieser Parameter den jQuery-Namespace, d. h. er wird als statische Methode unter dem globalen jQuery-Objekt eingehängt.

(2), Plug-in-Entwicklung auf Objektebene

Plug-in-Entwicklung auf Objektebene erfordert die folgenden zwei Formen:

2.1 Verwenden Sie „$.fn.extend()“, um verwandte Attribute dynamisch als Prototyp bereitzustellen.

Code kopieren Der Code lautet wie folgt:

(Funktion($){

$.fn.extend({
PluginName: function(opts){
                      // Geben Sie hier Ihren Code ein
                                                                        }) ;
})(jQuery) ;



　2.2 Dynamische Eigenschaften direkt zur Prototypenkette hinzufügen.

Code kopieren Der Code lautet wie folgt: (function($) {  

$.fn.pluginName = function(){

// Geben Sie hier Ihren Code ein
} ;  
})(jQuery) ;

Erklären Sie: Für ein jQuery-Plug-in kann eine Grundfunktion gut funktionieren, für ein komplexeres Plug-in müssen jedoch verschiedene Methoden und private Funktionen bereitgestellt werden.

Sie können verschiedene Namespaces verwenden, um verschiedene Methoden für Ihr Plug-in bereitzustellen, aber das Hinzufügen zu vieler Namespaces macht den Code verwirrend und weniger robust. Die beste Lösung besteht also darin, private Funktionen und Methoden entsprechend zu definieren.

Also implementieren wir eine simulierte private Plug-In-Einheit durch eine Kombination aus selbstausführenden Funktionen und Abschlüssen, genau wie in unserem Beispiel oben.

(3), hier ist ein einfaches Beispiel, um den Implementierungsprozess zu sehen:

(1), „HTML“-Fragmentcode, wie folgt:

Code kopieren Der Code lautet wie folgt:

       style="margin-top:10px;
        margin-bottom:30px;"
>8

                                                

(2), „data.json“ ist wie folgt definiert:

Code kopieren Der Code lautet wie folgt:

​{
„text“: „Hallo, großer Bär {{bb}}!“ ;
}

(3), „bb.js“-Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$(function(){
$("#bb").bigbear() ;
}) ;
(Funktion($){
$.fn.bigbear = function(opts){
         opts = $.extend({},$.fn.bigbear.defaults,opts) ;
         return this.each(function(){
            var elem = $(this) ;
              elem.find("span").text(opts["title"]) ;
               $.get(opts["url"],function(data){
                    elem.find("div").text(data["text"]) ;
             }) ;
         }) ;
} ;
$.fn.bigbear.defaults = {
Titel: „Dies ist ein einfacher Test“,
  URL: „data.json“
} ;
})(jQuery) ;

Betriebseffekt:

Um es zusammenzufassen :

(1) „$.fn.bigbear.defaults“ stellt die Standardparameteroptionen des Plug-Ins bereit. Ein Plug-In mit guter Skalierbarkeit sollte es Benutzern ermöglichen, Parameteroptionen entsprechend den Anforderungen anzupassen und das Verhalten des Plug-Ins zu steuern -in, sodass die Möglichkeit zum Wiederherstellen der Standardeinstellungen besteht. Optionen sind erforderlich. Sie können diese Optionen über die Extend-Methode von jQuery festlegen.

　(2), „return this.each(){...}“ durchläuft mehrere Elemente und gibt jQuery mithilfe der Sizzle-Auswahl-Engine zurück. Sizzle kann Operationen mit mehreren Elementen für Ihre Funktion bereitstellen (z. B. alle Klassennamen). die gleichen Elemente). Dies ist eine der wenigen großartigen Funktionen von jQuery, und selbst wenn Sie für Ihr Plugin keine Multi-Element-Unterstützung bereitstellen, ist es dennoch eine gute Möglichkeit, sich darauf vorzubereiten. Darüber hinaus verfügt jQuery über die sehr gute Funktion, Methodenkaskadierung durchzuführen, die auch als Kettenaufruf bezeichnet werden kann. Daher sollten wir diese Funktion nicht zerstören und immer ein Element in der Methode zurückgeben.

(4), abschließende Zusammenfassung

(1) jQuery bietet zwei Methoden zum Entwickeln von Plug-Ins, nämlich: jQuery.fn.extend(object); Methoden zu jQuery-Objekten hinzufügen.
jQuery.extend(object); Um die jQuery-Klasse selbst zu erweitern.

(2), fügen Sie den gesamten Code in einen Abschluss ein (eine Funktion zur sofortigen Ausführung). Zu diesem Zeitpunkt entspricht der Abschluss einem privaten Bereich, auf die internen Informationen kann von außen nicht zugegriffen werden und es kommt zu keiner Verschmutzung von globalen Variablen. Die offizielle Erklärung der Erstellungs- und Entwicklungsspezifikationen lautet: a) globale Abhängigkeiten vermeiden; b) Schäden durch Dritte vermeiden; c) mit den jQuery-Operatoren „$“ und „jQuery“ kompatibel sein;

(3) Stellen Sie Standardparameteroptionen für das Plug-In bereit. Ein Plug-In mit guter Skalierbarkeit sollte es Benutzern ermöglichen, Parameteroptionen entsprechend ihren Anforderungen anzupassen und das Verhalten des Plug-Ins zu steuern eine Option zum Wiederherstellen der Standardeinstellungen. Sie können diese Optionen über die Extend-Methode von jQuery festlegen

　(4), durchqueren Sie mehrere Elemente und geben Sie jQuery zurück, um die Sizzle-Auswahl-Engine zu verwenden. Sizzle kann Operationen mit mehreren Elementen für Ihre Funktion bereitstellen (z. B. alle Elemente mit demselben Klassennamen). Dies ist eine der wenigen großartigen Funktionen von jQuery, und selbst wenn Sie für Ihr Plugin keine Multi-Element-Unterstützung bereitstellen, empfiehlt es sich dennoch, sich während der Plugin-Entwicklung darauf vorzubereiten. Darüber hinaus verfügt jQuery über die sehr gute Funktion, Methodenkaskadierung durchzuführen, die auch als Kettenaufruf bezeichnet werden kann. Daher sollten wir diese Funktion nicht zerstören und immer ein Element in der Methode zurückgeben.

(5). Es ist wichtig, einmaligen Code außerhalb der Hauptschleife zu platzieren, aber er wird oft ignoriert. Einfach ausgedrückt: Wenn Sie einen Code haben, der aus einer Reihe von Standardwerten besteht und nur einmal instanziiert werden muss, anstatt bei jedem Aufruf Ihrer Plug-In-Funktion, sollten Sie diesen Code außerhalb der Plug-In-Methode platzieren .

(6) Denken Sie nach dem Studium darüber nach. Wenn sich die Auswahl der Projekttechnologie ändert und diese Plug-Ins stark vom „jQuery“-Mechanismus abhängig sind, können die Plug-Ins, die wir zuvor geschrieben haben, nicht sein verwendet (vorausgesetzt, dass jQuery nicht verwendet wird), was sollen wir tun?

Der morgige Artikel wird sich mit diesem Problem befassen und die Schlüssellogik des Plug-Ins rekonstruieren, also bleiben Sie dran. . .