nettutsに関する4つの質問 "jQueryを学ぶ30日"

Question

Jeffrey Wayのjqueryを学ぶために30日間と呼ばれる無料のjQueryコースをやっています。私が本当に困惑している4つのことがあります。 ：

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

})(); 

基本的には、私が「私に連絡」ボタンをクリックすると、連絡先フォームが表示されます。私の質問は次のとおりです：

1. "init"の全体的な点は何ですか？
2. なぜjqueryコード全体が変数の内部にありますか？
3. .on('click', this.show);という文字列にはなぜthisがthis.showに必要ですか？
4. は最終的に、なぜあなたはあなただけcontainer.slideDown(500);または$('form.contact').slideDown(500);（滑落フォームのidがcontactある方法によって言うことができない理由のようcontactForm.container.slideDown(500);が必要なのです。

Answer 1

をいただきましたの全体のポイント「INIT」とあなたはそれが必要なのでしょうか？

このコードは、関数は、その関数を呼び出し、initと呼ばれてますが、同じように簡単にオブジェクトの外に、このコードを動かすことができます。、javascriptオブジェクトを作成したが、その後、あなたされますwouldn 'それを再利用することができ、他のオブジェクト指向のものをそれと共に行うことができます。

なぜ変数全体にjqueryコードがありますか？

Javascriptでは（jQueryだけでなく）すべてがオブジェクトです。関数はオブジェクト、オブジェクトはオブジェクトなどです。このコードは、3つの変数を持つオブジェクトを作成しています：container、jqueryオブジェクトを格納します。関数を格納するinit。機能を格納するshow。これはcontactform変数に割り当てられます。

.on（ 'click'、this.show）;なぜあなたはthis.showでこれを必要としますか？

this.showはthisオブジェクト上.show()メソッドを参照しています。このコンテキストでは、thisはcontactFormオブジェクトであり、showはオブジェクトとして渡される（ただし呼び出されない）show関数です。これの効果は、ボタンがクリックされたとき、show関数が呼び出されたときです。

最後に、なぜあなたはcontactForm.container.slideDown（500）が必要ですか。なぜあなたは単にcontainer.slideDown（500）と言うことができないのですか？または$（ 'form.contact'）。slideDown（500）; （途中で滑り落ち、フォームのidが接触している。

containerはのContactFormオブジェクトに属するプロパティ（すなわち変数）ですので。あなたは$('#contact').slideDown(500);ような何かを行うことができますが、あなたはすでに参照を持っています$('#contact')をcontactform.containerに設定し、それを使用しないと不要なオーバーヘッドが発生します。