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

我对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)); }); }); //为可折叠字段集创建一个类 window.CollapsableFieldset=（函数（）{ 函数CollapsableFieldset（jQObject）{ //查找此字段集中的所有图例标记 jQObject.find（“图例”）。单击（函数（事件）{ //向字段集添加或删除“打开”类 返回jQObject.toggleClass（“打开”）； }); } 返回CollapsableFieldset； })(); jQuery（文档）.ready（函数（）{ 返回$（“fieldset.collapsable”）。每个（函数（i，元素）{ 返回新的CollapsableFieldset（$（元素））； }); });

---

基本上，我创建一个类来定义我要寻找的行为，然后在jQuery块中，我选择与该对象匹配的每个对象，并创建一个新的类实例作为参数。

这不是面向对象的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并不总是最佳解决方案。

一个选项是使用Jquery UI的小部件工厂并将行为封装在小部件中。

---

如果您使用的是立即调用的函数表达式，那么您的代码在功能上等同于：

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

newcollapsablefieldset（…）

返回的对象在哪里

顺便说一句，使用以下方法创建全局变量毫无意义：

window.varName...

什么时候

---

这样做会更好。

非常感谢您的投入。。。函数包装器不是我的主意-我现在实际上用coffeescript编写我的JS，它做一些额外的包装并添加额外的回报等。你提到OOJS并不总是最佳解决方案。。。jQuery有最佳实践吗？我真的不喜欢把我所有的代码都放在一个jQuery（）函数中，因为它变得越来越大，所以维护起来就越来越困难。如果担心同一个范围内有太多变量，可以将代码组织成一个函数集合。您甚至可以在其他函数中定义函数，并使用用闭包封装状态的函数。将相关函数分组并粘贴到一个对象中，然后将它们作为对象方法调用怎么样。例如：commentsForm.load（）//加载与comments表单相关的所有jQuery？

var varName ...