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でクラスを作成します：あなたはに、ロスなく、​​書き換えることが

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

1つのオプションは、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"); 
    }); 
    } 

「コンストラクタ」それはで呼び出されたときに作成したオブジェクトを返しません。新しい、プロトタイプ継承の利点がないので、使用する点は新しいです。

関数によって返されたオブジェクトは何にも割り当てられていないので、何を返すのですか？

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

new CollapsableFieldset(...)が返すオブジェクトはどこに行きますか？

window.varName... 

var varName ... 

がないとき、それはとても良い：

尚、使用してグローバル変数を作成する意味がありません。