Cuatro preguntas sobre nettuts "30 días para aprender jquery"

Question

Estoy haciendo un curso jQuery gratuito sobre nettuts llamado 30 días para aprender jquery de Jeffrey Way y tengo cuatro cosas que realmente me dejan perplejo, primero aquí está el código :

(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(); 

})(); 

básicamente se desliza hacia abajo un formulario de contacto al hacer clic en el botón "Contact Me" en la página web. Mis preguntas son:

1. ¿Cuál es el objetivo de "init" y lo necesitas?
2. ¿por qué el código de jquery completo está dentro de una variable?
3. en la cadena de código que dice .on('click', this.show); ¿por qué necesita this en this.show?
4. por último, ¿por qué necesita contactForm.container.slideDown(500); como en por qué no puedes simplemente decir container.slideDown(500); o $('form.contact').slideDown(500); (por cierto el id de la forma que se desliza hacia abajo es contact.

Answer 1

¿Cuál es el punto central de "init" y qué lo necesitas?

este código es la creación de un objeto de JavaScript, con una función llamada init, a continuación, llamar a esa función. se podría tan fácilmente mover este código fuera del objeto, pero luego wouldn ' ser capaz de reutilizarlo y hacer otras cosas orientadas a objetos con él.

¿por qué el código de jquery completo está dentro de una variable?

En Javascript (no solo jQuery) todo es un objeto. Las funciones son un objeto, un objeto son objetos, etc. Este código crea un objeto con 3 variables: container, que almacena un objeto jquery; init, que almacena una función; y show que almacena una función. Esto se está asignando a la variable contactform.

en la cadena de código que dice .on ('click', this.show); ¿Por qué necesitas esto en this.show?

this.show hace referencia al método de .show() en el objeto this. En este contexto, this es el objeto contactForm, y show es la función de mostrar que se pasa como un objeto (pero no se llama). El efecto de esto es cuando se hace clic en el botón, se llama a la función show.

finalmente, ¿por qué necesita contactForm.container.slideDown (500); como en por qué no puedes decir container.slideDown (500); o $ ('formulario.contacto'). slideDown (500); (Por cierto el id de la forma que se desliza hacia abajo es el contacto.

Debido container es una propiedad (es decir, una variable) que pertenece al objeto planilla de contacto. Se podría hacer algo como $('#contact').slideDown(500); pero ya tiene una referencia a $('#contact') en contactform.container, y no usarlo causará una sobrecarga innecesaria.