7

我正在做一个关于 nettuts 的免费 jQuery 课程，名为 30 days to learn jquery by Jeffrey Way，我有四件事我真的很难过，首先是代码：

(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);你为什么需要thisin this.show？
  4. 最后，你为什么需要，为什么你contactForm.container.slideDown(500);不能只说container.slideDown(500);or $('form.contact').slideDown(500); （顺便说一下，向下滑动的表单的 id 是contact.
4

1 回答 1

8

“init”的全部意义是什么，你需要它吗？

此代码正在创建一个 javascript 对象，其中包含一个名为 的函数init，然后调用该函数。您可以轻松地将这段代码移到对象之外，但是您将无法重用它，并用它做其他面向对象的事情。

为什么整个 jquery 代码都在一个变量中？

在 Javascript（不仅仅是 jQuery）中，一切都是对象。函数是一个对象，对象是对象，等等。这段代码创建了一个带有 3 个变量的对象：container，它存储一个 jquery 对象；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。

因为container是属于contactform 对象的属性（即变量）。您可以执行类似的操作，$('#contact').slideDown(500);但您已经引用了$('#contact')in contactform.container，不使用它会导致不必要的开销。

于 2012-07-16T23:27:52.323 回答