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

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

我发现使用连字符几乎适合任何需要我的标识符的地方——作为标记属性值或名称，或者在代码等中。你可以使用任何适合你需要的字符（.很常见）