jQuery パート 6 を読む: キャッシュデータ function_jquery の概要-jsチュートリアル-php.cn

jQuery パート 6 を読む: キャッシュデータ function_jquery の概要

WBOY

リリース： 2016-05-16 18:05:41

オリジナル

1072 人が閲覧しました

多くの学生は、

コードをコピーなどのプロジェクトの HTMLElement 属性にデータを保存することを好みます。コードは次のとおりです:

テスト

<script> <br>div.getAttribute('data'); // 一部のデータ <br></ script&gt ; <BR></div> <BR>ページの div にカスタム属性「data」と値「some data」を追加します。後続の JS コードで getAttribute を使用して取得します。 <BR>jQuery は 1.2.3 以降、データを保存/削除するための data/removeData メソッドを提供しています。 1.6.1 コード スニペット <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="38220" class="copybut" id="copybut38220" onclick="doCopy('code38220')"><U> コードをコピー </U></a></span> コードは次のとおりです。 </div><div class="codebody" id="code38220"> <BR>jQuery.extend( { <BR>cache: {}, <BR>// 注意して使用してください <BR>uuid: 0, <BR>... <BR>}); <BR></div> <BR> は静的フィールドを追加しますjQuery /Methods (jQuery.cache/jQuery.uuid/jQuery.expando などを含む) へ。以下では、キャッシュに使用される <BR>jQuery.cache 空のオブジェクトを紹介します。その構造はさらに複雑です。 <BR>jQuery.uuid は一意の番号を増分します。 <BR>Math.random を使用して生成され、数字以外の文字が削除された jQuery.expando 文字列。これは、HTMLElement または JS オブジェクトのプロパティ名として機能します。 <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="16194" class="copybut" id="copybut16194" onclick="doCopy('code16194')"><U>コードをコピー</U></a></span> コードは次のとおりです。</div><div class="codebody" id="code16194"> <BR>expando: "jQuery" ( jQuery.fn .jquery Math .random() ).replace( /D/g, "" ), <BR></div> <BR>jQuery.noData JS オブジェクトは、指定された HTMLElement のデータ メソッドを無効にします。埋め込み、アプレットなど。 <BR>jQuery.hasData は、HTMLElement または JS オブジェクトにデータがあるかどうかを判断するために使用されます。 true または false を返します。つまり、属性を追加するために jQuery.data メソッドが呼び出された場合、true が返されます。 <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="55715" class="copybut" id="copybut55715" onclick="doCopy('code55715')"><U>コードをコピー</U></a></span> コードは次のとおりです。</div><div class="codebody" id="code55715"> <BR><div>aa</div> <br> <script> <br>var div = document.getElementsByTagName('div')[0]; <br>$.hasData(div); // false <br>$.data(div, 'name') ,'jack '); <br>$.hasData(div); // true <br><br> </div>jQuery.acceptData は、要素がデータを受け入れることができるかどうかを判断するために使用されます。 true または false を返します。 jQuery.dataで使用されます。 <br>jQuery.data これはクライアント プログラマに提供されるメソッドであり、setter/getter でもあります。 <br>1、1 つのパラメータを渡し、指定された要素に関連付けられたすべてのデータ、つまり thisCache を返します。 jQuery.data(el) // thisCache <br>2、2 つのパラメータを渡し、指定された属性値を返します。 jQuery.data; (el, 'name'); <br>3、3 つのパラメータを渡し、属性と属性値を設定します。 jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', { }); <br>4、4 つのパラメーターを渡します。4 番目のパラメーター pvt は jQuery ライブラリ自体にのみ提供されます。つまり、jQuery._data メソッドで true を渡します。 jQuery のイベント モジュールは jQuery.data に大きく依存しているため、誤った書き換えを避けるためにこのバージョンに追加されました。 <br>jQuery.removeData はデータを削除します。 <br>上記は jQuery データ キャッシュ モジュールの全体概要です。以下は jQuery.data メソッドの詳細な説明です。 jQuery.data は、JS オブジェクトと HTMLElement の 2 種類のオブジェクトのキャッシュを提供します。 <br><br><div class="codetitle">
<span><a style="CURSOR: pointer" data="37152" class="copybut" id="copybut37152" onclick="doCopy('code37152')">コードをコピー <u></u></a> コードは次のとおりです。 </span> </div> <div class="codebody" id="code37152">// JS オブジェクトのキャッシュを提供します <br>var myObj = {}; <br>$.data(myObj, 'name', 'jack'); name'); // jack <br>// HTMLElement のキャッシュを提供します <br><div id="xx"><br>var el = document.getElementById; ('xx' ); <br>$.data(el, 'name', 'jack'); // ジャック <br></script> 🎜>

内部実装にも違いがあります。
1. JS オブジェクトにキャッシュを提供する場合、データは JS オブジェクトに直接保存されます。キャッシュはJSオブジェクトです。このとき、JSオブジェクトにこっそり属性が追加され(jQuery16101803968874529044と同様)、属性値もJSオブジェクトになります。たとえば、

コードをコピーします

コードは次のとおりです。 var myObj = {} $ .data(myObj, 'name', 'jack'); console.log(myObj);

myObj の構造は次のとおりです

コードをコピー

コードは次のとおりです: myObj = { jQuery16101803968874529044 : { name : 'jack '

}

}

文字列「jQuery16101803968874529044」はデータ内の ID という名前です (HTMLElement 要素の ID ではないことに注意してください)。これは実際には jQuery.expando です。前述したように、jQuery.js がページに導入された後にランダムに生成されます。
2. HTMLElement にキャッシュが提供されている場合、HTMLElement には直接保存されません。代わりに、jQuery.cache に保存されます。キャッシュはjQuery.cacheです。この時、まずHTMLElementに属性を追加します（jQuery16101803968874529044と同様）、属性値は数字（1、2、3の増加）になります。つまり、HTMLElement には一部の数値のみが保存され、データは直接挿入されません。これは、古いバージョンの IE ではメモリリークのリスクがある可能性があるためです。そして、HTMLElement はどのように jQuery.cache と接続するのでしょうか? またはID。属性値の番号が ID であると先ほど述べました。例:

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

 

<script> <br>var el = document.getElementById('xx'); <br>$.data(el, 'name', 'jack'); <br>console.log(el[jQuery.expando]); // 1 <br>console.log(jQuery.cache); <br></script> 🎜>

el には属性 jQuery.expando が追加され、値は id で、この id は 1 からインクリメントされます。 idはjQuery.cacheの属性(キー)として利用されます。このようにして、HTMLElementがjQuery.cacheに接続されます。写真の通り

jQuery パート 6 を読む: キャッシュデータ function_jquery の概要
jQuery.data には、jQuery._data でのみ使用される 4 番目のパラメーター pvt もあることに気づきましたか。

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

// 内部使用のみ _data: function( elem, name, data ) { 
return jQuery.data( elem, name, data, true ); 
}, 

 
jQuery._data はネーミングから指定しますこれが Private であるため、jQuery を使用するクライアント プログラマはこのメソッドを呼び出すべきではありません。 jQuery の API ドキュメントでもそれは公開されていません。 

jQuery のデータキャッシュモジュールは、1.2.3 から 1.6.1 までのほぼすべてのバージョンで変更されます。 jQuery._data は、クライアントプログラマーがデフォルトモジュールを上書き/再書き込みできないようにするために提案されました。たとえば、jQuery イベントモジュールのイベントハンドラーは、モジュールが書き換えられた場合、jQuery.data を使用して保存されます。その後、イベントモジュールが麻痺します。そこで、pvtパラメータとjQuery._dataメソッドを特別に追加しました。
しかし、意図的に破壊したい場合は、それでも破壊できます。次のように

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

テスト< ;/div>

<script> <br>$('#xx').click(function(){ <br>alert('click'); <br>}); <br>// ステートメント 1 <br>$.data($('#xx')[0], 'events', '', true); <br>// ステートメント 2 <br>//$._data( $('#xx ')[0], 'events', ''); <br></script> 

div[id=xx] をクリックしてもクリック イベントはトリガーされません。

jQuery.data 設定 (set) データキャッシュのプロセス全体は次のようになります。これを理解してください。データを取得するプロセスは理解しやすいです。繰り返されません。
最後に、zChain.data/removeData メソッドを zChian.js に追加します。これは「ミニバージョン」であり、HTMLElement にデータキャッシュを追加するだけであるためです。ご注意ください。

関連:

http://msdn.microsoft.com/en-us/library/Bb250448
http://bugs.jquery.com/ticket/6807
zChain-0.6.js