Как работает jQuery .data ()?

Question

Я хочу использовать .data() в своем приложении. примеры полезны, но я не понимаю, где хранятся значения.

Я проверяю веб-страницу с помощью Firebug, и как только .data () сохраняет объект в элемент dom, я не вижу каких-либо изменений в Firebug (вкладки HTML или Dom).

Я попытался посмотреть на источник jQuery, но он очень продвинут для моих знаний Javascript, и я потерял себя.

Итак, вопрос:

Куда на самом деле идут значения, хранящиеся в jQuery.data ()? Могу ли я проверить / найти / просмотреть / отладить их с помощью инструмента?

Answer 1

Посмотрите на источник .

С первого взгляда видно, что он хранит данные в этой переменной cache, которая создается в строке 2.

Edit:

Вот небольшая демонстрация, которая находит данные в кеше: http://jsfiddle.net/CnET9/

Вы также можете сбросить $.cache на свою консоль и изучить ее вручную.

Answer 2

Вы, кажется, получили ответ, где, но здесь немного о том, как. Есть некоторые правила, которые вы должны знать, прежде чем использовать это.

ДОБАВЛЕНИЕ

Добавление переменных с использованием объекта, возвращенного из $ ('. Selector'). Data (), работает, потому что объект данных передается по ссылке, поэтому, когда вы добавляете свойство, оно добавляется. Если вы вызываете data () для другого элемента, он изменяется. Это то, что есть ...

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

Добавление объекта помещает объект внутрь объекта данных, а также «расширяет данные, ранее сохраненные с этим элементом». - http://api.jquery.com/data/#entry-longdesc

Это означает, что добавление obj к dataObj становится

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

Добавление массива не расширяет ранее сохраненные данные, но не ведет себя так же, как простое значение ...

ИСПОЛЬЗОВАНИЕ

Если у вас хранятся простые значения, вы можете поместить их в переменные и делать с ними что угодно, не изменяя объект данных.

однако

если вы используете объект или массив для хранения данных в элементе, будьте осторожны!

То, что вы храните его в переменной, не означает, что вы не меняете значение данных. То, что вы передаете его функции, не означает, что вы не меняете значения данных!

Это то, что есть .. если только это не просто ... тогда это просто копия. : Р

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!

Итак, ресурсы ..

Каков наилучший способ хранения нескольких значений для $ .data () jQuery? https://stackoverflow.com/a/5759883/1257652

Answer 3

Вы можете проверить это, просто позвонив .data() без параметров, например:

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

Что касается "где", то оно хранится в глобальном объекте кеша jQuery под ключом, который представляет ваш элемент. Вызов .data() действительно возвращает jQuery.data(yourDomElement), или нажмите на ключ к нему, если вы вызвали для него определенное значение.