Vier Fragen über Nettuts "30 Tage, um Jquery zu lernen"

Question

Ich mache einen freien jQuery Kurs auf Nettuts genannt 30 Tage, um jQuery von Jeffrey Way zu lernen, und ich habe vier Dinge, über die ich wirklich stapse bin, hier ist der Code :

Es rutscht grundsätzlich ein Kontaktformular herunter, wenn Sie auf die Schaltfläche "Kontaktieren Sie mich" auf der Website klicken. Meine Fragen sind:

1. Was ist der ganze Sinn von "init" und brauchen Sie es?
2. Warum ist der gesamte jquery Code innerhalb einer Variablen?
3. auf die Zeichenkette, die .on('click', this.show); sagt, warum brauchen Sie this in this.show? schließlich
4. , warum brauchen Sie contactForm.container.slideDown(500); wie in warum kannst du nicht einfach sagen container.slideDown(500); oder $('form.contact').slideDown(500); (übrigens die ID des Formulars, das nach unten gleitet ist contact.

Answer 1

Was ist der ganze Sinn „init“ und brauchen Sie es?

Dieser Code ein Javascript-Objekt schafft, mit einer Funktion init genannt, dann die Funktion aufrufen. Sie könnten genauso einfach diesen Code bewegen außerhalb des Objekts, aber dann Sie würde nicht Ich kann es wiederverwenden und andere objektorientierte Dinge damit machen.

Warum ist der gesamte jquery Code in einer Variablen?

In Javascript (nicht nur jQuery) ist alles ein Objekt. Funktionen sind ein Objekt, Objekte sind Objekte usw. Dieser Code erzeugt ein Objekt mit 3 Variablen: container, in dem ein jquery-Objekt gespeichert wird; init, der eine Funktion speichert; und show, die eine Funktion speichert. Dies wird dann der Variablen contactform zugewiesen.

über die Zeichenfolge mit dem Code .on ('click', this.show); warum brauchst du das in dieser.show?

this.show referenziert die .show() Methode auf dem Objekt this. In diesem Kontext ist this das Objekt contactForm und show ist die Show-Funktion, die als Objekt übergeben (aber nicht aufgerufen) wird. Dies hat zur Folge, dass beim Anklicken der Schaltfläche die Show-Funktion aufgerufen wird.

schließlich, warum brauchen Sie contactForm.container.slideDown (500); warum kannst du nicht einfach container.slideDown (500) sagen; oder $ ('form.contact'). slideDown (500); (Übrigens die ID des Formulars, das nach unten gleitet ist Kontakt.

Da container eine Eigenschaft ist (dh eine Variable), die mit dem kontaktformular Objekt gehört. Sie haben etwas tun könnten, wie $('#contact').slideDown(500); aber Sie haben bereits einen Verweis zu $('#contact') in contactform.container, und nicht verwenden wird unnötigen Overhead verursachen.