jQueryデータキャッシュ data(name, value)_jqueryの詳しい説明と実装

プログラマとして「キャッシュ」というと、すぐに「クライアント (ブラウザ キャッシュ)」と「サーバー キャッシュ」を思い浮かべるでしょう。クライアント キャッシュはブラウザのコンピュータのハード ドライブ、つまりブラウザの一時フォルダに保存されますが、サーバー キャッシュはサーバーのメモリに保存されます。 もちろん、一部の高度なアプリケーションには専用のキャッシュ サーバーもあります。データベースを使用したキャッシュの実装も含まれます。もちろん、これらはこの記事の範囲外です。この記事で説明するのは、最も人気のある JavaScript フレームワークである jQuery のデータ キャッシュの実装原理です。これは、jQuery のバージョン 1.2.3 以降に追加された新機能です。
1. jQuery データ キャッシュの役割
jQuery データ キャッシュの役割は、中国語 API では次のように説明されています。「要素上のデータにアクセスし、要素のリスクを回避するために使用されます。循環参照」。この文をどのように理解すればよいでしょうか。以下の例を見てください。もっと適切な例があれば教えてください。
(1) 循環参照のリスクのある例 (getDataByName(name) メソッドの for in ステートメントに注意してください):

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

Tom> ;

マイク

var userInfo = [
{
"name": "トム",
"年齢": 21,
"電話": "020-12345678"
},
{
"名前": "マイク",
"年齢": 23,
"電話": "020-87654321"
}]; function getDataByName(name)
{
for (var i in userInfo)
{
if (userInfo[i].name == name)
{
return userInfo[i] ;
ブレーク ;
}
}
}
関数 showInfoByName(name)
{
var info = getDataByName(name); info.name 'n ' age:' info.age 'n' 'phone:' info.phone);
}



(2) 例循環参照のリスクを最適化します (この例は、実際には jQuery キャッシュの実装原理に似ています。この例の焦点は、名前がオブジェクト キーに直接対応するように userInfo の JSON 構造を書き換えることです):

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

トム a>

マイク

jQuery データ キャッシュの実装は実際には非常に簡単です。データの実装原理を理解しやすくするために、コードをできるだけシンプルにしました。関数とテスト コードは次のとおりです。


コードをコピー

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

div1

div2

script type="text/javascript">
//キャッシュ オブジェクトの構造は次のようになります {"uuid1":{"name1":value1,"name2":value2},"uuid2":{"name1": value1, "name2":value2}}、各 uuid は elem キャッシュ データに対応します。各キャッシュ オブジェクトは複数の名前と値のペアで構成でき、value はたとえば次のように elem の下に置くことができます。 JSON フラグメントを保存します: $(elem).data('JSON':{"name":"Tom","age":23})
var queue = {}//expando as elem Newユーザー定義の属性との競合を防ぐために、ここでは変数サフィックスが使用されます。
var Expando = 'jQuery' new Date().getTime(); 🎜>function data (elem, name, data)
{
//少なくとも 2 つのパラメータ elem と name を使用してキャッシュを取得または設定できます
if (elem && name)
{
//elem タグのexpando 属性の取得を試みます
var id = elem[expando];
if (data)
{
// キャッシュデータを設定します
if (! id)
id = elem[expando] = uuid;
//id キー オブジェクトがキャッシュに存在しない場合 (つまり、この elem にデータ キャッシュが設定されていない場合)、最初に空のオブジェクトを作成します
if (!cache[id])
cache[id] = {};
cache[id][name] = データ;
else
{
/ /キャッシュ データを取得します
if (!id)
return 'キャッシュが設定されていません!'
else
return キャッシュ[id][name]
}
}

var div = document.getElementById(' div1');
data(div, "タグ名", "div"); >alert(data(div, "tagName")) ; //div
alert(data(div, "ID")) //div1
var div2 = document.getElementById('div2'); 🎜>alert(data(div2, "tagName") ); //キャッシュを設定していません!



3. >
(1) jQuery キャッシュ オブジェクトはグローバルに存在するため、AJAX アプリケーションではページが更新されることはほとんどないため、データの操作を続けるとこのオブジェクトが常に存在することになり、不適切な使用が原因である可能性が非常に高くなります。 、オブジェクトは成長し続け、最終的にはプログラムのパフォーマンスに影響を与えます。したがって、このオブジェクトを適時にクリーンアップする必要があります。jQuery には、対応するメソッド (removeData(name)) も用意されています。name は、データ値を設定するときに使用した name パラメーターです。
さらに、jQuery コードの理解に基づいて、次の状況ではデータ キャッシュを手動でクリアする必要がないことがわかりました。
elem で delete() 操作を実行jQuery はオブジェクトのキャッシュをクリアします。 jQuery 関連のソース コード リファレンス:

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


remove:function (selector)

{ if (!selector || jQuery.filter(selector, [this]).length) { // メモリリークを防ぐ jQuery("*", this).add([this]).each(function() { jQuery.event.remove(this);

jQuery.removeData(this);

}); if (this .parentNode)
this.parentNode.removeChild(this);
}
}


の場合、要素に対して empty() 操作を実行します。 elem 子要素が存在する データ キャッシュ。jQuery の empty() 実装は実際にループ内で Remove() を呼び出して子要素を削除するため、jQuery は子オブジェクトに存在する可能性のあるデータ キャッシュもクリアします。 jQuery 関連のソース コード リファレンス:




コードをコピー


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

empty:function ()
{

// 要素ノードを削除し、メモリ リークを防止します jQuery(this).children().remove(); // 残りのノードを削除します while (this. firstChild) this.removeChild(this.firstChild) }

;
2. jQuery copy node clone() メソッドはデータ キャッシュをコピーしません。正確に言うと、jQuery は新しくコピーされた要素キャッシュを保存するためにグローバル キャッシュ オブジェクトに新しいノードを割り当てません。 jQuery は、 clone() で、キャッシュを指す可能性のある属性 (elem の Expando 属性) を空の属性に置き換えます。この属性を直接コピーすると、元の要素と新しくコピーされた要素の両方がデータ キャッシュをポイントし、中間の相互運用が 2 つの要素のキャッシュ変数に影響を与えます。次の jQuery コードは、expando 属性を削除します (jQuery 1.3.2、以前のバージョンではこの方法で処理されませんでした。明らかに、新しいバージョンのこのメソッドのパフォーマンスは向上しています)。
jQuery.clean([html.replace(/ jQueryd ="(?:d |null)"/g, "").replace(/^s*/, "")])データ キャッシュをまとめてコピーすると、非常に便利な場合があります。たとえば、ドラッグ操作でソース ターゲット要素ノードをクリックすると、半透明の要素のコピーがコピーされてドラッグが開始され、データ キャッシュがドラッグにコピーされます。ドラッグが完了するまで、現在ドラッグされている要素に関連する情報を取得できます。 jQuery メソッドではそのような処理が提供されません。どうすればよいでしょうか? 1 つ目の方法は、jQuery コードを書き直すことです。この方法は明らかに愚かで非科学的です。正しいアプローチは、ソース ターゲットのデータをコピーし、コピーされた要素にデータをリセットすることです。これにより、data(name, value) メソッドが実行されると、jQuery によってグローバル キャッシュ オブジェクト内に新しいスペースが開かれます。実装コードは次のとおりです。

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

if ( typeof($.data( currentElement)) == 'number')
{
var elemData = $.cache[$.data(currentElement)]
for (var k in elemData)
{
draggingDiv.data(k, elemData[k]);
}
}

上記のコードでは、$.data(elem,name,data) が 3 つ含まれていますelem パラメータが 1 つしかない場合、このメソッドはそのキャッシュ キー (つまり、uuid) を返します。このキーを使用して、キャッシュ オブジェクト全体を取得し、そのオブジェクトのデータを新しいオブジェクトにコピーします。