ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryオブジェクトデータキャッシュについて キャッシュ原理とjQuery.data詳細説明_jquery
jQueryオブジェクトデータキャッシュについて キャッシュ原理とjQuery.data詳細説明_jquery
- WBOYオリジナル
- 2016-05-16 17:38:091260ブラウズ
jQuery.data(..) を使用してデータ キャッシュを実装する方法に関するオンライン チュートリアルは多数ありますが、ユーザーがよく使用するのは data([key],[value]) と jQuery.data(element, [key] , [value]) 両者の違いを明確に解説している記事がほとんどないので、実際に使ってみて勉強してみんなに共有してみました。
$("").data([key],[value]) と jQuery.data(element,[key],[value]) の違い
どちらの関数も要素で使用されます データの保存も一般的にはデータ キャッシュと呼ばれ、どちらも jQuery オブジェクトを返します。その違いは実際に知る必要はありませんが、実際に使用したときに驚きました。まず例を見て、次にソースコードに基づいて分析してみましょう。
JS コード:
コードをコピー コードは次のとおりです:
test2
test3
test
aaaa
<script>$(document) ){ <br>$("#test").click(function(){ <br>alert("JQUERY"); <br><br>var e=$("div");//2 つの jquery オブジェクトが定義されています<br>var w=$("div");//e は w と等しくありません。<br><br>//最初に data([key],[value]) を使用します。 a","aaaa");// e と w にそれぞれキーを付けて同じデータを保存します。<br>$(w).data("a","wwww");// 上書きされるかどうかを確認します。 <br>alert($(e).data("a"));// 出力が wwww alert(e===w)//false <br>alert($(w).data("a"));//これも wwww; <br><br>//jQuery.data を使用します(element,[key],[value]) データを保存します。<br>$.data(e,"b","cccc");//同じデータを e と w にそれぞれ保存します。<br> $。 data(w,"b","dddd");//別のオブジェクトに保存されているにもかかわらず、前のものが上書きされるかどうかを確認します。 <br>alert($.data(e,"b")); //答えは推測できるはずです。出力 cccc <br>alert($.data(w,"b"));//この出力は dddd <br><br>}); <br></script>
上記の例を読んだ後、data([key],[value]) と jQuery.data(element,[key],[value]) が根本的に異なることがわかりましたよね?それらの間には何か関係があるのでしょうか？ data([key],[value]) が前のキーの同じ値を上書きするのはなぜですか?
そして、jQuery.data(element,[key],[value]) は、異なるオブジェクトにバインドされている限り、上書きを引き起こしません。そうですか？ソースコードを調べてみましょう。
JS コード:
コードをコピー
コードは次のとおりです:
jQuery.extend({
cache: {},
// 慎重に使用してください
uuid: 0,
// コピーごとに一意ですページ上の jQuery の
// rinlinejQuery に一致するように数字以外が削除されました
expando: "jQuery" ( jQuery.fn.jquery Math.random() ).replace( /D/g, "" ),
....
data: function( elem, name, data, pvt /* 内部使用のみ */ ) {
// データを追加できるかどうか、追加できない場合は直接返します
if ( !jQuery.acceptData( elem ) ) {
return;
}
var privateCache, thisCache, ret,
//jQuery.expando これは、This という固有の文字列です。 jquery オブジェクトは生成時に生成されます。
internalKey = jQuery.expando,
getByName = typeof name === "string",
// DOM 要素と JS オブジェクトは別々に処理する必要があります。 、IE6 ～ 7 は DOM オブジェクトと JS オブジェクト間でオブジェクト参照属性をガベージ コレクションできないため
isNode = elem.nodeType,
// DOM 要素の場合は、グローバル jQuery.cache を使用します
// JS オブジェクトの場合は、オブジェクトに直接アタッチします。
cache = isNode ? jQuery.cache : elem,
// キャッシュがすでに存在する場合のみ、JS オブジェクトの ID を定義できます。 🎜 >// キャッシュのない DOM ノードと同じパスにショートカットするコード
id = isNode ? elem[internalKey ] : elem[internalKey ] && innerKey,
isEvents = name === "events" ;
// データなしでオブジェクトのデータを取得しようとする場合は、これ以上不必要な作業を行わないようにしてください
// オブジェクトにデータがない場合は、直接戻ります
if ( (!id | | !cache[id] || (!isEvents && !pvt && !cache[id].data) && getByName && data === 未定義 ) {
return;
// id If存在しないので、
if ( !id ) {
// データがグローバル キャッシュに保存されるため、DOM ノードのみが各要素に新しい一意の ID を必要とします
//
if ( isNode ) {
// DOM 要素の場合は、要素に一意の ID を生成し、 jQuery.expando
// を属性値として使用し、その ID を elem 要素に保存します。後で jQuery.expando ID に基づいて検索されます。
elem[ innerKey ] = id = jQuery.uuid;
} else {
//JS オブジェクトはオブジェクトに直接アタッチされているのに、なぜ ID が必要なのでしょうか?
// 他の属性との競合を避けてください。
id = innerKey;
}
}
//// キーに値が含まれているかどうかにアクセスしようとすると、jQuery.cache[id] 値が存在しない場合、
// jQuery.cache[id] 値を空のオブジェクトに初期化します {}
if ( !cache[ id ] ) {
cache[ id ] = {};
if ( ! isNode ) {
cache[ id ].toJSON = jQuery.noop;
}
}
// キーと値のペアの代わりにオブジェクトを jQuery.data に渡すことができます。 ; これは
// 既存のキャッシュに浅くコピーされます
// データはオブジェクトと関数を受け取るため、浅いコピー
if ( typeof name === "object" || typeof name === "function " ) {
if ( pvt ) {
cache[ id ] = jQuery.extend(cache[ id ], name );
} else {
cache[ id ].data = jQuery .extend (cache[ id ].data, name );
}
}
/ すべてのデータを格納するマッピング オブジェクト
privateCache = thisCache = queue[ id ];
// jQuery data() は、内部データとユーザー定義の
// データ間のキーの衝突を避けるために、オブジェクトの内部データ
// キャッシュ内の別のオブジェクトに保存されます。 / jQuery 内部データは独立したオブジェクトに存在します (thisCache.data==thisCache[internalKey])
//内部データとユーザー定義データの競合を避けるためにオン
if ( !pvt ) {
// プライベートに保存 データ オブジェクトが存在しない場合は、データ オブジェクトを作成します。 {}
if ( !thisCache.data ) {
thisCache.data = {};
}
// thisCache を置き換えますプライベート データ オブジェクトを使用する
thisCache = thisCache.data;
}
// データが未定義でない場合、データ パラメーターが渡され、データが name 属性に格納されることを意味します
if ( data !== unknown ) {
// jQuery.camelCase(name) の機能は、オブジェクト/関数が渡された場合、変換は実行されません。
// 渡されるのは名前のみです。 in は文字列です。最終的に保存されるのはキーと値のペアです。
thisCache[ jQuery.camelCase( name ) ] = data;
}
// これ以降、次のコードがデータを処理します。 (elem, name) データが空の場合、戻り値のデータを検索します。
if ( isEvents && !thisCache[ name ] ) {
return privateCache.events;
}
// name が文字列の場合、データを返します
/ /そうでない場合は、ストレージ オブジェクト全体を返します。
if ( getByName ) {
// まず、現状のプロパティ データを検索してみます。
ret = thisCache[ name ]; / null|未定義のプロパティ データをテストします
if ( ret == null ) {
// CamelCased プロパティを検索してみます
ret = thisCache[ jQuery.camelCase( name ) ]; >}
} else {
ret = thisCache;
return
},
....
});
jQuery.extend({
cache: {},
// 慎重に使用してください
uuid: 0,
// コピーごとに一意ですページ上の jQuery の
// rinlinejQuery に一致するように数字以外が削除されました
expando: "jQuery" ( jQuery.fn.jquery Math.random() ).replace( /D/g, "" ),
....
data: function( elem, name, data, pvt /* 内部使用のみ */ ) {
// データを追加できるかどうか、追加できない場合は直接返します
if ( !jQuery.acceptData( elem ) ) {
return;
}
var privateCache, thisCache, ret,
//jQuery.expando これは、This という固有の文字列です。 jquery オブジェクトは生成時に生成されます。
internalKey = jQuery.expando,
getByName = typeof name === "string",
// DOM 要素と JS オブジェクトは別々に処理する必要があります。 、IE6 ～ 7 は DOM オブジェクトと JS オブジェクト間でオブジェクト参照属性をガベージ コレクションできないため
isNode = elem.nodeType,
// DOM 要素の場合は、グローバル jQuery.cache を使用します
// JS オブジェクトの場合は、オブジェクトに直接アタッチします。
cache = isNode ? jQuery.cache : elem,
// キャッシュがすでに存在する場合のみ、JS オブジェクトの ID を定義できます。 🎜 >// キャッシュのない DOM ノードと同じパスにショートカットするコード
id = isNode ? elem[internalKey ] : elem[internalKey ] && innerKey,
isEvents = name === "events" ;
// データなしでオブジェクトのデータを取得しようとする場合は、これ以上不必要な作業を行わないようにしてください
// オブジェクトにデータがない場合は、直接戻ります
if ( (!id | | !cache[id] || (!isEvents && !pvt && !cache[id].data) && getByName && data === 未定義 ) {
return;
// id If存在しないので、
if ( !id ) {
// データがグローバル キャッシュに保存されるため、DOM ノードのみが各要素に新しい一意の ID を必要とします
//
if ( isNode ) {
// DOM 要素の場合は、要素に一意の ID を生成し、 jQuery.expando
// を属性値として使用し、その ID を elem 要素に保存します。後で jQuery.expando ID に基づいて検索されます。
elem[ innerKey ] = id = jQuery.uuid;
} else {
//JS オブジェクトはオブジェクトに直接アタッチされているのに、なぜ ID が必要なのでしょうか?
// 他の属性との競合を避けてください。
id = innerKey;
}
}
//// キーに値が含まれているかどうかにアクセスしようとすると、jQuery.cache[id] 値が存在しない場合、
// jQuery.cache[id] 値を空のオブジェクトに初期化します {}
if ( !cache[ id ] ) {
cache[ id ] = {};
if ( ! isNode ) {
cache[ id ].toJSON = jQuery.noop;
}
}
// キーと値のペアの代わりにオブジェクトを jQuery.data に渡すことができます。 ; これは
// 既存のキャッシュに浅くコピーされます
// データはオブジェクトと関数を受け取るため、浅いコピー
if ( typeof name === "object" || typeof name === "function " ) {
if ( pvt ) {
cache[ id ] = jQuery.extend(cache[ id ], name );
} else {
cache[ id ].data = jQuery .extend (cache[ id ].data, name );
}
}
/ すべてのデータを格納するマッピング オブジェクト
privateCache = thisCache = queue[ id ];
// jQuery data() は、内部データとユーザー定義の
// データ間のキーの衝突を避けるために、オブジェクトの内部データ
// キャッシュ内の別のオブジェクトに保存されます。 / jQuery 内部データは独立したオブジェクトに存在します (thisCache.data==thisCache[internalKey])
//内部データとユーザー定義データの競合を避けるためにオン
if ( !pvt ) {
// プライベートに保存 データ オブジェクトが存在しない場合は、データ オブジェクトを作成します。 {}
if ( !thisCache.data ) {
thisCache.data = {};
}
// thisCache を置き換えますプライベート データ オブジェクトを使用する
thisCache = thisCache.data;
}
// データが未定義でない場合、データ パラメーターが渡され、データが name 属性に格納されることを意味します
if ( data !== unknown ) {
// jQuery.camelCase(name) の機能は、オブジェクト/関数が渡された場合、変換は実行されません。
// 渡されるのは名前のみです。 in は文字列です。最終的に保存されるのはキーと値のペアです。
thisCache[ jQuery.camelCase( name ) ] = data;
}
// これ以降、次のコードがデータを処理します。 (elem, name) データが空の場合、戻り値のデータを検索します。
if ( isEvents && !thisCache[ name ] ) {
return privateCache.events;
}
// name が文字列の場合、データを返します
/ /そうでない場合は、ストレージ オブジェクト全体を返します。
if ( getByName ) {
// まず、現状のプロパティ データを検索してみます。
ret = thisCache[ name ]; / null|未定義のプロパティ データをテストします
if ( ret == null ) {
// CamelCased プロパティを検索してみます
ret = thisCache[ jQuery.camelCase( name ) ]; >}
} else {
ret = thisCache;
return
},
....
});
写真をご覧ください。 
jQuery.data(element,[key],[value]) ソース コードを見ると、各要素にはデータを保存するための独自の {key:value} オブジェクトがあることがわかります。そのため、新しく作成されたオブジェクトは同じキーを持っています。 新しいオブジェクトは別の {key:value} オブジェクトに保存されるため、元の既存のオブジェクト キーに対応する値は上書きされません。
次に、それぞれ(callback)を使用するdata([key],[value])のソースコードを解析する必要があります。解析する前に、それぞれの使い方とソースコードを見てみましょう。 （折り返し電話）。
JS コード:
コードをコピー コードは次のとおりです: