jQuery ソース コードでのデータ バッファリングについて学習する

この記事では、jQuery ソース コードのデータ バッファリングについての学習を主に紹介します。これには特定の参考値があります。必要な友達はそれを参照できます。

メモリ リークとは何ですか?

メモリ リークとは、メモリ ブロックがブラウザ プロセスによって使用または終了できないことを意味しますか?ブラウザは自動ガベージ コレクションを使用してメモリを管理しており、これはすでに非常に優れていますが、まだバグがあるため、メモリ リークが発生します。

一般的なメモリ リークは次のとおりです:

循環参照
JavaScript クロージャ
DOM 挿入

現在の主流ブラウザのほとんどでメモリ リークが発生します

• りー

は DOM から削除されましたが、その要素を参照するオブジェクトまたは変数がまだ存在するため、削除できません。この状況はブラウザを更新することで解消できます。
もう 1 つの状況は、DOM オブジェクトと JS オブジェクトが相互参照することです。これにより、リフレッシュしてもメモリが減りません。これは厳密な意味でのメモリ リークです。
そのため、日常の実際のアプリケーションでは、要素の一部のデータをキャッシュする必要がよくありますが、これらのデータは DOM 要素と密接に関連していることがよくあります。 DOM 要素 (ノード) もオブジェクトであるため、DOM 要素の属性を直接拡張できますが、DOM 要素にカスタム属性やデータを追加しすぎるとメモリ リークが発生する可能性があるため、これは避けるべきです。 したがって、より良い解決策は、低結合方式を使用して DOM とキャッシュ データを接続することです。

jquery のバッファリング メカニズムは、この問題を解決します。

jqueryのバッファリング機構

アイデア:

domオブジェクトにいくつかのカスタム属性を作成するため、jsオブジェクトなどで参照されるとメモリリークが発生する可能性があるため、jqueryのバッファリング機構。ここで使用するのは、DOM に保存したいデータを保存するためのバッファ オブジェクト cache を jquery 上に作成することです。

1. cache来存放我们想要再DOM中保存的数据。

2. 但是问题又来了，我们怎么实现对DOM元素于jquery中的cache对象中的数据的映射呢？

3. 我们首先再DOM对象上创建一个唯一性的属性，他是expando的值。而expando的值是一个字符串，'jquery'+date，基本上可以保证这个属性再不同DOM的唯一性。

4. 接着把每个结点的dom[expando]`的值设为是一个自增长的id，保持全局的唯一性，既可以使用cache[id]`就可以获取到对应的数据了。即id就好比是打开一个房间(DOM节点)的钥匙。 而每个元素的所有缓存都被放到了一个map映射里面，这样可以同时缓存多个数据。

5. 总之，现在DOM元素上找到expando

   しかし、疑問がまた出てきます。jquery の cache オブジェクト内のデータに DOM 要素をどのようにマッピングするのでしょうか?

まず、DOM オブジェクトに一意の属性を作成します。これは expando の値です。 expando の値は文字列 'jquery'+date であり、基本的に DOM に関係なくこの属性の一意性が保証されます。

次に、各ノードの dom[expando]` の値を自己増加する ID に設定して、グローバルな一意性を維持します。また、cache[id] ` を使用することもできます。対応するデータを取得します。つまり、ID はルーム (DOM ノード) を開くための鍵のようなものです。 各要素のすべてのキャッシュはマップ内に配置されるため、複数のデータを同時にキャッシュできます。

つまり、expando の対応する値が DOM 要素 (uid) で見つかるようになりました。次に、この uid を通じてデータ バッファー Cache オブジェクトの特定のデータを見つけます。

// [1]
var a = new Object();
var b = new Object();

a.r = b;
b.r = a;

// [2]
var a = new Object();
a.r = a;
// 循环引用很常见且大部分情况下是无害的，但当参与循环引用的对象中有DOM对象或者ActiveX对象时，循环引用将导致内存泄露。

静的メソッドデータとインスタンスメソッドの違い

var cache = {
    "uid1": { // DOM节点1缓存数据，
        "name1": value1,
        "name2": value2
    },
    "uid2": { // DOM节点2缓存数据，
        "name1": value1,
        "name2": value2
    }
    // ......
};

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトにご注意ください。 🎜🎜関連する推奨事項: 🎜🎜🎜jQuery ソース コードのコールバック関数の分析🎜🎜🎜🎜🎜 jQuery ソース コードのコア コンテンツ🎜🎜🎜

以上がjQuery ソース コードでのデータ バッファリングについて学習するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。