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:

// 注冊我們的函數(shù)
$.fn.fancytoggle = function() {
  // ...
};

Sie k?nnen mit

// 在此元素上調(diào)用 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.

// 注冊我們的函數(shù)
$.fn.fancytoggle = function() {
  // ...
};

// 在此元素上調(diào)用 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` 指的是調(diào)用插件的 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

// 在選擇器上鏈?zhǔn)秸{(diào)用多個 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!