javascript - jQuery.data() 名前空間

Question

を使用して他の jQuery プラグインとの競合を回避するにはどうすればよい$.data()ですか?

単一のキーを使用してデータを次のように保存できると考えていました

$(el).data('myplugin', { foo: 'a', xyz: 34});

$(el).data('myplugin').fooなどのようにアクセスします。

しかし、データ全体を上書きせずに値を簡単に変更するにはどうすればよいでしょうか? 「foo」の値を変更するようなものです。

Answer 1

使わない理由

$(el).data('myplugin.foo')

と

$(el).data('myplugin.xyz')

?

したがって、同時に複数の値にアクセスする必要がない場合は、無用な間接参照やテストを避けることができます。

Answer 2

変更したいプロパティを変更するだけです。

http://jsfiddle.net/rQQdf/

var el = $("<div />");    
el.data("myPlugin",{ foo: "foo" });
console.log(el.data("myPlugin").foo); // foo
el.data("myPlugin").foo = "bar";
console.log(el.data("myPlugin").foo); // bar

名前空間の競合に関する限り、1 つの解決策は、実行時に (プラグインが定義されているときに) タイムスタンプを生成し、そのタイムスタンプを名前空間で使用することです。最速のブラウザーでの競合からまだ 100% 保護されているわけではありませんが、かなり近づいています。

Answer 3

私は個人的に、クラス名、ID、データ プロパティなどの前に、コードを所有するエンティティの省略された識別子と機能領域の識別子を付けた、ハイフンで区切られた命名規則を使用しています。

Foo 社のチャート プログラムに取り組んでいた場合、私のプレフィックスは次のようになります。

foo-chart-

これにより、すべての会社識別子を会社に固有のものにし、コードの領域を互いに固有にすることができます (他の機能領域で他の開発者と衝突するのを避けるため)。

考案された例:

<button id="foo-chart-refresh" class="foo-chart-interact" data-foo-chart-last="201205031421">Refresh Chart</button>
<script type="text/javascript">
    var lastRefresh = $('#foo-chart-refresh').data('fooChartLast'); // see docs on .data() for case/hyphenation handling
</script>

ハイフンの使用は、マークアップ属性値または名前として、またはコード内など、識別子が必要なほとんどすべての場所にうまく適合することがわかりました。ニーズに合った任意の文字を使用できます (.非常に一般的です) 。