Hoe werkt jQuery .data()?

Ik wil .data()gebruiken in mijn applicatie. De voorbeeldenzijn nuttig, maar ik begrijp echter niet waar de waarden worden opgeslagen.

Ik inspecteer de webpagina met Firebug en zodra .data() een object opslaat in een dom-element, zie ik geen enigeverandering in Firebug (HTML- of Dom-tabbladen).

p>

Ik heb geprobeerd de jQuery-bron te bekijken, maar het is erg geavanceerd voor mijn Javascript-kennis en ik ben mezelf kwijtgeraakt.

Dus de vraag is:

Waar gaan de waarden die zijn opgeslagen door jQuery.data() eigenlijk naartoe? Kan ik ze inspecteren/lokaliseren/opsommen/debuggen met een tool?


Antwoord 1, autoriteit 100%

Bekijk de bronervoor.

Van een snelle blik lijkt het alsof het de gegevens opslaat in die cache-variabele die is gemaakt op regel 2.

Bewerken:

Hier is een korte demo die de gegevens in de cache vindt: http://jsfiddle.net/CnET9/

Je kunt ook $.cachenaar je console dumpen en deze handmatig verkennen.


Antwoord 2, autoriteit 18%

Het lijkt erop dat je het antwoord hebt gekregen op waar, maar hier is een beetje over het hoe.
Er zijn enkele regels waarvan u op de hoogte moet zijn voordat u dit gebruikt.

TOEVOEGEN

Het toevoegen van variabelen met behulp van het object dat is geretourneerd door $(‘.selector’).data() werkt omdat het gegevensobject de referentie passeert, dus overal waar u een eigenschap toevoegt, wordt deze toegevoegd. Als u data() op een ander element aanroept, wordt het gewijzigd. Het is wat het is wat het is…

var oData = $('#id').data();
oData.num = 0;
oData.num == $('#id').data().num; // true

Als u een object toevoegt, wordt een object in het gegevensobject geplaatst en worden de gegevens die eerder met dat element waren opgeslagen, uitgebreid. – http://api.jquery.com/data/#entry-longdesc

Dat betekent dat het toevoegen van een obj aan dataObj

. wordt

oData.obj = {};    
oData === { /*previous data*/, obj : { } }

Het toevoegen van een array breidt de eerder opgeslagen gegevens niet uit, maar gedraagt ​​zich ook niet hetzelfde als een eenvoudige waarde…

GEBRUIK

Als u eenvoudige waarden hebt opgeslagen, kunt u deze in variabelen plaatsen en ermee doen wat u wilt zonder het gegevensobject te wijzigen.

echter

Pas op als je een object of array gebruikt om gegevens op een element op te slaan!

Het feit dat u het opslaat in een variabele, betekent niet dat u de gegevenswaarde niet wijzigt.
Alleen omdat u het doorgeeft aan een functie, betekent niet dat u geen gegevenswaarden wijzigt!

Het is wat het is wat het is.. tenzij het eenvoudig is.. dan is het gewoon een kopie. :p

var data             = $("#id").data();  // Get a reference to the data object 
data.r_redirect      = "index.php";      // Add a string value
data.num             = 0;                // Add a integer value
data.arr             = [0,1,2];          // Add an array
data.obj             = { a : "b" };      // Add an object
                                         // but here is where the fun starts! 
var r_redirectString = data.r_redirect;  // returns "index.php", as expected.. cool
r_redirectString     = "changed"         // change the value and the compare :
data.r_redirect      == r_redirectString // returns false, the values are different
var oArr             = data.arr;         // Now lets copy this array
oArr.push(3);                            // and modify it.
data.arr            == oArr              // should be false? Nope. returns true.
                                         // arrays are passed by reference.
                                         // but..
var oObj             = data.obj          // what about objects?       
oObj["key"]          = "value";          // modify the variable and
data.obj["key"]     == oObj["key"]       // it returns true, too!

Dus bronnen..

Wat is de beste manier om meerdere waarden voor $.data() van jQuery?
https://stackoverflow.com/a/5759883/1257652


Antwoord 3, autoriteit 10%

Je kunt het inspecteren door .data()te bellen zonder parameters, zoals dit:

$("div").data("thing", "value");​​​​​​
console.log($("div").data());
//or...
console.log($.data($("div").get(0)));

Wat de “waar” betreft, deze wordt opgeslagen in een globaal jQuery-cacheobject onder een sleutel die uw element vertegenwoordigt. Als u .data()aanroept, wordt jQuery.data(yourDomElement)echt geretourneerd, of u kunt daar een sleutel aan koppelen als u er een specifieke waarde uit opvraagt.

Other episodes