In den letzten Monaten wurden erhebliche Diskussionen über eine optimale Handhabung von JavaScript -Ereignissen erlebt. Die JSACTION -Bibliothek von Google und die bevorstehende ECMascript 7 Object.observe () -Methode (bereits in Chrome 36 und Node.js Harmony unterstützt) haben diese Debatte angeheizt. In diesem Artikel werden verschiedene Ereignisbearbeitungsmuster untersucht und ihre Vor- und Nachteile abgewogen.

Schlüsselpunkte:

• jSaction Library: Diese Google -Bibliothek entkoppelt Ereignislogik aus seiner Verwaltung, die sie teilweise auf html verlagert. Dies zielt darauf ab, Browser-spezifische Fehler zu mildern, die Leistung zu verbessern, indem die globale Umweltverschmutzung reduziert und Speicherlecks minimiert werden.
• object.observe () Methode: Teil von ECMascript 7, diese Methode ermöglicht die native Beobachtung von Objektänderungen, Staffeln des Publisher/Abonnent -Musters für die reaktive Programmierung entscheidend.
.
• deklarative Frameworks (Angular, React, Ractive): Diese Frameworks erzwingen das MVC-Muster, integrieren Sie die Datenbindung und Ereignisbehandlung direkt innerhalb der DOM-Elemente für verbesserte Wartbarkeit und Leistung.
.
• Ereignisbearbeitung Evolution: Das traditionelle Inline -Ereignishandling hat sich in Richtung addEventListener entwickelt, um die globale Umweltverschmutzung und XSS -Schwachstellen anzugehen. Bibliotheken wie JQuery vereinfachen und scale Ereignismanagement weiter und skalieren Sie.
• Leistung und Datenbindung: object.observe () und virtuelle Doms (in React und Ractive verwendet) verbessern die Leistung erheblich, indem die Datenbindung und die UI-Aktualisierungen optimiert werden, und die DOM-Manipulationen reduzieren.

detaillierte Analyse:

jSaction, basiert auf der Closeure -Bibliothek, adressiert Browser -Inkonsistenzen im Event -Listener -Management. Es entkoppelt Ereignisse und Handler, indem es Logik mithilfe eines appentor jsaction Attributs in HTML verschiebt. Während Sie die Leistung verbessern und die globale Umweltverschmutzung verringern können, können seine Komplexität und weniger als intuitive Verwendung die Vorteile für viele Projekte überwiegen.

Ein wachsender Trend besteht darin, Logik direkt in betroffene DOM -Elemente zu platzieren, nicht nur für Ereignisse, sondern auch für die Datenbearbeitung. Frameworks wie Angular, Ractive und React erzwingen MVC und ermöglichen die Datenbindung und die reaktive Programmierung durch Vorlagen. Dieser Ansatz erfordert zwar die Wartbarkeit in bestimmten Kontexten, erfordert zwar eine sorgfältige Überlegung, um die Fallstricke der eng gekoppelten Präsentation und Logik zu vermeiden.

object.observe (), obwohl es noch nicht Teil von ES6 ist, verspricht signifikante Leistungsverbesserungen, indem sie das Publisher/Abonnentenmuster über die Ereignisbehandlung hinaus nativ unterstützt. Deklarative Frameworks nutzen bereits eine ähnliche Logik, und Object.Observe () erhöht ihre Effizienz weiter.

In der Vergangenheit war die Inline -Ereignisbehandlung ( onclick Attribute) die Norm, aber ihre Einschränkungen (Lesbarkeit, Wartbarkeit, globale Umweltverschmutzung, XSS -Schwachstellen) führten zur Einführung von addEventListener . Bibliotheken wie JQuery haben diesen Prozess optimiert und die Skalierbarkeit und Debuggen verbessert. addEventListener kann jedoch immer noch zu Speicherlecks führen, wenn Verschluss nicht sorgfältig verwaltet wird, insbesondere in älteren Browsern.

deklarative Frameworks bieten eine überzeugende Alternative, die Datenbindung und die UI-Aktualisierung effizient durch Techniken wie virtuelle DOMs (React, Ractive) oder Containerobjekte (Ember, Backbone, Ractive). Diese Frameworks unterstützen häufig Zwei-Wege-Datenbindung, Vereinfachung von Aktualisierungen und die Aufrechterhaltung der Konsistenz zwischen DOM- und Anwendungslogik. Dies steht im Gegensatz zu dem manuellen, imperativeren Ansatz, der eine explizite DOM -Manipulation erfordert.

object.observe () bietet einen leistungsstarken Mechanismus zum Beobachten von Objektänderungen und ermöglicht eine effizientere Datenbindung, ohne sich ausschließlich auf Frameworks zu verlassen. Während es derzeit in der Browser -Unterstützung begrenzt ist, stellt es einen signifikanten Fortschritt bei reaktiven Programmierfunktionen dar.

Abschluss:

Der optimale Ansatz für JavaScript -Ereignisbearbeitungen hängt von Projektspezifikationen ab. Während deklarative Rahmenbedingungen erhebliche Vorteile in Bezug auf Wartbarkeit und Leistung bieten, ist das Verständnis der Kompromisse verschiedener Muster, einschließlich der Nuancen von JSaction und Object.

Weiterlesen:

Crockford über JavaScript - Episode IV: Die Metamorphose von ajax
Google JavaScript Style Guide
javaScript closures
jsaction repo auf github
der Unterschied zwischen raktiv und Angular
der Unterschied zwischen raktiv und reag
Container & Abhängigkeit in ember.js
Datenbindung Revolutionen mit Object.observe (), von addy osmani

faqs (zusammengefasst):

• Ereignisbearbeitungsmuster: traditionell, inline und erweitert (mit Bibliotheken/Frameworks).
• Ereignisausbreitung: erfassen und sprudeln. stopPropagation () und pusportDefault () .
• erfassen vs. bubbling: Richtung des Ereignisflusses in der Dom.
• Verhinderung von Standardaktionen: vorabdefault () methode.
• Ereignisdelegation: Ereignisse in einem übergeordneten Element.
• reguläre Ausdrücke: Muster -Matching in Zeichenfolgen mit regexp .
• javaScript -Designmuster: wiederverwendbare Lösungen für gemeinsame Probleme (Modul, Prototyp, Beobachter usw.).
• Fehlerbehandlung: versuchen ... fang ... endlich Anweisung.
• == vs. === : lose vs. strict equality.
• debugging javaScript: console.log () , Browser -Entwickler -Tools.