名前空間のjQueryプラグインを別々のファイルに保存しますか？

Question

jQueryプラグインのコレクションとして高度なチャート作成API（d3の上に）を構築しています。

私はプロジェクト全体を 'd3charts'として名前空間を付けたいと思いますが、それぞれのプラグインは独自のファイルにしています。たとえば、私はd3charts.histogram.jsとd3charts.pie.jsを持っているかもしれません。私は、APIは次のようになりたい：

<script src="jquery.js"></script> 

// I don't really have any common functionality yet, this is an empty file 
// not sure if this sort of thing is necessary to achieve the API below 
<script src="d3charts.js"></script> 

// load only the chart types I want to actually use 
<script src="d3charts.histogram.js"></script> 
<script src="d3charts.pie.js"></script> 
<script> 
    var foo_data = [ ... ]; 
    var bar_data = [ ... ]; 
    $('.foo').d3charts.histogram(foo_data); 
    $('.bar').d3charts.pie(bar_data); 
</script> 

私はsourceとpretty displayを参照して、個々のチャートは（非名前空間）の正規のjQueryプラグインとして働いています。

このAPIを私が望むように機能させるには、プラグインにどのような構造が必要ですか？それは意味：

// Not this 
$('.foo').d3charts().histogram(foo_data); 

// Not this either 
$.d3charts.pie('.foo', bar_data); 

// but chaining should still work: 
$('.foo').d3charts.histogram(foo_data).toggleClass('histogramchart'); 

その他の必要な資質：

• を、私は、プラグインがロードされることを、任意の順序を負いかねます。
• 理想的には、d3charts.jsのような空の名前空間の「親」スクリプトを読み込む必要がないソリューションが欲しいです。
• 元の（名前空間ではない）プラグインの中で、私は、推奨されたreturn this.each()を使って、セレクタ内のすべての要素に対して自分のコードを実行します。名前空間付きプラグインは、この動作を何とか保持する必要があります。

This答えはパズルのようですが、私は全体の絵を一緒に置くことはできません。

ご協力ありがとうございます！

Answer 1

私はこれを行うための解決策をSOなどで追跡することができませんでした。私はAPIのすべての欲望にぶつかる解決策がないという強い感覚を得る。

私が見つけた最良の解決策は、プラグインをjQuery UIウィジェットとしてパッケージ化することです。結果はd3charts github repoにあります。

Answer 2

各ファイルは、存在するかどうかを確認して、存在しない場合は作成してください（jQuery.fn.d3charts）。それ以外の場合はオブジェクトに追加します。

// Include this in all your files 
if (typeof jQuery.fn.d3charts !== "object") { 
    jQuery.fn.d3charts = {}; 
} 
// End inclusion 

jQuery.fn.d3charts.histogram = function() { 

}; 

これは非常に厳密にオブジェクトをチェックしています。真実の価値をチェックしたいのであれば（これはクールだから誰もが最近||を使っている）、試してみてください。個人的に

jQuery.fn.d3charts = jQuery.fn.d3charts || { }; 

Answer 3

jQueryの名前空間を膨らま、そのように私のようにそれを実装することを好むのは好きではない：

<script> 
$.namespace = $.namespace || {}; 
</script> 

は、この方法を使用して、ファイルごとに、次に定義する必要があるものを定義することができますあなたはあなたのためにjsFiddleに投稿したばかりのものに似ています：jsFiddle example