Verkettet HTML5 classList API ohne (Jquery)

Damit eine Verkettung funktioniert, muss eine Methode das Objekt zurückgeben, mit dem Sie verketten möchten. Da .classList -Methoden weder das classList -Objekt noch das DOM-Objekt zurückgeben, können Sie nicht direkt mit ihnen verketten.

Sie könnten natürlich Ihre eigenen Methoden schreiben und sie dazu bringen, das entsprechende Objekt zurückzugeben und somit die Funktionalität kettenweise wieder zu implementieren, aber Sie müssten sie auf einen Systemprototyp setzen, um sie verwenden zu können sie so leicht.

Ohne kettenfähige Methoden neu zu implementieren, könnten Sie Ihren Code etwas verkürzen:

Wenn Sie den tatsächlichen HTML5-Objekten verkettbare Methoden hinzufügen möchten, können Sie dies tun:

Arbeitsdemo: Ссылка

Oder, wenn Sie eine .classList type Schnittstelle möchten, können Sie dies tun:

Arbeitsdemo: Ссылка

FYI, weil diese beiden Optionen das eigentliche DOM-Element verketten (im Gegensatz zur Methode von torazaburo, die ein benutzerdefiniertes Objekt kettet), können Sie am Ende eine DOM-Elementmethode / -Eigenschaft wie folgt hinzufügen:

Oder Sie können etwas wie folgt tun:

Wenn Sie nur moderne Browser unterstützen, ist die Verkettung einer der wenigen Vorteile, die jQuery immer noch gegen Vanilla-JavaScript hält, aber das sollte Sie nicht aufhalten. Wie oben bei @ jfriend00 angedeutet, können Sie eigene add / remove / toggle-Methoden erstellen, die verkettet werden können, indem Sie einfach das Objekt this zurückgeben.

Hier sind sie:

In Ihrem Fall würden Sie sie dann wie folgt anwenden:

Eine Anmerkung zur Benennung. Ich würde vorschlagen, einfach addClass und removeClass zu verwenden, weil diese Konflikte mit den eigenen Methoden von jQuery führen könnten, oder jemand, der den Code liest, würde sie mit jQuerys Methoden verwechseln. Hier habe ich ein C hinzugefügt, das für Chaining steht, aber Sie können es etwas aussagekräftiger für Sie nennen.

Bearbeiten : Ich habe eine Überprüfung hinzugefügt, um sicherzustellen, dass unsere Methoden nicht bereits früher definiert wurden, um ein Überschreiben zu vermeiden. Ich habe auch den Klassenvariablennamen von cssClass zu htmlClass geändert, weil das korrekter ist (html hat Klassen, css hat Selektoren).