jQuery のキャッシュメカニズムの簡単な分析_jquery

少し前に jQuery のアニメーション キューを勉強していたときに、jQuery のキャッシュ システムも非常に強力であることを発見しました。これまでに少し触れたことはありましたが、詳しく勉強したことはありませんでした。 jQuery のキャッシュ システムは、外部で使用する場合は比較的単純です。たとえば、特定の URL データをキャッシュに保存するには、次のように記述するだけです:

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

var val = "stylechen.com";
$("div").data( "url" ); // unknown を返します
$ ("div").data( "url", val ); // "stylechen.com"
$("div").data( "url" ); // "stylechen.com"

上記の val には文字列を格納できるだけでなく、任意のデータを格納でき、オブジェクト、配列、関数などを格納できます。この関数の実装は非常に簡単で、データを保存するグローバル オブジェクトを宣言し、data メソッドを使用してデータを保存または返します。

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

var queueData = {};データを保存するには グローバル オブジェクト

var data = function( key, val ){
if( val !== unknown ){
cacheData[key] = val;
}

キャッシュデータを返す [キー];};

jQuery キャッシュ システムの本当の魅力は、アニメーション、イベントなどすべてがこのキャッシュ システムを使用していることにあります。以前 easyAnim を書いていたとき、アニメーション キューを各 DOM 要素のカスタム属性に保存していましたが、これによりキュー データへのアクセスが容易になりましたが、隠れた危険ももたらしました。 DOM 要素にカスタム属性や過剰なデータを追加すると、メモリ リークが発生する可能性があるため、これは避けてください。

jQuery のキャッシュ システムを使用して DOM 要素のデータを保存する場合、ランダムに生成された属性が最初に DOM 要素に追加されます。この属性は、DOM と同様に、キャッシュされたデータにアクセスするためのインデックス値を保存するために使用されます。要素にはキャッシュ セーフのキーがあり、キーを持っている限りいつでもキャッシュ セーフを開くことができます。 DOM要素にもともと格納されていたデータがキャッシュに転送され、DOM要素自体は単純な属性を格納するだけで済むため、DOM要素によるメモリリークのリスクを最小限に抑えることができます。以下は、jQuery をシミュレートするために私が作成した簡単なキャッシュ システムです:

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

var cacheData = {}, // データの保存に使用されるグローバル オブジェクト
uuid = 0,
// 乱数を宣言
Expando = "cacheData" ( new Date() " " ).slice( -8 );

var data = function( key, val, data ){
if( typeof key === "string" ){
if( val != =未定義){
キャッシュデータ[キー] = val;
}

return cacheData[key];
}
else if( typeof key === "object" ){
varindex,
thisCache;

if( !key [expando] ){
// DOM 要素の属性を追加します
// 乱数が属性名、インデックス値が属性値
Index = key[expando] = uuid;
thisCache =cacheData[index] = {};
}
else{
Index = key[expando];
thisCache =cacheData[index];
}


if( !thisCache[expando] ){
thisCache[expando] = {};
}

if( ギャンブル> ; data !== unknown ){
// データをキャッシュ オブジェクトに保存します
thisCache[expando][val] = data;
}

//格納されている DOM 要素を返します Data
return thisCache[expando][val];
}
};

var RemoveData = function( key, val ){
if( typeof key === "string" ){
delete queueData[key];
}
else if( typeof key = == "object" ){
if( !key[expando] ){
return;
}
// オブジェクトが空かどうかを確認します
var isEmptyObject = function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},

RemoveAttr = function(){
try{
// IE8 および標準ブラウザは、delete を使用して属性を直接削除できます
delete key[expando];
}
catch (e) {
// IE6/IE7 を使用属性を削除するためのremoveAttributeメソッド
key.removeAttribute(expando);
}
},

Index = key[expando];

if( val ){
// 指定されたデータのみを削除します
delete cacheData[index][expando][val];
// 空のオブジェクトの場合は、単純にすべてのオブジェクトを削除します
if( isEmptyObject(cacheData[index] [expando] ) ){
deletecacheData[index];
removeAttr();
}
}
else{
// DOM 要素のキャッシュに格納されているすべてのデータを削除します
キャッシュデータを削除[インデックス];
RemoveAttr();
}
}
};

上記のコードで注目すべき点は、IE6/IE7 でカスタム属性を削除する場合、delete を使用するとエラーが報告されることです。標準ブラウザでは、delete を使用して削除することができます。呼び出しの結果は次のとおりです:

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

var box = document.getElementById( "box " ),
list = document.getElementById( "list" );

data( box, "myName", "chen" );
alert( data( box, "myName" ) ) ; // チェン

data( box, "myBlog", "stylechen.com" );
alert( data( box, "myBlog" ) ); // stylechen.com

removeData( box, "myBlog" );

alert( data( box, "myBlog" ) ); // 未定義
alert( data( box, "myName" ) ) // chen
alert( box[expando] );

removeData( box );
alert( box[expando] ); // 未定義

もちろん、jQuery のキャッシュ システムは私のものよりも複雑ですが、中心となる原理は同じです。 easyAnim は、後続のバージョンでこのキャッシュ システムを導入する予定です。