jQuery和面向对象的Javascript-如何正确执行？

Question

我对jQuery有相当的经验，但是我只想学习面向对象的Javascript，并想确保自己做对了。

这是到目前为止我正在做的一个例子...我很高兴关于如何改善方法的提示/建议：

// create a class for collapsable fieldsets
window.CollapsableFieldset = (function() {
  function CollapsableFieldset(jQObject) {
    // look for all the legend tags within this fieldset
    jQObject.find("legend").click(function(event) {
      // add or remove the "open" class to the fieldset
      return jQObject.toggleClass("open");
    });
  }
  return CollapsableFieldset;
})();

jQuery(document).ready(function() {
  return $("fieldset.collapsable").each(function(i, element) {
    return new CollapsableFieldset($(element));
  });
});

因此，基本上，我正在创建一个定义所需行为的类，然后在jQuery块中，选择每个匹配的对象，并使用该对象作为参数创建该类的新实例。

Answer 1

这不是面向对象的javascript。

在进行原型制作之前，我先说一句：在CollapsableFieldset中使用闭包是不必要且麻烦的。 确实，（function（）{}）（）模式中没有任何变量。 您可以将以下内容重写为：

window.CollapsableFieldset = function (jQObject) {
  jQObject.find('legend').click(function(event) {
    return jQObject.toggleClass('open');
  });
}

现在，您可以使用函数构造函数在javascript中创建类，其中的“ this”关键字定义“ new”语句将产生的对象：

function CollapsableFieldset (jQObject) {
  // This is the function constructor.
  this.field = jQObject;
}
CollapsableFieldset.prototype.findAndToggle = function (tag, cssclass) {
  // This defines a method "findAndToggle" on the CollapsableFieldset type.
  this.field.find(tag).click(function(event) {
    return this.field.toggleClass(cssclass);
  });
};

jQuery(document).ready(function() {
  return $("fieldset.collapsable").each(function(i, element) {
    var colFieldset =  new CollapsableFieldset($(element));
    return colFieldset.findAndToggle('legend', 'open');
  });
});

请记住，面向对象的javascript并非总是最佳的解决方案。

Answer 2

一种选择是使用Jquery UI的小部件工厂并将行为封装在小部件中。 http://wiki.jqueryui.com/w/page/12138135/Widget-factory

Answer 3

您正无缘无故地使用立即调用的函数表达式，您的代码在功能上等效于：

  function CollapsableFieldset(jQObject) {
    // look for all the legend tags within this fieldset
    jQObject.find("legend").click(function(event) {
      // add or remove the "open" class to the fieldset
      return jQObject.toggleClass("open");
    });
  }

“构造函数”不会返回用new调用时创建的对象，它没有利用原型继承的优势，因此没有必要使用new 。

该函数返回的对象未分配任何内容，那么返回任何内容有什么意义呢？

> jQuery(document).ready(function() {  
>     return $("fieldset.collapsable").each(function(i, element) {
>         return new CollapsableFieldset($(element));
>     });
> });

new CollapsableFieldset(...)返回的对象在哪里？

顺便说一句，没有必要使用以下方法创建全局变量：

window.varName...

什么时候

var varName ...

这样做好多了。