Einführung in die Entwicklung von JQuery -Plugins

JQuery Plug-In: Ein leistungsstarkes Tool zur Verbesserung der Entwicklungseffizienz

In diesem Artikel wird die Entwicklung von JQuery-Plug-Ins eingehend untersucht, seine Vorteile erläutern und Sie dazu führen, dass Sie Schritt für Schritt Ihre eigenen Plug-Ins-Ins erstellen. Das JQuery-Plug-In kann die Entwicklungszeit erheblich verkürzen und die Wiederverwendung von Code verbessern. Schreiben Sie einfach den Funktionscode einmal und Sie können ihn in mehreren Projekten wiederverwenden und die Entwicklungseffizienz erheblich verbessern. Wir werden ein Beispiel-Plug-In namens fancytoggle als Beispiel verwenden, um verschiedene Links der Plug-in-Entwicklung zu demonstrieren. Dieses Plug-In wird verwendet, um die Sichtbarkeit verschachtelter Elemente wie Listenelemente umzuschalten, um interaktive Komponenten zu erstellen, die dem Akkordeon ähnlich sind, wie z. B. dem FAQ-Abschnitt. Sie können CodePen besuchen, um die tatsächlichen Auswirkungen des fancytoggle -Plugins zu sehen.

Plugin -Vorteile: Code -Wiederverwendung und Erweiterbarkeit

Der Kern des Jquery -Plugins ist die Skalierbarkeit, die Sie Ihrem Projekt problemlos hinzufügen können, um die gewünschten Funktionen schnell zu implementieren. Der Plug-in-Mechanismus von JQuery vereinfacht den Konstruktionsprozess von wiederverwendbarem Code. Ein wesentlicher Vorteil von Plug-Ins besteht darin, dass Entwickler mehrere Optionen definieren können, um die Funktionalität des Plug-Ins anzupassen. Sie können Optionen erstellen, die die Funktionsweise des Plug-Ins vollständig ändern, oder nur wenige Optionen definieren, wodurch Benutzer mehr Kontrolle über den Stil oder Layout erhalten.

JQuery Plug-in-Entwicklungsschritte

unten erklären wir nach und nach, wie Sie ein neues JQuery-Plug-In registrieren und das fancytoggle -Pugh-In als Beispiel zur Veranschaulichung verwenden.

1. Das Plug-In jQuery funktioniert, indem eine Funktion registriert wird, deren Name der Anrufname ist, der das Plug-In auslöst (z. B. die in JQuery eingebaute

oder

-Funktionen, um Breite/Höhe zu erhalten). Wir fügen die Funktion dem JQuery .width() -Objekt hinzu, um sie dem globalen .height() -Objekt zur Verfügung zu stellen. Dadurch wird unsere Funktion registriert und ermöglicht, dass sie ein Objekt oder einen Selektor aufgerufen werden. $.fn $

Das ist es! Sie haben jetzt eine neue JQuery -Methode. Derzeit tut es nichts, aber Sie können diese Methode jederzeit und überall aufrufen, zum Beispiel in einem Selektor:

// 注册我们的函数
$.fn.fancytoggle = function() {
  // ...
};

Sie können mit

// 在此元素上调用 fancytoggle
$('.my-element').fancytoggle();

so viele Funktionen registrieren, wie Sie möchten. Es ist jedoch die beste Praxis, mehrere Funktionen zu registrieren, es sei denn, das Plugin erledigt völlig unterschiedliche Aufgaben.

$.fn

2.

ein wichtiges Konzept verstehen: Wenn ein Plugin aufgerufen wird, kann es auf ein einzelnes Element oder mehrere Elemente angewendet werden. Wenn wir beispielsweise auf mehrere verschiedene Projekte anwenden, haben wir eine Sammlung, die innerhalb der Funktion verarbeitet werden muss. Um jedes Element zu verarbeiten, verwenden wir nur die Funktion von Jquery , um die Sammlung zu durchqueren:

fancytoggle() Wir iterieren über jedes Element der Sammlung und setzen sie. Wir können Berechnungen durchführen, Event -Hörer hinzufügen oder unsere Elemente in irgendeiner Weise bedienen. $.each Stellen Sie sicher, dass wir das richtige Element verweisen.

3 In den meisten Fällen funktioniert Ihr Plugin, indem er es direkt auf dem Objekt oder dem Selektor aufruft. Dadurch werden die Funktionen von Plugins für das Projekt ausgeführt. Ein Merkmal von JQuery ist das Konzept von Kettenaufrufen, bei dem Sie mehrere Methoden in einem Projekt aufrufen können. Jede Methode wird in der Reihenfolge ausgeführt:

Dies wählt ein Element aus, füge eine aktive Klasse hinzu und schieben Sie es dann nach oben oder unten. Jede Methode gibt ein Objekt zurück, und dann wird die nächste Methode auf dieses Objekt aufgerufen. Damit unser Plugin auf diese Weise funktioniert, müssen Sie das Projekt nur am Ende der Plugin -Funktion zurückgeben. Dies ist zwar nicht notwendig, aber es wird dringend empfohlen.

// 注册我们的函数
$.fn.fancytoggle = function() {
  // ...
};

// 在此元素上调用 fancytoggle
$('.my-element').fancytoggle();

4.

Eine Reihe von Optionen kann an das Plugin übergeben werden, um die Funktionsweise zu ändern. Diese Optionen werden an Ihre Funktion als eine Reihe von Schlüsselwertpaaren übergeben (JavaScript-Objekte):

Damit unser Plugin Optionen handhaben, müssen wir die zu verwendenden Standardeinstellungen definieren. Wir können dann die

-Methode von JQuery verwenden, um unsere Standardoptionen mit den Optionen zusammenzufassen, die beim Aufrufen des Plugins übergeben wurden:

$.fn.fancytoggle = function(options) {
  // `this` 指的是调用插件的 jQuery 元素
  this.each(function(index, value) {
    // 插件功能的其余部分在此处
  });

  return this;
};

Sie können so viele Optionen definieren, wie Sie für das Plugin möchten. Möglicherweise möchten Sie einige grundlegende Einstellungen oder andere Elemente einfügen, mit denen das Plugin selbst konfiguriert werden kann. $.extend

// 在选择器上链式调用多个 jQuery 方法
$('.my-element')
  .addClass('active')
  .slideToggle('fast');

5

Ereignishörer sind Funktionen, die in einem bestimmten Moment im Lebenszyklus des Plugins aufgerufen wurden. Diese Rückrufe ermöglichen es anderen (oder sich selbst), sich mit kritischen Teilen des Plugins zu verbinden und zusätzliche Funktionen auszulösen. Viele JQuery -Plugins für Entwickler haben Rückrufe, mit denen Sie eine Verbindung herstellen können, z. B. beim Klicken auf eine Folie oder das Schließen eines Modusfensters. Sie definieren diese Rückrufe als Elemente in den Standardoptionen. $.extend

6 Überlegen Sie, was passiert, wenn JS deaktiviert ist. Ohne es funktioniert unser Plugin nicht und wir haben den HTML -Inhalt, den wir verwenden, nicht mehr. Für unser Beispiel erstellen wir einen Toggylleable -Abschnitt mit einem Titel- und Inhaltskörper (klicken Sie auf den Titel, um den Körper auf und ab zu wechseln). Wenn wir JS nicht aktivieren, funktioniert unsere Inhalte immer noch perfekt. Betrachten Sie immer diese Situationen.

Nächste Schritte

Sie können die in diesem Artikel beschriebenen grundlegenden Konzepte auf den vorhandenen Code anwenden, ihn in ein Plugin umwandeln, das leicht zu konfigurieren und zu erweitern ist, und dann zu Ihrem nächsten Projekt hinzugefügt werden. Mehrere Teile der Jquery -Website selbst zur Plugin -Entwicklung sind lesenswert.

Zusammenfassung

Sie sollten jetzt ein tieferes Verständnis dafür haben, was JQuery -Plugins sind und wie Sie sie nutzen können, um die Entwicklung zu beschleunigen und zu vereinfachen. Was wir abdecken, beinhaltet:

• Verwenden Sie $.fn Plugin zum Namespace
hinzufügen?
• Zusammenbruch mit mehreren Sammlungen .each
So erstellen Sie eine kettenhalbare Methode (und senden Sie sie für Konsistenz korrekt zurück)
So erstellen Sie Standardoptionen und fusionieren Sie sie mit den benutzerdefinierten Werten, die in
• übergeben wurden
Wichtiger Teil dessen, wie Event-Rückrufe Entwickler auf einfache Weise auf Plug-in-Funktionen zugreifen können
führt kurz progressive Verbesserung ein (Hinweise, wenn JS nicht verfügbar ist)

Ich hoffe, dieser Artikel kann Ihnen helfen, JQuery-Plug-Ins besser zu verstehen und zu entwickeln.

Das obige ist der detaillierte Inhalt vonEinführung in die Entwicklung von JQuery -Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!