7

私は nettuts で jquery を学ぶための 30 日間と呼ばれる無料の jQuery コースをジェフリー ウェイで行っています。

(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. contactForm.container.slideDown(500);最後に、なぜ単に or と言えないのかというように、なぜ必要なのですcontainer.slideDown(500);か$('form.contact').slideDown(500); (ちなみに、スライド ダウンするフォームの ID はcontact.
4

1 に答える 1

8

「init」の要点は何ですか?必要ですか?

このコードは、 という関数を使用して JavaScript オブジェクトを作成し、initその関数を呼び出しています。このコードをオブジェクトの外に簡単に移動することはできますが、そうすると再利用できなくなり、他のオブジェクト指向の処理を行うことができなくなります。

jqueryコード全体が変数内にあるのはなぜですか?

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

.on('click', this.show); というコードの文字列について なぜ this.show でこれが必要なのですか?

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

最後に、なぜ contactForm.container.slideDown(500); が必要なのですか? container.slideDown(500); と言えない理由と同じように または $('form.contact').slideDown(500); （ちなみにスライドダウンするフォームのidはcontactです。

containercontactform オブジェクトに属するプロパティ (変数) であるためです。のようなこともできます$('#contact').slideDown(500);が、すでに$('#contact')inへの参照がcontactform.containerあり、それを使用しないと不要なオーバーヘッドが発生します。

于 2012-07-16T23:27:52.323 に答える