jQuery オブジェクトデータキャッシュの概要キャッシュの原理と jQuery.data メソッドの違い

jQuery.data(..) を使用してデータキャッシュを実装する方法に関するオンラインチュートリアルは多数ありますが、ユーザーがよく使用するのは data([key],[value]) と jQuery.data(element,[key] の 2 つです) ,[value]. ]) 両者の違いを明確に説明している記事がほとんどないので、実際に使ってみて勉強して皆さんに共有してみました。

$("").data([key],[value]) と jQuery.data(element,[key],[value]) の違い
両方の関数が使用されます要素は通常データキャッシュと呼ばれるもので、両方とも jQuery オブジェクトを返します。その違いは実際に知る必要はありませんが、実際に使用したときに驚きました。まず例を見て、次にソースコードに基づいて分析してみましょう。

Js コード:

コードをコピーコードは次のとおりです:

test2

test3

test

aaaa

$(document ).ready(function(){
$("#test").click(function(){
alert("JQUERY");
var e=$("div") ;// 2 つの jquery オブジェクトが定義されています
var w=$("div"); //e は w と等しくありません。
//最初に data([key],[value]) を使用します。 e).data("a","aaaa");// e と w にそれぞれ同じキーを使用してデータを保存します。
$(w).data("a","wwww");// を参照してください。前のものが上書きされる場合は、別のオブジェクトに保存されます。
alert($(e).data("a"));// 答えはわかりましたか?
alert(e===w)//false
alert($(w).data("a"));//これも wwww;
// .data (element,[key],[value]) でデータを保存します。
$.data(e,"b","cccc");//同じデータを e と w にそれぞれ保存します。
$.data(w,"b","dddd");//別のオブジェクトに保存されているにもかかわらず、前のデータが上書きされるかどうかを確認します。
alert($.data(e,"b") ); // 答えは推測できるはずです。 cccc
alert($.data(w,"b"));// この出力は dddd
}); 🎜>< /script>

上の例を見て、data([key],[value]) と jQuery.data(element,[key],[value] を見つけましたか? ]）全く同じではありませんよね？それらの間には何か関係があるのでしょうか？ data([key],[value]) が前のキーの同じ値を上書きするのはなぜですか?

そして、jQuery.data(element,[key],[value]) は、異なるオブジェクトにバインドされている限り、上書きを引き起こしません。そうですか？ソースコードを調べてみましょう。

まず jQuery.data(element,[key],[value]) のソースコードを見てください。
Js コード:

コードをコピー

コードは次のとおりです:

jQuery オブジェクトデータキャッシュの概要キャッシュの原理と jQuery.data メソッドの違い_jquery

jQuery.data(element,[key],[value]) ソースコードを見ると、各要素が独自の {key:value を持つことがわかります。新しいオブジェクトは別の {key:value} オブジェクトに保存されるため、データが保存されるため、新しく作成されたオブジェクトが同じキーを持っていたとしても、元の既存のオブジェクトのキーに対応する値は上書きされません。

次に、それぞれ(callback)を使用するdata([key],[value])のソースコードを解析する必要があります。解析する前に、それぞれの使い方とソースコードを見てみましょう。（折り返し電話）。

Js コード:

コードをコピーコードは次のとおりです:

test2

test3

test

aaaa

$(document ).ready(function(){
$("#test").click(function(){
alert("JQUERY");
var i=0;
$ ("# abc3").each(function() {
alert( i);//

が 1 つしかないため、1 のみを出力します
}); >alert("- ---");
var j=0;
$("div").each(function() {
alert( j);//出力 1, 2,
}); が 3 つあるため、

jQuery.fn = jQuery.prototype = {
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}
}
返される内容は次のとおりです。グローバル each メソッドと、独自の jQuery オブジェクトがパラメーターとしてそれに与えられます。グローバル each メソッドの具体的な実装は次のとおりです:
// args は内部メンバーへの呼び出しとして使用されます
each: function ( object, callback, args ) {
var name, i = 0, length = object.length; // object が jQuery オブジェクトの場合、length は空ではありません
if ( args ) {
if ( length = == 未定義 ) {
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break
} else
for ( ; i < length; )
if ( callback.apply( object[ i ], args ) === false )
break;
// 以下は <🎜 を呼び出すクライアントプログラムです。 >} else {
if ( length === unknown ) {
for ( object 内の name )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
// i はインデックス値を表し、value は DOM 要素を表します
for ( var value = object[0];
i < length && callback. call( value, i , value ) !== false;
value = object[ i] ){}
}
return object;

focus on for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[ i] ){} このコードでは、 object[0] が取得されます。 jQuery オブジェクト最初の DOM 要素については、for ループを通じて、
が jQuery オブジェクト全体の対応する各 DOM 要素を走査し、callback.call(value,i,value) を通じてコールバックのこのオブジェクトをポイントします。 value オブジェクトを指定し、2 つのパラメータを渡します。i はインデックス値を表し、value は DOM 要素を表します。コールバックは function(index, elem) { } と同様のメソッドです。 $("").each(function(index, elem){ });
data([key],[value]) のソースコードを見てみましょう
Js コード:

コードをコピー

コードは次のとおりです:

jQuery.fn.extend({
data: function( key, value) {
var パーツ, パーツ, 属性, 名前, l,
elem = this[0],
i = 0,
data = null;
// すべての値を取得します
if ( key === unknown ) {
....// Key なしの場合を処理しますここで説明する内容ではありません。
return data;
}
// 複数の値を設定します。
if ( typeof key === "object" ) {
return this. each(function() {
jQuery.data( this, key );
});
}
parts = key.split( ".", 2 ); ] = パーツ[1] "." パーツ[1] : "";
パーツ = パーツ[1] "!"; ( value === unknown ) {
. // ここでは、値がない場合の戻り値の取得について説明します。
parts[1] = value; 🎜>//$("div").data("a","aaa")) を使用する場合、以下のそれぞれを呼び出す前の this は、$("div")、
this.each によって返されるオブジェクトを参照します。 (function() { //ここでは、一致する各要素を関数を実行するコンテキストとして使用していることに注意してください。
var self = jQuery( this );
self.triggerHandler( "setData" part, Parts );
// ここで要素に保存されるデータは基本的に data(element, [key], [value]) に委譲されます。
//前の分析を参照してください。
//次の data(this, key, value) は、ページ内の

配列に対応する jQuery オブジェクト
//$("div") 内の対応する各 DOM 要素を走査することを指します。
jQuery.data( this, key, value );//このステートメントはループ内で複数回実行されます。つまり、データが保存されます< ;/スパン> 。
//ここが核心文です。ただし、上記でそれが each(functipn(){}) にあることを明確に見てください。
self.triggerHandler( "changeData" 部分, 部分 );
}, null, value, argument.length > 1,
},
//要素に保存されているデータを削除します。具体的な実装は次のとおりです。
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
}); }
});

data([key],[value]) のソースコードについてあまり詳しくない場合は、例を使って真似してみましょう。
Js コード: