How can I avoid conflicts with other jQuery plugins using $.data()?
I was thinking I could use a single key to store my data like
$(el).data('myplugin', { foo: 'a', xyz: 34});
and access it like $(el).data('myplugin').foo etc.
But how can easily change a value, without overriding the whole data? Like changing the value of "foo".
Why not using
$(el).data('myplugin.foo')
and
$(el).data('myplugin.xyz')
?
So if you don't need to access more than one value at the same time, you avoid useless indirections and tests.
"myplugin.foo".
$(el).data()['myplugin.foo']. $(el).data().myplugin.foo would throw an error due to myplugin not being defined on the data object.
Just change the property you want to change.
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
As far as namespace conflicts, one solution is to generate a timestamp at runtime (when the plugin is defined) and use that timestamp in your namespace. It still isn't 100% protected against conflicts in the fastest browsers, but it gets pretty close.
var data = el.data("myPlugin"); data.foo = "bar"; el.data("myPlugin",data); +1 Kevin.I personally use a hyphen-separated naming convention which prefixes class names, IDs, data properties, etc with an abbreviated identifier of the entity which owns the code, and one for the area of functionality.
If I were working on a chart program for company Foo, my prefix might be:
foo-chart-
This allows me to make all company identifiers unique to the company, and areas of code unique to each other (so as to avoid colliding with other devs in other areas of functionality).
Contrived example:
<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>
I find using a hyphen fits well with almost any place my identifiers would be needed--either as a markup attr value or name, or in code, etc. You could use any char which fits your needs (. is very common)
data-slide data-slide-to. Namespacing also appears in the events but with periods slid.bs.carousel.