DOMmy.js ist eine superleichte, eigenständige Javascript-Bibliothek, die für die einfache Zusammenarbeit mit dem DOM und die Erstellung leistungsstarker CSS3-Animationen über JS konzipiert ist.
Vollständige Offenlegung: Ich habe DOMmy.js entwickelt. Und in diesem Tutorial möchte ich zeigen, wie Sie damit Ihre Webseiten schön und übersichtlich halten können.
DOMmy.js hat eine sehr flache Lernkurve; Es ist sogar noch flacher, wenn Sie jemals ein Framework im Stil einer alten Generation wie jQuery oder Prototype verwendet haben.
DOMmy.js ist kein Framework der nächsten Generation wie Vue.js, React oder Angular; Hierbei handelt es sich um Tools, die neue Technologien wie das virtuelle DOM, dynamische Vorlagen und Datenbindung nutzen. Sie verwenden Tools der nächsten Generation, um asynchrone Anwendungen zu erstellen.
DOMmy.js ist ein Javascript-Framework zum Schreiben von „klassischem“ Javascript-Code, das mit dem DOM auf der Kernebene arbeitet. Ein Javascript-Framework wie jQuery erledigt eine ähnliche Aufgabe, mit drei großen Unterschieden:
- jQuery verwendet eine proprietäre interne Engine, um mit Selektoren zu arbeiten und Animationen zu erstellen. Diese Engine basiert vollständig auf Javascript. Umgekehrt können Sie mit DOMmy.js jedes Element im DOM auswählen und leistungsstarke Animationen erstellen, indem Sie die modernen und äußerst leistungsstarken Besonderheiten von Javascript und CSS3 nutzen. Ich musste keine Javascript-Engine schreiben, um mit DOM und Animationen zu arbeiten. Die browserübergreifenden, flexiblen und leistungsstarken Tools, die Ihnen dies ermöglichen, sind bereits verfügbar. Ich wollte lediglich eine Javascript-Struktur, die Entwickler beim Schreiben von DOM-Steuerelementen und CSS3-Animationen mithilfe der Javascript-Sprache unterstützt.
- DOMmy.js ist eine Javascript-Struktur, die in die Zukunft blickt. Es ist so geschrieben, dass es mit einigen der neuesten Versionen der wichtigsten Browser kompatibel ist, aber ich möchte nicht, dass mein Code mit sehr alter Software wie IE6/7 und ähnlichem kompatibel ist.
- jQuery und Prototype verfügen beide über vollständige APIs, die auf einer internen Engine basieren. DOMmy.js bietet Steuerelemente für nur zwei Hauptfunktionen: DOM-Operationen und Animationen; Andere Aufgaben können problemlos mit Vanilla-Javascript oder durch Erweiterung der zentralen Struktur von DOMmy.js erledigt werden.
DOMmy.js ist also eine browserübergreifende, superleichte (die minimierte Version wiegt nur 4 KB), supereinfach zu erlernende, superschnell auszuführende Javascript-Bibliothek. Kurz gesagt, mit DOMmy.js können Sie:
- Navigieren Sie durch das DOM, indem Sie HTML-Elemente und Elementsammlungen auswählen und mit ihnen arbeiten.
- Erstellen Sie leistungsstarke CSS3-Animationen und Animationssammlungen.
- (mehrere) Ereignisse, CSS-Eigenschaften und Attribute zu Elementen hinzufügen;
- Verwenden Sie einen Elementspeicher, um bestimmte Inhalte zu speichern und abzurufen.
- kohärent arbeiten Das Struktur;
- Habe einen Cross-Browser DOMReady Mode, mit der Sie nicht warten müssen, bis Ressourcen (wie Bilder und Videos) vollständig geladen sind, um mit DOM zu arbeiten.
DOMmy.js installieren
Die Implementierung von DOMmy.js in Ihre Webseite ist einfach. Sie müssen das Skript nur über das einbinden Skript Tag, und schon kann es losgehen. Du kannst Laden Sie das Skript herunter und verwenden Sie es lokal oder laden Sie es über die Website des Projekts:
Der DOM ist bereit!
Wie ich bereits sagte, müssen wir mit DOMmy.js nicht warten, bis die Ressourcen der Seite geladen sind, um mit DOM zu arbeiten. Dazu verwenden wir die $$$ Funktion. Der in dieser praktischen Funktion platzierte Inhalt wird ausgeführt, wenn die DOM-Struktur (und nicht die „Seite“) fertig ist. Das Schreiben von Code mit DOMmy.js ist superschnell. Ich wollte ein Snippet erstellen, das es mir ermöglicht, so wenig Code wie möglich zu schreiben, also denke ich, dass nichts schneller ist als das Schreiben:
$$$(function() { // wenn DOM bereit ist, tun Sie dies });
…auf eigenständige Weise. Natürlich können Sie beliebig viele verwenden DOMReady Blöcke, wie Sie wollen oder brauchen:
// Block 1 $$$(function() { // Wenn DOM bereit ist, tun Sie dies }); // Block 2 $$$(function() { // Wenn DOM bereit ist, tun Sie dies }); // Block 3 $$$(function() { // Wenn DOM bereit ist, tun Sie dies });
Wählen Sie DOM-Elemente aus
Jetzt können wir mit der Arbeit an unserer DOM-Struktur beginnen. Sie können das gewünschte Element auswählen, indem Sie eine HTML-„ID“ verwenden. Dies geschieht mit dem $ Funktion:
// wähle ein Element nach ID aus. // In diesem Fall wählen Sie das Element mit der ID „myElement“ aus $(‘myElement’);
Und Sie können die gewünschte Sammlung/Liste der Elemente mithilfe eines CSS-Selektors auswählen. Dies geschieht mit dem $$ Funktion:
// eine Sammlung von Elementen mit dem CSS-Selektor auswählen $$(‘#myid div.myclass p’)
Natürlich können Sie auch mehrere Elemente auswählen, indem Sie mehrere Selektoren verwenden:
// eine Auswahl von HTML-Elementen $$(‘#myfirstelement, #mysecondelement’) // eine weitere Auswahl von HTML-Elementen $$(‘#myfirstelement div.myclass a, #mysecondelement span’)
Der DOM-Auswahl sind keine Grenzen gesetzt. Die Elemente werden in die endgültige Sammlung aufgenommen, mit der Sie mit den DOMmy.js-Methoden arbeiten können.
Ereignisse hinzufügen
Das Hinzufügen von Ereignissen zu Elementen (browserübergreifend) ist sehr einfach. Benutzen Sie einfach die An Methode für die Sammlung von Elementen, an die Sie die Ereignisse mit dem spezifischen Ereignis anhängen möchten:
// einem Element ein Ereignis hinzufügen, das ausgelöst wird, wenn Sie auf das Element klicken $(‘myElement’).on(‘click’, function() { log(‘Hey! Du hast auf mich geklickt!’); });
Hinweis: Die Funktion Protokoll ist eine integrierte Funktion, die als globale browserübergreifende Verknüpfung für console.log fungiert. Wenn der Browser das Konsolenobjekt nicht unterstützt, wird das Ergebnis in einem globalen Warnfeld ausgegeben.
Sie können natürlich mehrere Ereignisse gleichzeitig hinzufügen:
// einem Element ein Ereignis hinzufügen $$(‘#myElement p’).on({ // CLICK event ‘click’: function() { log(‘Hey, du hast hier geklickt!’); }, // MOUSEOUT event ‘mouseout’: function() { log(‘Hey, Sie haben den Mauszeiger hierher bewegt!’); } });
Wie Sie sehen, müssen Sie die DOMmy.js-Methoden nicht auf jedes Element anwenden. Sie wenden die Methoden direkt auf das Ergebnis der DOM-Auswahl an und die interne Engine iteriert ordnungsgemäß durch die HTML-Elemente.
Sie können auf das „aktuelle“ Element in der Iteration zugreifen, indem Sie einfach verwenden Das Stichwort:
$(‘demo’).on({ ‘click’: function() { this.css({‘width’: ‘300px’}) .html(‘Fertig!’); } });
Arbeiten mit Attributen
Auf die gleiche Weise können Sie die Werte von HTML-Attributen hinzufügen, bearbeiten und abrufen:
// ein Attribut abrufen var title = $(‘myElement’).attr(‘title’); // ein Attribut setzen $(‘myElement’).attr(‘title’, ‘my title’); // Mehrere Attribute festlegen $(‘myElement’).attr({‘title’: ‘my title’, ‘alt’: ‘alternate text’});
Der attr Die Methode funktioniert auf drei verschiedene Arten:
- Es gibt den Wert des angegebenen Attributs zurück, wenn das von Ihnen angegebene Argument eine Zeichenfolge ist.
- es setzt ein HTML-Attribut auf einen neuen Wert, wenn Sie zwei Argumente übergeben;
- Es legt eine Sammlung von HTML-Attributen fest, wenn Sie ein Objekt aus Schlüssel/Wert-Paaren übergeben, die die Attribute des Elements darstellen.
CSS-Stile festlegen
Genau wie HTML-Attribute können Sie mit dem CSS-Werte festlegen und abrufen CSS Methode:
// einzelnes CSS setzen $(‘myElement’).css(‘display’, ‘block’); // Mehrere CSS festlegen $(‘myElement’).css({‘display’: ‘block’, ‘color’: ‘white’}); // einzelnes CSS abrufen $(‘myElement’).css(‘display’); // mehrere CSS abrufen $(‘myElement’).css([‘display’, ‘color’]);
Wie Sie sehen, mit den Mächtigen CSS Methode können Sie:
- Setzen Sie eine einzelne CSS-Eigenschaft auf einen neuen Wert, wenn Sie zwei Zeichenfolgen übergeben.
- den Wert einer CSS-Eigenschaft abrufen, wenn Sie eine Zeichenfolge übergeben;
- Legen Sie mehrere CSS-Eigenschaften fest, wenn Sie ein Objekt aus Schlüssel/Wert-Paaren übergeben.
- Rufen Sie ein Array von Werten ab, wenn Sie ein Array von Zeichenfolgen übergeben, die CSS-Eigenschaften darstellen.
HTML-Inhalte abrufen und festlegen
Mit dem html Mit dieser Methode können Sie den HTML-Wert des Elements festlegen und abrufen:
// set html $(‘myElement’).html(‘new content’); // HTML abrufen var content = $(‘myElement’).html(); // protokolliert „neuen Inhalt“ log ( content );
Wiederholung
Wenn Sie mehr als ein Element auswählen, können Sie in nur einem Aufruf eine DOMmy.js-Methode auf jedes Element anwenden.
Wenn Sie jedoch mit jedem Element manuell arbeiten möchten, beispielsweise wenn Sie Inhalte abrufen (z. B. HTML-Inhalte oder gespeicherte Inhalte). In diesem Fall können Sie das Handy nutzen für jede Funktion auf folgende Weise:
// alle Divs abrufen var myels = $$(‘div’); // einen gespeicherten Inhalt festlegen myels.set(‘val’, 10); // Durchlaufe jedes einzelne Div und gebe seine Attribute aus myels.forEach(function(el, i) { log(el.attr(‘id’) + el.get(‘val’) + ‘ \n’); }) ;
Der für jede Die Funktion ist die bevorzugte Methode zum Durchlaufen von HTML-Elementsammlungen mithilfe von DOMmy.js. Bei der Anwendung auf ein DOMmy.js-Element werden zwei Parameter verwendet:
- Element: das DOMmy.js-Element, das Sie auswählen. Sie können jede DOMmy.js-Methode darauf anwenden;
- Index: ein Index, der die Position des Elements in den Elementsammlungen darstellt.
Lagerung
Der Speicher ist ein zu Elementen gehörender Ort, an dem Sie beliebig viele Werte speichern und zum gewünschten Zeitpunkt abrufen können. Sie können mit dem Speicher arbeiten, indem Sie die verwenden Satz Und erhalten Methoden:
// Speichervariable festlegen myVal = “hello”; $(‘myElement’).set(‘myVal’, myVal); // mehrere Speichervariablen mySecondVal = “everybody”; $(‘myElement’).set({‘myVal’: myVal, ‘mySecondVal’: mySecondVal}); // get $(‘myElement’).get(‘myVal’) + $(‘myel’).get(‘mySecondVal’); // “Hallo zusammen”
Wie Sie sehen, können Sie einzelne Artikel oder mehrere Artikel gleichzeitig lagern. Die von Ihnen gespeicherten Artikel gehören zu dem Element, das Sie auswählen.
Hinweis: Denken Sie daran, dass bei der Auswahl mehrerer Elemente das Element in jedem dieser Elemente gespeichert wird, auch wenn das CSS leicht unterschiedlich ist, da DOMmy.js jedes spezifische Element erkennt:
// Ein Element auf div#a und div#b setzen $$(‘div#a, div#b’).set(‘myStoredValue’, 10); // von #a holen, das ist natürlich dasselbe wie div#a $(‘a’).get(‘myStoredValue’); // 10
Natürlich identifizieren die internen Mechanismen von DOMmy.js „div#a“ und „a“ / „#a“ als denselben Zeiger auf dasselbe Element, sodass Sie sicher und kohärent mit Speicher und anderen DOMmy.js-Methoden arbeiten können.
Wenn Sie das DOM-Element in einer einzelnen Variablen speichern, was die beste Möglichkeit ist, mit HTML-Elementen zu arbeiten, können Sie gleichzeitige Aufrufe umgehen und Speicherplatz gewinnen:
const myEl = $(“div#a div”); // Daten speichern myEl.set(‘myStoredValue’, 10); // Daten abrufen myEl.get(‘myStoredValue’); // 10
CSS3-Animationen
Das Kronjuwel von DOMmy.js ist seine Animations-Engine. Dies basiert auf der CSS3-Animations-Engine und funktioniert daher mit allen gängigen Browsern. Animationen werden durch das generiert fx Methode, die die folgenden Argumente akzeptiert:
- ein Objekt, das die zu animierende CSS-Eigenschaft darstellt;
- eine Zahl, die die Dauer der Animation in Sekunden angibt. Der Standardwert beträgt 5 Sekunden;
- eine Funktion, die einen Rückruf darstellt, der aufgerufen wird, sobald die Animation abgeschlossen ist;
- ein boolescher Wert, der angibt, ob gleichzeitige Animationen verkettet werden sollen oder nicht. Der Standardwert ist falsch.
Mal sehen, wie man das verwendet fx Methode, indem zwei einfache Animationen erstellt werden.
// einfache Animation $(‘myel’).fx({‘width’: ‘300px’, ‘height’: ‘300px’}, 2);
Hier ändern wir einfach die CSS-Eigenschaften width und height von #myel in 2 Sekunden. Im folgenden Beispiel erstellen wir dieselbe Animation mit einer Dauer von 1 Sekunde und mit einer Callback-Funktion, die den HTML-Inhalt des Elements mit der Meldung „Completed!“ bearbeitet. Zeichenfolge.
Sie können auf das aktuelle Element zugreifen, indem Sie verwenden Das Stichwort:
// einfache Animation mit Callback $(‘myel’).fx({‘width’: ‘300px’, ‘height’: ‘300px’}, 1, function() { this.html(‘Completed!’); } );
Verkettung
Mit „Animationsverkettung“ können Sie Magie erzeugen: durch die Verwendung von WAHR Als Wert des vierten Parameters können Sie beliebig viele Animationen verketten. Verwenden Sie dazu einfach die fx-Methode mehr als einmal für einen bestimmten Selektor. Im folgenden Beispiel ändern wir die Breite aller HTML-Elemente, die dem „.myel“-Selektor entsprechen, mehrfach:
var callBack = function() { // etwas Cooles machen }; // Warteschlangenanimationen $$(‘.myel’).fx({‘width’: ‘400px’}, 2, callBack, true); .fx({‘width’: ‘100px’}, 4, callBack, true); .fx({‘width’: ’50px’}, 6, callBack, true); .fx({‘width’: ‘600px’}, 8, callBack, true);
Natürlich kann man alles verketten. Mit der Struktur von DOMmy.js können Sie gleichzeitige Aufrufe von Elementen festlegen:
// mehrere Aufrufe $$(‘div#e, #d’) .fx({‘font-size’: ’40px’, ‘color’: ‘yellow’}, 1) .fx({‘font-size’ : ’10px’, ‘color’: ‘red’}, 1) .attr(‘title’, ‘thediv’) .attr(‘class’, ‘thediv’) .attr({‘lang’: ‘en’, ‘dir’: ‘ltr’});
Denken Sie daran, dass die verketteten Aufrufe sofort ausgeführt werden. Wenn Sie etwas am Ende einer bestimmten Animation verketten möchten, müssen Sie einen Rückruf für diese Animation festlegen.
Erstellen Sie einen Event-Handler, der Animationen auslöst
Jetzt möchten wir ein Snippet einrichten, das eine Animation für ein bestimmtes Element erzeugt. Diese Animation wird ausgelöst, wenn der Benutzer die Maus über das Element selbst bewegt und wenn er die Maus zurücklässt. Am Ende jedes Schritts wird ein korrekter HTML-Inhalt festgelegt:
$(‘myElement’).on({ ‘mouseover’: function() { this.fx({‘width’: ‘300px’}, 1, function() { this.html(‘Completed!’); }) ; }, ‘mouseout’: function() { this.fx({‘width’: ‘100px’}, 1, function() { this.html(‘Back again!’); }); } });
Wie Sie sehen, ist die Arbeit mit CSS3-Animationen mit DOMmy.js supereinfach. Denke immer daran Das bezieht sich auf das aktuelle Element.
Jetzt möchten wir eine verkettete Animation erstellen, die den CSS-Stil eines Elements in vier verschiedenen Schritten ändert, indem wir vier verschiedene Rückrufe verwenden, und diese Animation auslösen, wenn der Benutzer auf das Element klickt:
var angeklickt = false; $(‘myElement’).on({ ‘click’: function() { if( !clicked ) { clicked = true; this.fx({‘width’: ‘300px’, ‘height’: ‘300px’, ‘ background-color’: ‘red’, ‘border-width’: ’10px’}, 1, function() { this.html(‘1’); }, true) .fx({‘height’: ’50px’ , ‘background-color’: ‘gelb’, ‘border-width’: ‘4px’}, 1, function() { this.html(‘2’); }, true) .fx({‘width’: ‘ 100px’, ‘background-color’: ‘blue’, ‘border-width’: ’10px’}, 1, function() { this.html(‘3’); }, true) .fx({‘height’ : ‘100px’, ‘background-color’: ‘#3dac5f’, ‘border-width’: ‘2px’}, 1, function() { this.html(‘4’); clicked = false; }, true) ; } } });
Sie können diese Snippets direkt in der Aktion in Aktion sehen Demo-Bereich des DOMmy.js-Projekts.
