Was sind die jQuery-Plug-ins? Teilen Sie, wie Sie ein jQuery-Plug-in schreiben
不言
Freigeben： 2023-04-03 10:28:02
Original
1427 Leute haben es durchsucht
Was ist das jQuery-Plug-in? Gängige jQuery-Plug-Ins werden hauptsächlich in drei Typen unterteilt: Plug-Ins, die Objektmethoden kapseln, und Plug-Ins, die globale Funktionen kapseln. Was ist also das Schreiben und die Verwendung jedes jQuery-Plug-Ins basierend auf diesen drei jQuery-Plug-Ins? Lassen Sie uns als Nächstes über die Verwendung und das Schreiben von jQuery-Plug-Ins sprechen.
jQuery-Plug-in-Klassifizierung:
1. Plug-ins, die Objektmethoden kapseln
Diese Art von Plug-in kapselt Objekte Methoden und werden verwendet, um Es ist das am häufigsten verwendete Plug-In zum Bearbeiten von jQuery-Objekten, die über Selektoren erhalten werden.
2. Plug-in, das globale Funktionen kapselt
Sie können dem jQuery-Namespace unabhängige Funktionen hinzufügen. Beispielsweise sind die jQuery.noConflict()-Methode, die häufig verwendete jQuery.ajax()-Methode und die jQuery.trim()-Methode, die das erste Leerzeichen usw. entfernt, allesamt Plugins, die als globale Funktionen innerhalb von jQuery an den Kernel angehängt sind .
3． Auswahl-Plug-in
In manchen Fällen müssen Sie ein Auswahl-Plug-in verwenden.
Grundlegende Punkte des Plug-Ins
1. Es wird empfohlen, den Dateinamen des jQuery-Plug-Ins jquery.[Plug-In-Name] zu nennen. .js, um Verwechslungen mit anderen JavaScript-Bibliotheks-Plug-Ins zu vermeiden.
2. Alle Objektmethoden sollten an das jQuery.fn-Objekt angehängt werden, und alle globalen Funktionen sollten an das jQuery-Objekt selbst angehängt werden.
3. Innerhalb des Plug-Ins zeigt dies auf das jQuery-Objekt, das aktuell über den Selektor abgerufen wird, im Gegensatz zu allgemeinen Methoden, wie z. B. der click()-Methode, bei der das interne This auf das DOM-Element verweist.
4. Sie können alle Elemente durchqueren.
5. Alle Methoden oder Funktions-Plugins sollten mit einem Semikolon enden, da es sonst zu Problemen bei der Komprimierung kommen kann. Um die Sicherheit zu erhöhen, können Sie dem Header des Plug-Ins sogar ein Semikolon hinzufügen, um zu verhindern, dass der unregelmäßige Code anderer Personen das Plug-In beeinträchtigt.
6. Das Plug-in sollte ein jQuery-Objekt zurückgeben, um sicherzustellen, dass das Plug-in verkettet werden kann. Es sei denn, das Plug-in muss eine Menge zurückgeben, die abgerufen werden muss, z. B. eine Zeichenfolge oder ein Array usw.
7. Vermeiden Sie die Verwendung von $ als Alias für jQuery-Objekte innerhalb des Plug-Ins, sondern verwenden Sie vollständiges jQuery, um es darzustellen. Dadurch können Konflikte vermieden werden. Natürlich können Sie dieses Problem auch mit Abschlusstechniken umgehen, sodass das Plug-in weiterhin $ als Alias für jQuery verwenden kann. Viele Plugins tun dies.
Abschlüsse in Plug-Ins
In Bezug auf Abschlüsse gibt es in ECMAScript eine einfache Beschreibung: Sie ermöglichen die Verwendung interner Funktionen (d. h. Funktionsdefinitionen und Funktionsausdrücke). in einer anderen innerhalb des Rumpfes einer Funktion), außerdem haben diese inneren Funktionen Zugriff auf alle lokalen Variablen, Parameter und andere innere Funktionen, die in der äußeren Funktion, in der sie enthalten sind, deklariert sind, wenn eine dieser inneren Funktionen außerhalb der äußeren Funktion aufgerufen wird Wenn man sie enthält, wird ein Abschluss gebildet. Das heißt, die innere Funktion wird ausgeführt, nachdem die äußere Funktion zurückgekehrt ist. Wenn diese interne Funktion ausgeführt wird, muss sie dennoch auf die lokalen Variablen, Parameter und andere interne Funktionen ihrer externen Funktion zugreifen. Die Werte dieser lokalen Variablen, Parameter und Funktionsdeklarationen sind (zunächst) die Werte, wenn die äußere Funktion zurückkehrt, werden aber auch von der inneren Funktion beeinflusst.
Definieren Sie zunächst eine anonyme Funktion function(){/*Place code here*/} und umgeben Sie sie dann in Klammern, um sie zu erhalten (function(){/*Place code here*/}). wird über den ()-Operator ausgeführt. Parameter können zur Verwendung durch interne Funktionen übergeben werden.
//Beachten Sie, dass aus Gründen der besseren Kompatibilität vor dem Start ein Semikolon steht:
Das Obige ist die Struktur eines gängigen jQuery-Plug-Ins.
Der Mechanismus des jQuery-Plug-ins
jQuery bietet zwei Methoden zum Erweitern von jQuery-Funktionen, nämlich die Methode jQuery.fn.extend() und die Methode jQuery.extend() . Ersteres wird für den ersten der drei zuvor genannten Plug-In-Typen verwendet, und Letzteres dient zur Erweiterung der beiden letztgenannten Plug-Ins. Beide Methoden akzeptieren einen Parameter vom Typ Objekt. Die „Name/Wert-Paare“ des Objektobjekts stellen jeweils „Funktions- oder Methodenname/Funktionskörper“ dar.
Neben der Möglichkeit, jQuery-Objekte zu erweitern, verfügt die Methode jQuery.extend() auch über eine leistungsstarke Funktion, nämlich die Verwendung und Erweiterung vorhandener Objektobjekte.
jQuery-Code lautet wie folgt:
jQuery.extend(target,obj1,…….[objN])
用一个或多个其它对象来扩展一个对象，然后返回被扩展的对象。
例如合并settings对象和options对象，修改并返回settings对象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);
Nach dem Login kopieren
Das Ergebnis ist:
newOptins={valitdate:true,limit:5,name:”bar”};
Nach dem Login kopieren
Die jQuery.extend()-Methode wird häufig verwendet, um eine Reihe von Standardparametern des Plug-Ins festzulegen Methoden wie der folgende Code werden angezeigt:
function foo(options){
options=jQuery.extend({
name:”bar”,
limit:5,
datatype:”xml”
},options);
};
Nach dem Login kopieren
Wenn beim Aufruf der foo()-Methode der entsprechende Wert im übergebenen Parameteroptionsobjekt festgelegt wird, wird der festgelegte Wert verwendet, andernfalls wird der Standardwert verwendet gebraucht. Der Code lautet wie folgt:
Mit der Methode jQuery.extend() können Sie den Standardwert einfach mit den übergebenen Parametern überschreiben. An dieser Stelle bleibt der Aufruf der Methode derselbe, mit der Ausnahme, dass anstelle einer Parameterliste eine Karte übergeben wird. Dieser Mechanismus ist nicht nur flexibler, sondern auch präziser als die herkömmliche Methode zur Erkennung jedes Parameters. Darüber hinaus bedeutet die Verwendung benannter Parameter, dass das Hinzufügen neuer Optionen keine Auswirkungen auf den in der Vergangenheit geschriebenen Code hat, was die Verwendung für Entwickler intuitiver und klarer macht.
Ein jQuery-Plug-in schreiben
1. Plug-in, das jQuery-Objektmethoden kapselt
Ein Plug-in schreiben, das das setzt und abruft color
Stellen Sie zunächst vor, wie Sie ein color()-Plug-in schreiben. Mit diesem Plug-In werden die folgenden zwei Funktionen implementiert.
Das obige ist der detaillierte Inhalt vonWas sind die jQuery-Plug-ins? Teilen Sie, wie Sie ein jQuery-Plug-in schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
