Question

我制作了两个快速不同的jQuery结构，一个是对象结构，一个是普通的。我想知道为什么有些人会选择第一个，看起来更像是编码。这两者之间的优势是什么？感谢

HTML

<div id="slide">
    <button>Click here</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dolor dicta eligendi optio officia earum qui vitae voluptatum at ullam consequuntur recusandae quisquam accusantium consequatur iure quae vel quasi eveniet libero modi aspernatur officiis reprehenderit rem quo totam ea voluptas?</p>
</div>

jQuery 1

(function(){
    var slide = {
        wrap: $('#slide'),
        button: $('#slide').find('button'),

        init: function(){
            slide.button.on('click', this.show);
        },
        show: function(){
            slide.wrap.find('p').slideToggle();
        }
    }
    slide.init();
})();

jQuery 2

$(function() {
  var wrap = $('#slide'),
      button = wrap.find('button');
  button.on('click', function(){
    wrap.find('p').slideToggle();
  });
});

Answer 1

在你的情况下，对象文字确实不过是多余的。但是，想想

function Slide(selector) {
   var slide = {
        wrap: $(selector),
        button: $(selector).find('button'),

        init: function(){
            slide.button.on('click', this.show);
        },
        show: function(){
            slide.wrap.find('p').slideToggle();
        }
    }
    return slide;
}

现在，通过执行Slide()，您将获得一个对象，您可以使用它来执行各种操作：

$(function() {
    var slide1 = Slide('#slide');
    slide1.init();
});

在此示例中，调用其.init()函数。随着模块变大，您需要对象将各种方法公开为API。它们帮助构建代码 - 它是OOP中的基本封装机制。

对象文字只是实现此目的的一种方法，您也可以找到构造函数，并且可以混合使用这些方法。查看various JavaScript design patterns，它们都基于对象。

jQuery结构，对象和普通

1 个答案: