jQuery データ キャッシュの実装アイデアと簡単なシミュレーション function_jquery

はじめに
jQuery のデータ キャッシュについては皆さんよくご存知だと思いますが、jQuery のキャッシュ システムは DOM 要素だけでなく、アニメーションやイベントなどにも使用されます。したがって、日常の実際のアプリケーションでは、要素の一部のデータをキャッシュする必要があることがよくありますが、これらのデータは DOM 要素と密接に関連していることがよくあります。 DOM 要素 (ノード) もオブジェクトであるため、DOM 要素の属性を直接拡張できますが、DOM 要素にカスタム属性やデータを追加しすぎるとメモリ リークが発生する可能性があるため、これは避けるべきです。 したがって、より良い解決策は、低結合方式を使用して DOM とキャッシュ データを接続することです。

さらに: jQuery.data および jQuery.removeData 静的メソッドの紹介と使用法、およびこれら 2 つのメソッドに基づくプロトタイプ拡張メソッドについては、公式で確認できます。 API ドキュメント。

実装のアイデア
jQuery は、一連の柔軟で強力なキャッシュ メソッドを提供します。
(1) まず、jQuery 内にキャッシュ オブジェクト {} を作成して、キャッシュされたデータを保存します。 次に、値expandoを持つ属性を、キャッシュする必要があるDOMノードに拡張します。ここでは「jQuery」(new Date).getTime()です。 注:expando の値は「jQuery」の現在時刻と同じです。要素自体がこの属性を持つ可能性は非常に低いため、競合は無視できます。
(2) 次に、グローバルな一意性を維持するために、各ノードの dom[expando] の値を自動インクリメント変数 id に設定します。 この ID の値は、DOM ノードとデータを関連付けるキャッシュ キーとして使用されます。つまり、cache[id] はこのノード上のすべてのキャッシュを取得します。つまり、id はルーム (DOM ノード) を開くためのキーのようなものです。 各要素のすべてのキャッシュはマップ内に配置されるため、複数のデータを同時にキャッシュできます。
(3) したがって、キャッシュ オブジェクトの構造は次のようになります。

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

var queue = {
"uuid1": { // DOM ノード 1 はデータをキャッシュします。"uuid1" は dom1[expando] と同等です
"name1": value1,
"name2": value2
},
"uuid2": { // DOM ノード 2 はデータをキャッシュします。"uuid2" は dom2[expando] と同等です。
"name1": value1,
"name2 ": value2
}
// ......
};

各 uuid は elem キャッシュ データに対応し、各キャッシュ オブジェクトは複数の要素で構成できます名前/値 (名前と値のペア) ペア。値は任意のデータ型にすることができます。


簡単なシミュレーションの実装 上記の考え方に基づいて、jQuery.data と jQuery.removeDate の関数を簡単に実装できます。

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

(function(window, unknown) {
var cacheData = {}, // データの保存に使用されるオブジェクト
win = window, // ウィンドウを変数にキャッシュします
uuid = 0 ,
// 乱数 (8 桁) を宣言します
// new Date() によって生成される乱数は、空の文字列で接続された後 (または toString を使用して変換された後) の型であることに注意してください。メソッド) の場合は String になり、スライス メソッド
expando = "cacheData" ( new Date() "").slice(-8);
// ( new Date()).toString( ).slice( -8) Expando
// キャッシュに書き込みます
var data = function(elem, name, value) {
// またはネイティブ メソッドを使用して文字列 Object.prototype.toString を検証します.call( elem) === "[object String]"
// elem が文字列の場合
if (typeof elem === "string") {
// name パラメータが渡された場合Enter キャッシュ
if (name !== unknown) {
cacheData[elem] = name;
}
// キャッシュ データを返します
return cacheData[elem];
// elem が DOM ノードの場合
} else if (typeof elem === "object") {
var id,
thisCache
// elem が DOM ノードを持たない場合Expando 属性を使用する場合は、expando 属性を追加します (要素のキャッシュを初めて設定するとき)。それ以外の場合は、既存の Expando 値と ID 値を直接取得します。
if (!elem[expando]) {
id = elem[展開] = uuid;
thisCache = キャッシュデータ [id] = {};
id = elem[展開];
>// 現在のキャッシュ オブジェクトとして乱数を使用します。 の属性、キャッシュ オブジェクトは乱数を使用して見つけることができます。
if (!thisCache[expando]) {
thisCache[expando] = {}; 🎜>}
if (value !== unknown) {
// データをキャッシュ オブジェクトに保存します
thisCache[expando][name] = value;
}
// Return DOM 要素に格納されているデータ
return thisCache[expando ][name]
}
}// キャッシュを削除します
var RemoveData = function(elem, name); >// elem が文字列の場合、属性を直接削除します value
if (typeof elem === "string") {
delete queueData[elem]>// if key が DOM ノード
} else if (typeof elem === "object" ) {
// elem に Expando 属性がない場合、キャッシュを削除せずに実行を終了します
if (!elem[expando]) {
return;
}
// オブジェクトが空かどうかを確認します
var isEmptyObject = function(obj) {
var name; (obj の名前) {
return false;
}
return true;
}
removeAttr = function() {
try {
// 標準ブラウザである IE8 は、delete を直接使用して属性を削除できます
delete elem[expando];
} catch (e) {
// IE6/IE7 は、removeAttribute メソッドを使用して属性を削除します
elem.removeAttribute(expando)
};
id = elem[expando];
if (name) {
// 指定されたデータのみを削除します
delete queueData[id][expando][name];が空のオブジェクトの場合、その ID に対応するすべてのデータ オブジェクトが削除されます
if (isEmptyObject(cacheData [id][expando])) {
delete
removeAttr(); >}
} else {
// DOM 要素のキャッシュに保存されているすべてのデータを削除します
deletecacheData[id];
}
}
};
// 外部から使用できるように、data とremoveData をウィンドウ グローバル オブジェクトにハングします。
win.expando = Expando;
win.data = data; にアクセスします。削除データ = 削除データ;
})(ウィンドウ、未定義);


例:
HTML 構造:




コードをコピー🎜>

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


< ;div id="demo" style="高さ: 100px; 幅: 100px; 背景: #ccc; カラー: # fff; マージン: 20px; text-align: center; line-height: 100px;">

デモ

js コード: コードをコピー

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


window.onload = function() {
// テスト

var Demon = document.getElementById("demo");
// キャッシュ
データを書き込みます (demo, "myName", "hcy");

console.log(data(demo, " myName")); // hcy data(demo, "myBlog", "http://www.cnblogs.com/cyStyle"); console.log(data(demo, "myBlog")) ; // http://www.cnblogs.com/cyStyle // DOM 要素のキャッシュを削除します。 ValueremoveData(demo, "myBlog"); myBlog")); // 未定義 console.log(data(demo, "myName")); // hcy console.log(demo[expando]); // 1

// 削除DOM 要素

removeData(demo);
console.log(demo[expando]) // 未定義

;
Screenshot of the example results under firefox:

For the above example to implement jQuery's simple caching system: first add a randomly generated attribute expando to the DOM element. This attribute is used To store the id value for accessing cached data, it is like the DOM element has a key to open the cache safe. As long as you have the key, you can open the cache safe at any time. The data originally stored in the DOM element is transferred to the cache, and the DOM element itself only needs to store a simple attribute, so that memory leaks caused by the DOM element can be avoided (I don’t know what will happen specifically, everyone knows So~) the risk is minimized.

Conclusion
I am confused at the end. There may be deviations in some terms or explanations. I hope you can correct me and give me some suggestions. In addition, theoretically speaking, , the data and removeData methods can be used for caching any object. However, if used on local objects or window objects, there will be problems such as memory leaks and circular references (^_^ as seen from the Internet), so they are generally used for DOM nodes. More suitable, you can also combine events and animations to cache data on DOM nodes. ps: cache is really important! You need to realize it slowly ~
Because of sharing, it is simple; because of sharing, it is happy.