jQuery data.js 1回で最終回
data.jsのメモを公開します！ 毎度おなじみ@ryuoneさんの記事も合わせてごらんください。 →jQuery attributes.js 読書会 2回目 (最終回)に参加しました。 ↑タイトルattributes.jsですがまとめはdata.jsです。 →data.js 読書会 1回目に参加しました。
jQueryのバージョンは1.6です。
(function( jQuery ) {
var rbrace = /^(?:\{.*\}|\[.*\])$/,
// brace -> 2つのものを固定する
// ハットマーク
// (?: ) 非キャプチャグループ
// .任意の一文字
// * 0回以上の繰り返し
// | or
// $ 後方参照
rmultiDash = /([a-z])([A-Z])/g;
// rmultiDashは1.6から追加
// ()はキャプチャグループ
// []は文字クラス
// [a-z] aからzの文字
// [A-Z] AからZの文字
// gフラグは複数回マッチ
// rmultiDash.exec("aaaaDDDbbWW")
// だと ["aD","a","D"]
// dataAttrで利用
// console.log("aAaA".replace(/([a-z])([A-Z])/g, "$1-$2"));
// 大文字にするの -> キャメライズ
// キャプチャグループは $numでいける
// a-Aa-A
jQuery.extend({
cache: {},
// Please use with caution
uuid: 0,
// Unique for each copy of jQuery on the page
// Non-digits removed to match rinlinejQuery
// jQuery.fn.jqueryはjQueryのバージョンを返す
// expando -> 拡張？
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
// The following elements throw uncatchable exceptions if you
// attempt to add expando properties to them.
noData: {
"embed": true,
// Ban all objects except for Flash (which handle expandos)
"object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
"applet": true
},
// データを保持しているか調べる返り値はBoolean
hasData: function( elem ) {
// elemがDOMノードであれば
// elem = jQuery.cache[ elem[jQuery.expando] ];
// elem = elem[ jQuery.expando ];
elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
// elemがtrueでありinsEmptyDataObjectがfalseである場合
// !isEmptyDataObject()の結果を返す (true)
return !!elem && !isEmptyDataObject( elem );
},
//dataのセット、呼び出し
data: function( elem, name, data, pvt /* Internal Use Only */ ) {
// jQuery.acceptDataは205行目で定義
// 引数がdataを利用できるのであればtrueを返す
// データを受け入れる機構がなければ何も返さない
if ( !jQuery.acceptData( elem ) ) {
return;
}
// 見やすくするために改行してます
var internalKey = jQuery.expando,
getByName = typeof name === "string",
thisCache,
// We have to handle DOM nodes and JS objects differently because IE6-7
// can't GC object references properly across the DOM-JS boundary
// nodeTypeプロパティはDOM
// ノードの種類によって番号を保持している
isNode = elem.nodeType,
// Only DOM nodes need the global jQuery cache; JS object data is
// attached directly to the object so GC can occur automatically
// elemがDOMノードであればjQuery.cache、DOMノードでなければelem
cache = isNode ? jQuery.cache : elem,
// Only defining an ID for JS objects if its cache already exists allows
// the code to shortcut on the same path as a DOM node with no cache
// elem[ jQuery.expando ] && jQuery.expandoはどちらもtrueなら最後に評価したjQuery.expandoを返す
id = isNode ? elem[ jQuery.expando ] : elem[ jQuery.expando ] && jQuery.expando;
// ここで定義された変数は
// internalKey // jQuery.expando
// getByName // 第2引数nameが文字列であるかどうかBoolean
// thisCache // 定義のみ
// isNode // elem.nodeType
// cache // jQuery.cacheもしくはelem (elemがDOMノードではない)
// id // elem[jQuery.expando] もしくは jQuery.expando
// Avoid doing any more work than we need to when trying to get data on an
// object that has no data at all
// idがfalseもしくは、
// 内部利用 (pvt)がtrueであり、idがtrueであり、cache[ id ][ internalKey ] がfalseである状態で、
// getByNameがtrue (第2引数nameが文字列) であり、data (第3引数)がundefinedであれば
// つまり、dataがないのに取ろうとした場合は何もしない
if ( (!id || (pvt && id && !cache[ id ][ internalKey ])) && getByName && data === undefined ) {
return;
}
if ( !id ) {
// ここに入るのはノードがdataを持っていないとき
// Only DOM nodes need a new unique ID for each element since their data
// ends up in the global cache
if ( isNode ) {
// elemがDOMノードであれば
// jQuery.uuidは呼ばれるたびに加算されるので、ページ上で同じ番号は存在しなーい
elem[ jQuery.expando ] = id = ++jQuery.uuid;
} else {
// DOMノードでなければidにのみ代入
id = jQuery.expando;
}
}
// キャッシュが無ければ
if ( !cache[ id ] ) {
cache[ id ] = {};
// TODO: This is a hack for 1.5 ONLY. Avoids exposing jQuery
// metadata on plain JS objects when the object is serialized using
// JSON.stringify
// jQuery.noopはcore.jsで定義 中身のは何も無いfunction
// isEmptyDataObject関数内で判断する為に定義する。←ryuoneさんの記事引用
// http://www.ryuone.com/diary/20110430.html
if ( !isNode ) {
cache[ id ].toJSON = jQuery.noop;
}
}
// An object can be passed to jQuery.data instead of a key/value pair; this gets
// shallow copied over onto the existing cache
// 第2引数がobjectかfunctionであれば
if ( typeof name === "object" || typeof name === "function" ) {
// 内部利用であれば
if ( pvt ) {
//cache[ id ][ internalKey ]にnameを追加
// cache[ id ][ internalKey ] = nameはダメ。
// 参照渡し
cache[ id ][ internalKey ] = jQuery.extend(cache[ id ][ internalKey ], name);
} else {
//cache[ id ]にnameを追加
cache[ id ] = jQuery.extend(cache[ id ], name);
}
}
thisCache = cache[ id ];
// Internal jQuery data is stored in a separate object inside the object's data
// cache in order to avoid key collisions between internal data and user-defined
// data
// 内部利用の場合
if ( pvt ) {
if ( !thisCache[ internalKey ] ) {
thisCache[ internalKey ] = {};
}
thisCache = thisCache[ internalKey ];
}
// 第3引数dataがあれば
if ( data !== undefined ) {
thisCache[ name ] = data;
}
// TODO: This is a hack for 1.5 ONLY. It will be removed in 1.6. Users should
// not attempt to inspect the internal events object using jQuery.data, as this
// internal data object is undocumented and subject to change.
// eventsプロパティを返す
if ( name === "events" && !thisCache[name] ) {
return thisCache[ internalKey ] && thisCache[ internalKey ].events;
}
// 第2引数 name が文字列であればthisCashe[name]を、そうでなければthisCacheを返す
return getByName ? thisCache[ name ] : thisCache;
},
removeData: function( elem, name, pvt /* Internal Use Only */ ) {
// jQuery.acceptDataは205行目で定義
// 引数がdataを利用できるのであればtrueを返す
// データを受け入れる機構がなければ何も返さない
if ( !jQuery.acceptData( elem ) ) {
return;
}
// 改行してます。
var internalKey = jQuery.expando,
isNode = elem.nodeType,
// See jQuery.data for more information
cache = isNode ? jQuery.cache : elem,
// See jQuery.data for more information
id = isNode ? elem[ jQuery.expando ] : jQuery.expando;
// If there is already no cache entry for this object, there is no
// purpose in continuing
// 無いので消し用がない。
if ( !cache[ id ] ) {
return;
}
if ( name ) {
var thisCache = pvt ? cache[ id ][ internalKey ] : cache[ id ];
if ( thisCache ) {
delete thisCache[ name ];
// If there is no data left in the cache, we want to continue
// and let the cache object itself get destroyed
if ( !isEmptyDataObject(thisCache) ) {
return;
}
}
}
// See jQuery.data for more information
if ( pvt ) {
delete cache[ id ][ internalKey ];
// Don't destroy the parent cache unless the internal data object
// had been the only thing left in it
if ( !isEmptyDataObject(cache[ id ]) ) {
return;
}
}
var internalCache = cache[ id ][ internalKey ];
// Browsers that fail expando deletion also refuse to delete expandos on
// the window, but it will allow it on all other JS objects; other browsers
// don't care
// jQuery.support.deleteExpando は support.js
// Boolean
// IE対策 後で詳しく
if ( jQuery.support.deleteExpando || cache != window ) {
delete cache[ id ];
} else {
cache[ id ] = null;
}
// We destroyed the entire user cache at once because it's faster than
// iterating through each key, but we need to continue to persist internal
// data if it existed
if ( internalCache ) {
cache[ id ] = {};
// TODO: This is a hack for 1.5 ONLY. Avoids exposing jQuery
// metadata on plain JS objects when the object is serialized using
// JSON.stringify
if ( !isNode ) {
cache[ id ].toJSON = jQuery.noop;
}
cache[ id ][ internalKey ] = internalCache;
// Otherwise, we need to eliminate the expando on the node to avoid
// false lookups in the cache for entries that no longer exist
} else if ( isNode ) {
// IE does not allow us to delete expando properties from nodes,
// nor does it have a removeAttribute function on Document nodes;
// we must handle all of these cases
if ( jQuery.support.deleteExpando ) {
delete elem[ jQuery.expando ];
} else if ( elem.removeAttribute ) {
elem.removeAttribute( jQuery.expando );
} else {
elem[ jQuery.expando ] = null;
}
}
},
// For internal use only.
// 内部利用の時のみ
// 第4引数pvtを追加する
_data: function( elem, name, data ) {
return jQuery.data( elem, name, data, true );
},
// A method for determining if a DOM node can handle the data expando
acceptData: function( elem ) {
// DOMノードであれば
if ( elem.nodeName ) {
// jQuery.noDataは18行目で定義
//noData: {
// "embed": true,
// // Ban all objects except for Flash (which handle expandos)
// "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
// "applet": true
//},
// nodeNameはDOM
var match = jQuery.noData[ elem.nodeName.toLowerCase() ];
// embedかobjectかappletで会った場合
if ( match ) {
// flash以外はfalseを返す
return !(match === true || elem.getAttribute("classid") !== match);
}
}
// elemがDOMノードで無い場合、上記処理に引っかからなかった場合はtrueを返す
return true;
}
});
jQuery.fn.extend({
data: function( key, value ) {
var data = null;
// keyがundefinedであれば
if ( typeof key === "undefined" ) {
//ここのthisはjQueryオブジェクト
if ( this.length ) {
// this[0]はDOMもしくは配列
// dataからはthisCacheが返ってくる
data = jQuery.data( this[0] );
// 要素ノードあれば
if ( this[0].nodeType === 1 ) {
var attr = this[0].attributes, name;
for ( var i = 0, l = attr.length; i < l; i++ ) {
name = attr[i].name;
// data- で始まる場合
// indexOfはインデックス番号を返す
if ( name.indexOf( "data-" ) === 0 ) {
// jQuery.camelCaseはcss.js 167行目
//
// camelCase: function( string ) {
// return string.replace( rdashAlpha, fcamelCase );
// }
// fcamelCaseは関数
// String.replaceは第２引数に関数を渡せる
// String.substringはindexAからindexB未満の文字を取り出す
// indexBが省略された場合最後の文字まで取り出す
name = jQuery.camelCase( name.substring(5) );
dataAttr( this[0], name, data[ name ] );
}
}
}
}
return data;
} else if ( typeof key === "object" ) {
return this.each(function() {
jQuery.data( this, key );
});
}
var parts = key.split(".");
parts[1] = parts[1] ? "." + parts[1] : "";
if ( value === undefined ) {
data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);
// Try to fetch any internally stored data first
if ( data === undefined && this.length ) {
data = jQuery.data( this[0], key );
// dataAttrは
// data === undefined && elem.nodeType === 1
// の場合のみ処理
data = dataAttr( this[0], key, data );
}
return data === undefined && parts[1] ?
this.data( parts[0] ) :
data;
} else {
return this.each(function() {
var $this = jQuery( this ),
args = [ parts[0], value ];
$this.triggerHandler( "setData" + parts[1] + "!", args );
jQuery.data( this, key, value );
$this.triggerHandler( "changeData" + parts[1] + "!", args );
});
}
},
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
});
// dataの値を変換してから登録
// data返す
function dataAttr( elem, key, data ) {
// dataAttr( this[0], name, data[ name ] );
// nameがグローバルになってる
// If nothing was found internally, try to fetch any
// data from the HTML5 data-* attribute
// 第3引数dataがundefinedであり、第1引数elemのノードタイプが要素ノードであれば
if ( data === undefined && elem.nodeType === 1 ) {
// これは驚愕！$1は1つめのキャプチャグループ
// $2は2つめのキャプチャグループ
name = "data-" + key.replace( rmultiDash, "$1-$2" ).toLowerCase();
data = elem.getAttribute( name );
if ( typeof data === "string" ) {
try {
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
!jQuery.isNaN( data ) ? parseFloat( data ) :
rbrace.test( data ) ? jQuery.parseJSON( data ) :
data;
} catch( e ) {}
// Make sure we set the data so it isn't changed later
jQuery.data( elem, key, data );
} else {
data = undefined;
}
}
return data;
}
// TODO: This is a hack for 1.5 ONLY to allow objects with a single toJSON
// property to be considered empty objects; this property always exists in
// order to make sure JSON.stringify does not expose internal metadata
// objがtoJSON以外のプロパティを持っていればfalseを返す
function isEmptyDataObject( obj ) {
for ( var name in obj ) {
if ( name !== "toJSON" ) {
return false;
}
}
return true;
}
})( jQuery );
いや！ほんと驚きですね！$numでキャプチャグループになるなんて！あれ俺だけ？ ちなみにString.replaceは第2引数にコールバック渡せます。 →replace