Skip to content

Commit 3d870d1

Browse files
fabiospampinatofabiospampinato
committed
$.fn.data: removed caching mechanism
Closes #274
1 parent 3a6e938 commit 3d870d1

8 files changed

Lines changed: 68 additions & 56 deletions

File tree

‎README.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -78,18 +78,18 @@ $(element).addClass ( className ) // => collection
7878

7979
Some [extra methods](https://github.com/kenwheeler/cash/tree/master/src/extra) are available but [disabled](https://github.com/kenwheeler/cash/blob/master/pacco.json#L3) by default.
8080

81-
| Attributes | Collection | CSS | Data | Dimensions | Effects |
82-
| ------------------------------------ | -------------------------- | -------------------- | ---------------------------------- | ------------------------------------ | -------------------------- |
83-
| [fn.addClass ()](#fnaddclass-) | [fn.add ()](#fnadd-) | [fn.css ()](#fncss-) | [fn.data ()](#fndata-) | [fn.height ()](#fnheight-) | [fn.hide ()](#fnhide-) |
84-
| [fn.attr ()](#fnattr-) | [fn.each ()](#fneach-) | | [fn.removeData ()](#fnremovedata-) | [fn.innerHeight ()](#fninnerheight-) | [fn.show ()](#fnshow-) |
85-
| [fn.hasClass ()](#fnhasclass-) | [fn.eq ()](#fneq-) | | | [fn.innerWidth ()](#fninnerwidth-) | [fn.toggle ()](#fntoggle-) |
86-
| [fn.prop ()](#fnprop-) | [fn.filter ()](#fnfilter-) | | | [fn.outerHeight ()](#fnouterheight-) | |
87-
| [fn.removeAttr ()](#fnremoveattr-) | [fn.first ()](#fnfirst-) | | | [fn.outerWidth ()](#fnouterwidth-) | |
88-
| [fn.removeClass ()](#fnremoveclass-) | [fn.get ()](#fnget-) | | | [fn.width ()](#fnwidth-) | |
89-
| [fn.removeProp ()](#fnremoveprop-) | [fn.index ()](#fnindex-) | | | | |
90-
| [fn.toggleClass ()](#fntoggleclass-) | [fn.last ()](#fnlast-) | | | | |
91-
| | [fn.map ()](#fnmap-) | | | | |
92-
| | [fn.slice ()](#fnslice-) | | | | |
81+
| Attributes | Collection | CSS | Data | Dimensions | Effects |
82+
| ------------------------------------ | -------------------------- | -------------------- | ---------------------- | ------------------------------------ | -------------------------- |
83+
| [fn.addClass ()](#fnaddclass-) | [fn.add ()](#fnadd-) | [fn.css ()](#fncss-) | [fn.data ()](#fndata-) | [fn.height ()](#fnheight-) | [fn.hide ()](#fnhide-) |
84+
| [fn.attr ()](#fnattr-) | [fn.each ()](#fneach-) | | | [fn.innerHeight ()](#fninnerheight-) | [fn.show ()](#fnshow-) |
85+
| [fn.hasClass ()](#fnhasclass-) | [fn.eq ()](#fneq-) | | | [fn.innerWidth ()](#fninnerwidth-) | [fn.toggle ()](#fntoggle-) |
86+
| [fn.prop ()](#fnprop-) | [fn.filter ()](#fnfilter-) | | | [fn.outerHeight ()](#fnouterheight-) | |
87+
| [fn.removeAttr ()](#fnremoveattr-) | [fn.first ()](#fnfirst-) | | | [fn.outerWidth ()](#fnouterwidth-) | |
88+
| [fn.removeClass ()](#fnremoveclass-) | [fn.get ()](#fnget-) | | | [fn.width ()](#fnwidth-) | |
89+
| [fn.removeProp ()](#fnremoveprop-) | [fn.index ()](#fnindex-) | | | | |
90+
| [fn.toggleClass ()](#fntoggleclass-) | [fn.last ()](#fnlast-) | | | | |
91+
| | [fn.map ()](#fnmap-) | | | | |
92+
| | [fn.slice ()](#fnslice-) | | | | |
9393

9494
| Events | Forms | Manipulation | Offset | Traversal |
9595
| ---------------------------- | -------------------------------- | -------------------------------------- | -------------------------------------- | ------------------------------ |
@@ -258,9 +258,11 @@ $(element).css ( object ) // => collection
258258

259259
#### fn.data ()
260260

261-
Link some data (string, object, array, etc.) to an element when both key and value are supplied.
261+
Without arguments, returns an object mapping all the `data-*` attributes to their values.
262262

263-
If only a key is supplied, returns the linked data and falls back to data attribute value if no data is already linked.
263+
With a `key`, return the value of the corresponding `data-*` attribute.
264+
265+
With both a `key` and `value`, sets the value of the corresponding `data-*` attribute to `value`.
264266

265267
Multiple data can be set when an object is supplied.
266268

‎docs/migration_guide.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ $('#foo').nextAll ( '.bar' );
2424
$('#foo').next ( '.bar' );
2525
```
2626

27+
### Data caching
28+
29+
In jQuery the `$.fn.data` function caches retrieved values, and doesn't refresh them when they are updated outside of jQuery (e.g. via the `dataset` API), this makes jQuery's `$.fn.data` function unusable with libraries like React. Cash doesn't implement such caching functionality and doesn't have this problem, the retrieved values are always fresh.
30+
2731
### Events
2832

2933
Cash's event system relies heavily on the browser's underlying event system so there are some differences when comparing it with jQuery's.

‎src/data/data.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,19 @@ function data ( this: Cash, name: string | plainObject, value? ) {
2121

2222
if ( !this[0] ) return;
2323

24+
const datas = {};
25+
2426
each ( this[0].attributes, ( i, attr ) => {
2527

2628
const match = attr.name.match ( dataAttributeRe );
2729

2830
if ( !match ) return;
2931

30-
this.data ( match[1] );
32+
datas[match[1]] = this.data ( match[1] );
3133

3234
});
3335

34-
return getData ( this[0] );
36+
return datas;
3537

3638
}
3739

‎src/data/helpers/get_data.ts‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,14 @@
11

2-
// @require attributes/attr.ts
3-
// @require ./get_data_cache.ts
2+
// @require core/camel_case.ts
43

5-
function getData ( ele: HTMLElement, key?: string ): plainObject {
4+
function getData ( ele: HTMLElement, key: string ) {
65

7-
const cache = getDataCache ( ele );
6+
const value = ele.dataset ? ele.dataset[key] || ele.dataset[camelCase ( key )] : ele.getAttribute ( `data-${key}` );
87

9-
if ( key ) {
8+
try {
9+
return JSON.parse ( value );
10+
} catch {}
1011

11-
if ( !( key in cache ) ) {
12-
13-
let value = ele.dataset ? ele.dataset[key] || ele.dataset[camelCase ( key )] : cash ( ele ).attr ( `data-${key}` );
14-
15-
if ( value !== undefined ) {
16-
17-
try {
18-
value = JSON.parse ( value );
19-
} catch ( e ) {}
20-
21-
cache[key] = value;
22-
23-
}
24-
25-
}
26-
27-
return cache[key];
28-
29-
}
30-
31-
return cache;
12+
return value;
3213

3314
}

‎src/data/helpers/get_data_cache.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/data/helpers/set_data.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11

2-
// @require ./get_data_cache.ts
2+
// @require core/camel_case.ts
33

44
function setData ( ele: HTMLElement, key: string, value ): void {
5-
getDataCache ( ele )[key] = value;
5+
6+
try {
7+
value = JSON.stringify ( value );
8+
} catch {}
9+
10+
if ( ele.dataset ) {
11+
12+
ele.dataset[camelCase ( key )] = value;
13+
14+
} else {
15+
16+
ele.setAttribute ( `data-${key}`, value );
17+
18+
}
19+
620
}

‎src/data/helpers/variables.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11

2-
const dataNamespace = '__cashData',
3-
dataAttributeRe = /^data-(.*)/;
2+
const dataAttributeRe = /^data-(.+)/;

‎test/modules/data.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11

22
var fixture = '\
33
<div class="data" data-one="one" data-two="two"></div>\
4-
<div class="types" data-true="true" data-false="false" data-null="null" data-int="3" data-float="3.14" data-string="foo" data-object=\'{"json": true}\' data-array="[1,2,3]"></div>\
54
';
65

76
describe ( 'Data', { beforeEach: getFixtureInit ( fixture ) }, function () {
@@ -19,7 +18,16 @@ describe ( 'Data', { beforeEach: getFixtureInit ( fixture ) }, function () {
1918

2019
it ( 'supports various data types', function ( t ) {
2120

22-
var ele = $('.types');
21+
var ele = $('.data');
22+
23+
ele.data ( 'true', true );
24+
ele.data ( 'false', false );
25+
ele.data ( 'null', null );
26+
ele.data ( 'int', 3 );
27+
ele.data ( 'float', 3.14 );
28+
ele.data ( 'string', 'foo' );
29+
ele.data ( 'object', { json: true } );
30+
ele.data ( 'array', [1, 2, 3] );
2331

2432
t.is ( ele.data ( 'true' ), true );
2533
t.is ( ele.data ( 'false' ), false );
@@ -32,6 +40,16 @@ describe ( 'Data', { beforeEach: getFixtureInit ( fixture ) }, function () {
3240

3341
});
3442

43+
it ( 'doesn\'t cache the values', function ( t ) {
44+
45+
var ele = $('.data');
46+
47+
t.is ( ele.data ( 'one' ), 'one' );
48+
ele[0].dataset.one = 'uno';
49+
t.is ( ele.data ( 'one' ), 'uno' );
50+
51+
});
52+
3553
it ( 'gets all data', function ( t ) {
3654

3755
var ele = $('.data');

0 commit comments

Comments
 (0)