jQuery実装原理のシミュレーションコード-2 データ部分_jquery

もちろん、このデータには属性を介してアクセスする必要がありますが、複数の属性がある場合はどうなるでしょうか? 、複数の属性を定義しますか? 、属性の名前は何ですか?他の属性と競合しますか?
jQuery では、DOM オブジェクト用に拡張されたプライベート データを 1 つのオブジェクトで表現でき、複数のデータをこのオブジェクトの複数のプロパティで表現できます。他の既存のプロパティと競合することなく、DOM オブジェクトを通じてこの展開されたデータ オブジェクトを検索できるようにするために、jQuery で展開されたオブジェクトのプロパティ名を表すためにexpando 定数が使用され、expando の値が計算されます。この属性の値は、拡張オブジェクトを検索するために使用されるキー値です。
たとえば、expando の値を「jQuery1234」として定義し、「jQuery1234」という名前のこの属性を各 DOM オブジェクトに追加できます。この属性の値はキー (たとえば、1000) にすることができます。
jQuery オブジェクトのキャッシュは、すべてのオブジェクト拡張オブジェクトを保存するために使用されます。このオブジェクトは辞書とみなすことができ、属性名はキー値であり、対応する値は拡張データ オブジェクトです。
つまり、jQueryオブジェクトのキャッシュ上にはメンバー1000が存在し、このメンバーが参照するオブジェクトがDOMオブジェクト1000番のプライベート拡張オブジェクトとなります。メンバー 1000 のプライベート データはこのオブジェクトに保存されます。
DOM オブジェクトが拡張データを取得する必要がある場合、まずオブジェクトの Expando 属性を通じてキー値を取得し、次にこのキー値を使用して jQuery.cache 内の独自の拡張オブジェクトを取得し、データの読み取りと書き込みを行います。拡張オブジェクト。

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

///
// 共通メソッド
function now() {
return (new Date).getTime();
}
// 展開された属性名data、動的 既存のプロパティとの競合を避けるために生成します。
var Expando = "jQuery" now()、uuid = 0、windowData = {}; ;
// データ管理。DOM オブジェクトのプライベート データを保存し、保存されたデータを読み取ることができます。
jQuery.fn.data = function (key, value) {
// Read
if (value) === 未定義) {
return jQuery.data(this[0], key);
}
else { // Set
this.each(
function () {
jQuery.data(this, key, value);
}
);
}
}
// データを削除し、オブジェクトに保存されているデータを削除します
jQuery.fn .removeData = function (key) {
return this.each(function () {
jQuery.removeData(this, key);
})
}

//保存要素のデータ
jQuery.data = function (elem, name, data) { // #1001
// データを保存する要素のキー値を取得します
var id = elem[expando], cache = jQuery.cache, thisCache;
// ID がないと値を取得できません
if (!id && typeof name === "string" && data === undefine) {
return null ;
}
// 要素の一意の ID を計算します
// 要素の一意のキー値を計算します
if (!id) {
id = uuid>}
// 保存されていない場合
if (!cache[id]) {
elem[expando] = id; // 要素のキー値を保存します
cache[id] = {}; // 要素に対応する値を保存するオブジェクトをキャッシュ上に作成します
}
// この要素のデータ オブジェクトを取得します
thisCache =
//名前付きキャッシュを未定義の値で上書きしないようにします
// 値を保存します
if (data !== unknown) {
thisCache[name] = data;
// Return対応する値
return typeof name = == "string" ? thisCache[name] : thisCache;
}
//保存されたデータを削除します
jQuery.removeData = function (elem, name) { / / #1042
var id = elem[expando],cache = jQuery.cache, thisCache =cache[id];
// 要素のデータの特定のセクションを削除する場合
if (name ) {
if (thisCache) {
// キャッシュ データのセクションを削除します
delete thisCache[name]
// すべてのデータを削除した場合は、要素のキャッシュを削除します
if (jQuery.isEmptyObject(thisCache) ) {
jQuery.removeData(elem);
}
}
// それ以外の場合は、要素のデータをすべて削除します
} else {
delete elem[jQuery.expando];
// データ キャッシュを完全に削除します
}
}
// オブジェクトが空かどうかを確認します
jQuery.isEmptyObject = function ( obj) {
// 要素の属性を調べ、属性が必要な場合にのみ false を返し、それ以外の場合は true を返します
for (var name in obj) {
return false;
}
return true;
}
// 関数であるかどうかを確認します
jQuery.isFunction = function (obj) {
var s = toString.call( obj);
return toString.call(obj) = == "[オブジェクト関数]";



次のスクリプトは、オブジェクト。

コードをコピー

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

// 数据操作
$("#msg").data("name", "Hello, world.");
alert($("#msg").data("name"));
$("#msg").removeData("name");
alert($("#msg").data("name"));