JQuery: Warum Dezente JavaScript / Document-Ready-Funktion statt OnClick-Ereignis?

StackOverflow https://stackoverflow.com/questions/621574

Frage

Ich habe gerade angefangen bei JQuery suchen. Ich habe keine AJAX in meiner Web-Anwendung gegenwärtig.

Meine vorhandenen JavaScript in meinem HTML wie folgt aussehen: 

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

Dies zeigt Tasten für [Hinzufügen] und [Suchen]. Finden Denn es ist notwendig, um das Formular abschicken, und ich verwende MyFormSubmit (), die die Daten überprüft, um einen visuellen Effekt zur Seite hinzufügt, und dann bucht die Daten.

ich eine Klasse oder ID auf der für die Schaltfläche Suchen und in JQuery hinzufügen kann, könnte ich so etwas schreiben: 

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

Bei meiner „Anfänger“ Phase der Verständigung mit JQuery ich nicht get , warum ich würde es auf diese Weise tut

Meine alte Art und Weise identifiziert die Methode in der Nähe des Objekts. Es kann ein Risiko sein, dass die JS geladen ist nicht, bevor der Benutzer den Knopf drückt (gibt es? Die LOAD für die JS ist ganz oben auf der Seite).

Die JQuery Dokument Bereit Methode wird nicht aktiviert, bis das Dokument geladen wird (was ich garantiert davon ausgehen, dass die JS alle vorhanden und bereit ist, ausgeführt werden?), Aber es bewegt sich um den Code zu einem separaten Teil meiner HTML-Datei - so, wenn ich die myButtonArray DIV in der HTML-Quelle zu sehen ist es mir nicht klar, welche Methoden haben Objekte, und welche nicht

.

Können Sie mir bitte helfen, zu verstehen, was meine Optionen sind und die Vorteile / gotchas dass ich achten sollte?

Bearbeiten . Ich fühle mich wohl, dass die Manipulation DOM - wie zum Beispiel eines LightBox, die auftreten können, wenn ein Miniaturbild mit Klasse „LightBoxThumb“ geklickt wird - würde verwenden Unauffällig Javascript

Aber ich habe Schwierigkeiten, mich davon zu überzeugen, dass eine Schaltfläche, die eine bestimmte Aktion hat, soll seine Methode auf diese Weise angewandt hat. (Ich würde sicher stellen keinen Code auf der Schaltfläche andere als ein einzelner Funktionsaufruf, um etwas „an anderer Stelle“, aber meine Meinung nach, das ist mein bester Hinweis darauf, was die Taste des Fall ist, und Schichten von Unauffällig Javascript können, dass es sehr viel schwieriger machen zu bestimmen.)

EDIT2 - akzeptierte Antwort

Ich habe Russ Cams Antwort gemacht. Es beschreibt Unauffällig Javascript in einer Weise, die hilfreich für mich war mehr Verständnis darüber, wie und wann das verwendet werden soll.

Im Moment (kann sich ändern, wenn ich mehr Erfahrung haben!) Ich bleibe mit einer OnClick-Ereignis für einen einzelnen, nicht-Wechsel, Aktion an einem Objekt, wie ich das Gefühl, dass für mich sein wird einfacher zu debuggen - und diagnostizieren wenn Probleme auftreten. Für ZebraStripes auf einem Tisch, der auf Position Spalte (und Situationen dieser Art) zu sortieren können klicken ich die Vorteile des Unauffällig Javascript Ansatz sehen

Russ letzte Bemerkung war besonders hilfreich, wiederholt sich hier:

  

"@ Kristen - Du hast recht, wie viel   Programmierthemen, gibt es mehr   als ein Ansatz und die Menschen werden   vehement stehen zu ihrem Glauben! Wenn   wir reden über eine einzige Methode   für eine einzelne Taste, ich total   verstehen, wo du herkommst ...

     

Wenn wir reden über viele   JavaScript, mit dem gleichen Funktionsaufruf   für mehr als ein Element, verschiedene   Funktionsaufrufe für verschiedene Methoden,   etc. Ich denke, dass es mehr sein würde,   schwierig für sie inline mischen   und unaufdringlich Ansätze, und es   besser wäre ein zu übernehmen oder die   anderer Ansatz "

War es hilfreich?

Lösung

Dezente JavaScript der Haupttreiber ist zum Trennen von JS Code von Markup

  
      
  • Die Trennung von Funktionalität (die „Verhalten layer“) von einer Web-Seite
      Struktur / Inhalt und Präsentation
    •   
  • Best Practices, die Probleme der traditionellen JavaScript zu vermeiden   Programmierung (wie Browser   Unstimmigkeiten und der Mangel an   Skalierbarkeit)
    •   
  • Progressive Enhancement Benutzerprogramme zu unterstützen, die nicht
    unterstützen kann   erweiterte JavaScript-Funktionalität
    •   

Mit dem Code in document.ready, wird es nicht ausgeführt werden, bis das DOM geladen ist und bevor der Seiteninhalt geladen

Learning jQuery

  

Mit $ (document) .ready (), können Sie Ihre Events laden oder Feuer oder was auch immer Sie wollen, dass sie vor dem Fenster viel zu tun.

Sie können einen Blick auf jQuery in Aktion nehmen wollen, ich ‚d es sehr empfehlen. Sie können Kapitel 1 und Kapitel 5 auf die Buch Homepage . Ich denke dabei kann ferner Einblick, warum Trennung kann gut funktionieren.

Schließlich haben Sie einen Blick auf diese Frage die Antworten, das Details hat, wie Sie den Ereignis-Listener auf einem DOM-Knoten finden würden.

EDIT:

Einige Gedanken, die Sie überzeugen können, warum unaufdringlich JavaScript eine gute Idee sein kann.

Stellen Sie sich vor, dass Sie eine Funktion haben, als Event-Handler für das gleiche Ereignis auf jedem eine Anzahl von Elementen erhöht gebunden -

  • Wäre es einfacher werden, um herauszufinden, welche Elemente bezeichnen diese Funktion zu handhaben ein Ereignis, wenn die Erklärung ist inline in jedem Element oder der Erklärung ist in einem Ort, der außerhalb Markup?

  • Was ist, wenn Sie wollen das hinzufügen Elemente, die diese Funktion aufrufen, wenn das Ereignis wird auf jeden von ihnen erhoben? Wäre es einfacher / besser hinzufügen Ereignishandler inline zu jedem Element oder den Code an einem Ort zu ändern?

Andere Tipps

das Dokument fertig Ereignis ist gut vor dem Dokument Ladeereignis. dokumentieren bereit erfolgt sobald das DOM geladen, die so ist, dass alle Elemente vorhanden sein, bevor Sie auf sie anfangen zu arbeiten.

Also ja wird die JS bereit sein, wie das Dokument wiedergegeben wird. Der andere Punkt, um die Bindung ist, dass es für die Änderung Bindungen Elemente nützlich ist, wenn cetain Aktionen auftreten.

Sie können immer noch die Aktion auf das Element deklarieren, wenn Sie aber lieber.

Im Laufe der Zeit Ich glaube, Sie auf die jQuery gewöhnt Syntax und Lesen:

class = "MyFormSubmit" wird so informativ wie das Lesen onClick = "return MyFormSubmit ();

Wenn die Leistung wirklich beginnt zu treten (abgesehen von allen von anderen Plakaten genannten Leistungen) ist die Leichtigkeit, mit der Sie den onClick Bindung über die Selektoren zu anderen Aktionen auf der Webseite in einer Weise gebunden ändern könnten, die nie zu präsentieren scheinen sich zunächst.

Eine Frage, die ich mir stelle ist, wie tief plane ich bei jedem neuen Werkzeug auf gehen, wenn ich extensive Nutzung eines Rahmens oder Bibliothek zu machen habe vor, dann meinen Code schreiben in es ist „mehr native“ Codierung Stil wird viel mehr geworden natürliche und andere Entwickler, die das Werkzeug kennen, viel sauberer den Code finden und verständlicher.

Sie tun es auf diese Weise die UI-Logik von dem eigentlichen HTML-Design zu trennen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top