Cztery pytania dotyczące nettuts "30 dni na naukę jquery"

Question

Robię darmowy kurs jQuery na nettuts, zwany 30 dniami, aby nauczyć się jquery Jeffreya Waya i mam cztery rzeczy, na które jestem naprawdę zakłopotany, najpierw tutaj jest kod :

(function() { 
    $('html').addClass('js'); 

    var contactForm = { 
      container: $('#contact'), 

     init: function() { 
      $('<button></button>', { 
       text: 'Contact Me' 
      }) 
       .insertAfter('article:first-child ') 
       .on('click', this.show); 
      }, 
     show: function() { 
      contactForm.container.slideDown(500); 
     }      
    }; 

    contactForm.init(); 

})(); 

zasadniczo ześlizguje formularza kontaktowego po kliknięciu przycisku „kontakt” na stronie internetowej. Moje pytania to:

1. Cóż za punkt "init" i czy go potrzebujesz?
2. dlaczego cały kod jquery wewnątrz zmiennej?
3. na ciągu kodu, który mówi: .on('click', this.show);, dlaczego potrzebujesz this w this.show?
4. wreszcie, dlaczego trzeba contactForm.container.slideDown(500); jak w dlaczego nie można po prostu powiedzieć container.slideDown(500); lub $('form.contact').slideDown(500); (swoją drogą identyfikator formularza, który ślizga się w dół jest contact.

Answer 1

Whats cały punkt „init” i czy jest potrzebny?

kod ten tworzy javaScript Object, z funkcją o nazwie init, następnie wywołanie tej funkcji. można tak łatwo przenieść ten kod na zewnątrz obiektu, ale wtedy nie chciałbym • móc go ponownie użyć i wykonywać z nim inne obiekty.

dlaczego cały kod jquery wewnątrz zmiennej?

W JavaScript (nie tylko jQuery) wszystko jest przedmiotem. Funkcje to obiekt, obiekt to obiekty itp. Ten kod tworzy obiekt z 3 zmiennymi: container, który przechowuje obiekt jquery; init, który przechowuje funkcję; i show, która przechowuje funkcję. To jest następnie przypisywane do zmiennej contactform.

na ciągu kodu, który mówi .on ("kliknij", this.show); dlaczego potrzebujesz tego w tym.pokaż?

this.show odwołuje się do sposobu .show() na obiekcie this. W tym kontekście obiekt this jest obiektem contactForm, a funkcja wyświetlania jest przekazywana jako obiekt (ale nie wywoływana). Efektem tego jest kliknięcie przycisku, wywołanie funkcji show.

wreszcie, dlaczego potrzebujesz contactForm.container.slideDown (500); dlaczego nie możesz po prostu powiedzieć container.slideDown (500); lub $ ("form.contact"). slideDown (500); (Swoją drogą identyfikator formularza, który ślizga się w dół jest kontakt.

Ponieważ container jest nieruchomość (czyli zmienna) należący do obiektu ContactForm. Można zrobić coś jak $('#contact').slideDown(500); ale masz już odwołanie do $('#contact') w contactform.container, a nie używanie go spowoduje niepotrzebne obciążenie.