Glücklicherweise haben die Leute normalerweise eine Vielzahl verschiedener Plugins zur Auswahl. Aber auch wenn Sie nur eines verwenden, überlegen Sie, ob es sich lohnt, es zu verwenden. Fügen Sie niemals fehlerhaften Code in Ihre Codebasis ein.
Benötigen Sie ein Plug-In?
Als Erstes müssen Sie herausfinden, ob Sie ein Plug-in benötigen. Wenn Sie es nicht benötigen, sparen Sie sowohl Dateigröße als auch Zeit.
1. Ist es besser, es selbst zu schreiben?
Wenn die Funktion sehr einfach ist, schreiben Sie sie selbst. Plugins für jQuery bündeln oft verschiedene Funktionen, die übertrieben sein können. In diesem Fall ist es oft sinnvoller, einfache Funktionen von Hand zu schreiben. Natürlich gibt es ein gewisses Maß an Arbeitsaufwand.
Wenn Sie beispielsweise erweiterte Funktionen benötigen, ist das Akkordeon der jQuery-Benutzeroberfläche eine gute Wahl. Aber wenn Sie nur das Panel öffnen und schließen müssen. Wenn Sie die jQuery-Benutzeroberfläche noch nicht auf Ihrer Website verwenden, sollten Sie slideToggle() oder animate() von jQuery in Betracht ziehen.
2. Benutzen Sie bereits ein ähnliches Plug-in?
Es ist sehr verlockend, festzustellen, dass ein Plug-in nicht alles löst, was Sie benötigen, und nach einem anderen Plug-in zu suchen, um das auszugleichen. Aber das Einbinden zweier ähnlicher Plugins in dieselbe Anwendung ist definitiv ein aufgeblähtes JavaScript. Können Sie ein Plugin finden, das alle Ihre Bedürfnisse abdeckt? Wenn nicht, können Sie eines dieser Plugins erweitern, um alles abzudecken, was Sie benötigen? Ebenso sollten Sie bei der Entscheidung, ob Sie ein Plugin erweitern möchten, die Vorteile gegenüber der Entwicklungszeit abwägen.
Beispielsweise ist die Lightbox von jQuery eine großartige Möglichkeit, Popup-Fotos in einer Galerie anzuzeigen, und simpleModal ist eine großartige Möglichkeit, dem Benutzer modale Informationen anzuzeigen. Aber warum nutzt Ihre Website beide Methoden? Sie können eines ganz einfach erweitern, um beide Bedürfnisse abzudecken. Besser noch, finden Sie ein Plugin, das alles abdeckt, wie zum Beispiel Colorbox.
3.Benötigen Sie JavaScript?
In manchen Fällen ist JavaScript nicht erforderlich. CSS-Pseudoselektoren wie Hover- und CSS3-Transitionsfunktionen können eine Vielzahl dynamischer Effekte abdecken, und zwar weitaus schneller als JavaScript-Lösungen. Darüber hinaus stellen viele Plug-Ins nur Stile bereit; ich bin der Meinung, dass die Verwendung von Markup und CSS möglicherweise besser ist.
Wenn Sie dynamische Inhalte anzeigen müssen und bedingte Eingabeaufforderungen benötigen, ist der jQuery-Tooltip unerlässlich. Wenn Sie jedoch nur an wenigen Stellen Hinweise benötigen, ist es besser, reines CSS zu verwenden (siehe dieses Beispiel). Bei statischen Eingabeaufforderungen können Sie noch einen Schritt weiter gehen und sie mithilfe von CSS3-Übergängen animieren. Vergessen Sie jedoch nicht, dass die Animation nur in bestimmten Browsern funktioniert.
Bei der Überprüfung eines Plugins weist eine Reihe von Warnzeichen darauf hin, dass das Plugin von schlechter Qualität ist. Hier betrachten wir jeden Aspekt von Plugins, von JavaScript über CSS bis hin zu Markup. Wir werden sogar darüber nachdenken, wie man Plugins verteilt. Alle in einem Plugin vorhandenen Warnungen schließen Ihr Plugin von der Berücksichtigung aus. Wenn Sie das Glück haben, mehrere Plugins zur Auswahl zu haben, können diese Vorbehalte dabei helfen, Ihre Auswahl einzugrenzen. Doch selbst wenn es nur eine Option gibt, ist es besser, aufzugeben, wenn zu viele Warnungen angezeigt werden. Sie können Ihre Kopfschmerzen schon im Vorfeld reduzieren.
Seltsame Options- oder Parametersyntax
Bei der Verwendung von jQuery sind Entwicklungsingenieure besorgt darüber, wie die Funktion Parameter akzeptiert. Wenn ein Plugin-Entwickler eine spezielle Syntax verwendet, kann man davon ausgehen, dass er nicht über viel Erfahrung in der Programmierung mit jQuery oder JavaScript verfügt.
Einige Plugins akzeptieren ein jQuery-Objekt als Parameter, erlauben aber keine Verkettung des Objekts, zum Beispiel $.myPlugin( $('a') ); statt $('a').myPlugin(); Das ist eine große Warnung.
Code:
$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));
5. Wenig oder keine Dokumentation
Ohne Dokumentation ist es sehr schwierig, ein Plug-in zu verwenden, da dies der erste Ort ist, an den man denkt, wenn man nach Antworten auf Fragen sucht. Dateien gibt es in verschiedenen Formaten und eine ordnungsgemäße Dokumentation ist am besten, aber gute Codekommentare können genauso gut sein. Wenn keine Dokumentation vorhanden ist oder es sich nur um ein einfaches Beispiel zum Bloggen handelt, sollten Sie andere Optionen in Betracht ziehen. Eine gute Dokumentation zeigt, dass sich der Autor des Plugins um Benutzer wie Sie kümmert. Es zeigt auch, dass sie andere Plugins recherchiert haben und den Wert einer guten Dokumentation kennen.
6. Schlechte Supportbilanz
Mangelnde Unterstützung bedeutet, dass es schwierig sein wird, Hilfe zu bekommen, wenn Probleme entdeckt werden. Was noch besorgniserregender ist, ist, dass es darauf hinweist, dass das Plugin seit einiger Zeit nicht mehr aktualisiert wurde. Ein Vorteil von Open-Source-Software besteht darin, dass sie viel Aufmerksamkeit erregt und Ihnen beim Debuggen und Verbessern hilft. Wenn der Autor nicht über diese Personen spricht, wird das Plugin nicht aktualisiert.
Wann wurde das Plugin, das Sie in Betracht gezogen haben, das letzte Mal aktualisiert? Wann haben Sie das letzte Mal auf eine Nachricht geantwortet? Allerdings müssen nicht alle Plug-Ins über ein starkes Supportsystem wie die jQuery-Plug-Ins-Website verfügen. Seien Sie vorsichtig bei Plugins, die nie aktualisiert werden.
Vergangene technische Supportaufzeichnungen zu haben und der Autor auf Fehler zu reagieren oder Anforderungen zu verstärken, ist ein grünes Zeichen. Das Vorhandensein eines Support-Forums zeigt außerdem an, dass das Plugin gut unterstützt wird. Wenn nicht der Autor, gibt es zumindest ein Forum, das Ihnen bei der Lösung von Problemen hilft.
7. Keine komprimierte Version
Auch wenn es sich um eine eher geringfügige Warnung handelt: Wenn der Ersteller des Plugins keine verkleinerte Version des Quellcodes bereitstellt, schenkt er der Leistung wahrscheinlich nicht viel Aufmerksamkeit. Natürlich können Sie die Komprimierung selbst durchführen, aber diese Warnung ist keine Zeitverschwendung: Sie ist ein Hinweis darauf, dass das Plugin möglicherweise schwerwiegendere Leistungsprobleme enthält.
Andererseits ist es ein Zeichen, komprimierte, gepackte und gzip-Versionen zum Download anzubieten.
8. Brauchen Sie einen seltsamen Aufschlag
Wenn für ein Plug-in ein Markup erforderlich ist, sollte das Markup von hoher Qualität sein. Es sollte dem semantischen Sinn entsprechen und flexibel genug sein. Neben schlechter Frontend-Technologie können auch seltsame Markups die Integration erschweren. Ein gutes Plug-in kann fast jeden Markup abdecken, den Sie verwenden; die Verwendung eines schlechten Plug-ins ist wie ein Sprung durch die Reifen.
In einigen Fällen ist ein strenger Aufschlag erforderlich, sodass die Verwendung innerhalb eines bestimmten Bereichs zulässig sein sollte. Grundsätzlich gilt: Je spezifischer die Funktionalität, desto spezifischer sind die Markup-Anforderungen. Vollständig flexibles Markup lässt sich am einfachsten aus jeder natürlichen Drop-in-jQuery-Option integrieren.
9. Übermäßiger Einsatz von CSS
Viele jQuery-Plug-Ins enthalten CSS, und die Qualität von CSS ist die gleiche wie bei JavaScript. Zu viel CSS ist definitiv ein schlechtes Zeichen. Aber was „vorbei“ ist, hängt vom Zweck des Plugins ab. Display-fokussierte Plugins wie Lightboxes oder UI-Plugins erfordern mehr CSS als einfache animationsgesteuerte Plugins. Gute CSS-Stile erleichtern die Anpassung des Programms an Ihren Theme-Stil.
10. Niemand sonst verwendet es
Die Anzahl der jQuery-Benutzer ist riesig und das anständigste Plugin wird wahrscheinlich etwas darüber geschrieben haben, selbst wenn es ein „50 jQuery [fülle die Lücke aus]“ ist. Wenn Sie beispielsweise ein einfaches Google-Such-Plug-in erstellen und nur wenige Suchergebnisse erhalten, sollten Sie andere Optionen in Betracht ziehen, es sei denn, das Plug-in ist ganz neu, oder Sie finden einen Ingenieur, der sich auf das Schreiben von Plug-ins spezialisiert hat um es zu ändern.
11. Verwendung und Beobachtung
Der beste Weg, ein Plugin zu testen, besteht darin, es einfach auf dem Server auszuführen und die Ergebnisse zu sehen. Erstens: Verstößt es gegen einige Regeln? Werfen Sie unbedingt einen Blick auf das JavaScript-Code-Snippet. Wenn das Plugin ein Stylesheet enthält, suchen Sie auf jeder Seite nach Layout- und Stilfehlern.
Wie wirkt sich dieses Plug-in außerdem aus? Wenn es langsam ist oder die Seite verzögert lädt, ziehen Sie ein anderes Plugin in Betracht.
12. Verwenden Sie JSPerf zur Leistungsbeurteilung
Bringen Sie Ihre Plug-in-Präsentation auf die nächste Stufe und testen Sie sie mit JSPerf. Beim Benchmarking wird eine Reihe von Vorgängen mehrmals ausgeführt und die durchschnittliche Ausführungszeit zurückgegeben. JSPerf bietet eine einfache Möglichkeit, zu testen, wie schnell ein Plugin ausgeführt wird. Dies ist eine wichtige Möglichkeit, zwei nahezu identische Plugins auszuwählen.
13. Browserübergreifende Tests
Wenn ein Plugin viel CSS enthält, testen Sie die Stile unbedingt in allen Browsern, die Sie unterstützen möchten. Denken Sie daran, dass CSS sowohl aus externen Stylesheets als auch aus internem JavaScript stammen kann.
Auch wenn das Plugin kein CSS hat, überprüfen Sie trotzdem alle Browser auf JavaScript-Fehler (zumindest in der frühesten von Ihnen unterstützten IE-Version). Der Kern von jQuery bewältigt bereits die meisten browserübergreifenden Probleme, Plugins verwenden jedoch in der Regel eine gewisse Menge reines JavaScript, was tendenziell gegen die Regeln älterer Browser verstößt.
14. Unit-Tests
Abschließend sollten Sie weitere browserübergreifende Tests in Betracht ziehen – Unit-Tests. Unit-Tests sind eine einfache Möglichkeit, Komponenten-Plugins zu testen, die jeden Browser und jede Plattform unterstützen. Wenn der Plugin-Autor Unit-Tests in das Download-Paket aufgenommen hat, können Sie darauf wetten, dass das Plugin auf allen Browsern und Plattformen funktioniert. Leider enthalten nur sehr wenige Plug-Ins Unit-Test-Daten, aber das bedeutet nicht, dass Sie das QUnit-Plug-In nicht zur Durchführung Ihrer eigenen Unit-Tests verwenden können.
Testen Sie mit minimalen Einstellungen, ob die Methoden des Plugins die erwarteten Ergebnisse liefern. Solange ein Test fehlschlägt, verschwenden Sie keine Zeit mit diesem Plugin. In den meisten Fällen ist die Durchführung von Unit-Tests etwas Zeitverschwendung, aber QUnit kann Ihnen dabei helfen, die Qualität Ihres Plugins zu bestimmen.
Fazit
Wenn Sie die Qualität eines jQuery-Plug-Ins bewerten, bewerten Sie zunächst die Codequalität. Ist JavaScript optimiert und fehlerfrei? Ist das CSS angepasst und gültig? Ist die Benennung des Markups semantisch und flexibel genug? Diese Fragen laufen alle auf die wichtigste Frage hinaus: Ist dieses Plugin einfach zu verwenden?
Der Kern von jQuery ist optimiert und fehlergeprüft und wird nicht nur von Kernteammitgliedern, sondern auch von der gesamten jQuery-Community unterstützt. Auch wenn es unfair ist, für jQuery-Plugins dieselben Standards festzulegen, sollte es zumindest einige derselben Überprüfungsstandards geben.
