Question

如何使用$.data()避免与其他jQuery插件发生冲突？

我以为我可以使用单个键存储我的数据，如

$(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

就命名空间冲突而言，一种解决方案是在运行时生成时间戳（定义插件时）并在命名空间中使用该时间戳。在最快的浏览器中，它仍然没有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>

我发现使用连字符几乎适合我的标识符所需的任何地方 - 作为标记attr值或名称，或代码等。您可以使用任何适合的字符您的需求（.非常普遍）

jQuery.data（）命名空间

3 个答案: