JQuery data 接口是什么?

.data()

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

  根据jquery官网介绍,data给存储DOM关联的数据, 设置数据是对$选取的所有JQuery对象, 获取数据是对$选取的所有对象的第一个对象的存储的数据。

  设置语法格式 --- 设置单个数据 .data( key, value )  设置一组数据 .data( obj )

  获取语法格式 --- 获取单个数据 .data( key)  设置所有数据 .data()

例子:

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); //
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

为什么需要 data 接口?

  web前端JS编程不可避免地,需要频繁地与DOM对象打交道。 HTML标签负责文档的结构, JS负责文档的行为, CSS负责文档的样式, JS通过document.getElementById()等接口获取DOM对象, 除了操作DOM对象的样式和属性等,往往在行为逻辑上, 脚本需要记录与DOM对象相关的数据 或者 某种状态值, 如果在js中直接使用全局变量记录此值, 具有很大的缺点, 首先不能直观体现此数据与DOM对象的关系, 其次全局变量有可能会发生命名冲突。

  例如,一个进度条DOM对象, 需要记录进度百分比值, 可以将此数据使用data接口记录到DOM对象上。

data 接口代码分析- .data( key, value )  设置单个数据

1、 JQuery对象的原型fn函数集合,添加了data接口,此接口判断如果为设置数据, 即arguments.length>1, 表示具有两个参数, 则执行红色代码三行, 将需要设置的DOM对象和需要设置的key和value , 传入 JQuery对象的data接口。

JQuery对象的data接口又做了些什么?

jQuery.fn.extend({
data: function( key, value ) {
var i, name, data,
elem = this[0],
attrs = elem && elem.attributes; .....
return arguments.length > 1 ? // Sets one value
this.each(function() {
jQuery.data( this, key, value );
}) : // Gets one value
// Try to fetch any internally stored data first
elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : undefined;
},

2、 jQuery.data函数分析

调用internalData函数并返回此函数的返回值。

jQuery.extend({
cache: {},
......
data: function( elem, name, data ) {
return internalData( elem, name, data );
},

3、 internalData 函数分析

此函数的第四个入参pvt可以忽略,执行过程有下面几个关键点:

#1 对于DOM对象nodeType为 1, 则缓存cache被设置为JQuery.cache。 此缓存空间即为 每个DOM对象data数据存储空间。

#2  对于第一次使用data接口, 需要对DOM元素, 生成一个唯一的ID: id = deletedIds.pop() || jQuery.guid++;

#3  然后在缓存空间 JQuery.cache中, 按照ID为下表为此DOM元素分配一个子空间: cache[ id ] = {}

#4 将此DOM子空间记录为 thisCache = cache[ id ];

#5 为此DOM子空间再开辟明确的data子空间: thisCache.data = {}; 并将此data子空间记录为thisCache

#6 设置数据 : thisCache[ jQuery.camelCase( name ) ] = data;

function internalData( elem, name, data, pvt /* Internal Use Only */ ) {

............
var ret, thisCache,
internalKey = jQuery.expando, // We have to handle DOM nodes and JS objects differently because IE6-7
// can't GC object references properly across the DOM-JS boundary
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
cache = isNode ? jQuery.cache : elem,
...........
if ( !id ) {
// Only DOM nodes need a new unique ID for each element since their data
// ends up in the global cache
if ( isNode ) {
id = elem[ internalKey ] = deletedIds.pop() || jQuery.guid++;
} else {
id = internalKey;
}
} if ( !cache[ id ] ) {
// Avoid exposing jQuery metadata on plain JS objects when the object
// is serialized using JSON.stringify
cache[ id ] = isNode ? {} : { toJSON: jQuery.noop };
} ............
thisCache = cache[ id ]; // jQuery data() is stored in a separate object inside the object's internal data
// cache in order to avoid key collisions between internal data and user-defined
// data.
if ( !pvt ) {
if ( !thisCache.data ) {
thisCache.data = {};
} thisCache = thisCache.data;
} if ( data !== undefined ) {
thisCache[ jQuery.camelCase( name ) ] = data;
}
...............
}

data 接口代码分析- .data( key)  获取单个数据

1、此接口判断如果为获取数据, 即arguments.length>1为false, 表示具有一个参数, 则返回 下面函数调用返回的结果: dataAttr( elem, key, jQuery.data( elem, key ) )

dataAttr又做了些什么?

jQuery.fn.extend({
data: function( key, value ) {
var i, name, data,
elem = this[0],
attrs = elem && elem.attributes; .....
return arguments.length > 1 ? // Sets one value
this.each(function() {
jQuery.data( this, key, value );
}) : // Gets one value
// Try to fetch any internally stored data first
elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : undefined;
},

2、 dataAttr 分析

查看注释, 此函数为 data不存在的情况下, 查HTML中 data-开头的相同属性值, 此处可以不用分析。

下面还是分析下下面函数调用执行, jQuery.data( elem, key )
function dataAttr( elem, key, data ) {
// If nothing was found internally, try to fetch any
// data from the HTML5 data-* attribute
if ( data === undefined && elem.nodeType === 1 ) {

3、 jQuery.data( elem, key ) 获取单个数据

调用internalData函数并返回此函数的返回值。

我们下面分析 internalData函数第三个参数 data为空的情况。

jQuery.extend({
cache: {},
......
data: function( elem, name, data ) {
return internalData( elem, name, data );
},

4、 internalData 函数分析

此函数的第四个入参pvt可以忽略:

可以看到,对于获取单个数据情况, 还是从 JQuery.cache[DOM-ID].data中查找, 即下面这一句:

ret = thisCache[ name ];
function internalData( elem, name, data, pvt /* Internal Use Only */ ) {
...............
var ret, thisCache,
internalKey = jQuery.expando, // We have to handle DOM nodes and JS objects differently because IE6-7
// can't GC object references properly across the DOM-JS boundary
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
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
id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;

.................
thisCache = cache[ id ]; // jQuery data() is stored in a separate object inside the object's internal data
// cache in order to avoid key collisions between internal data and user-defined
// data.
if ( !pvt ) {
if ( !thisCache.data ) {
thisCache.data = {};
} thisCache = thisCache.data;
}
.................// Check for both converted-to-camel and non-converted data property names
// If a data property was specified
if ( typeof name === "string" ) { // First Try to find as-is property data
ret = thisCache[ name ]; // Test for null|undefined property data
if ( ret == null ) { // Try to find the camelCased property
ret = thisCache[ jQuery.camelCase( name ) ];
}
} else {
ret = thisCache;
} return ret;
}

JQuery data API实现代码分析的更多相关文章

  1. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  2. JQuery html API支持解析执行Javascript脚本功能实现-代码分析

    JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...

  3. jQuery源码解读 - 数据缓存系统:jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

  4. 转:jQuery.data

    原文地址:http://www.it165.net/pro/html/201404/11922.html 内存泄露 首先看看什么是内存泄露,这里直接拿来Aaron中的这部分来说明什么是内存泄露,内存泄 ...

  5. 完整全面的Java资源库(包括构建、操作、代码分析、编译器、数据库、社区等等)

    构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化 ...

  6. jQuery源码解读-事件分析

    最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...

  7. AngularJS PhoneCat代码分析

    转载自:http://www.tuicool.com/articles/ym6Jfen AngularJS 官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些 ...

  8. jquery datatables api (转)

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  9. Hive metastore整体代码分析及详解

    从上一篇对Hive metastore表结构的简要分析中,我再根据数据设计的实体对象,再进行整个代码结构的总结.那么我们先打开metadata的目录,其目录结构: 可以看到,整个hivemeta的目录 ...

随机推荐

  1. ACM BUYING FEED

    BUYING FEED 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 Farmer John needs to travel to town to pick up ...

  2. 快速搭建IE测试环境(Virtualbox+ievms)

    IE下的测试 作为一个有追求的程序员,应该尽可能的远离Windows系统.不论从专业开发者的角度,还是仅仅作为最终用户从使用体验上来说,Windows都可以算是垃圾中的战斗机: 没有shell . 响 ...

  3. 20145330《Java程序设计》第五次实验报告

    20145330<Java程序设计>第五次实验报告 实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统 4.结队伙伴 ...

  4. 20145330Java程序设计第三次实验

    20145330<Java程序设计>第三次实验报告 实验三 敏捷开发与XP实践 实验内容 1.使用git上传代码 2.使用git实现代码开发实践 3.实现代码的重载 实验步骤 使用git上 ...

  5. 兼容所有浏览器的设为首页收藏本站js代码

    大家发现传统的收藏本站按钮在360浏览器下面没有效果了,但是360浏览器用户群却非常之大.所以我们在网上找到一个兼容所有浏览器的收藏本站解决方案,具体功能如下: 设为首页 和 收藏本站js代码 兼容I ...

  6. Html Mailto标签详细使用方法

    Html中mailto标签是一个非常实用的贴近用户体验的标签,大多情况下人们都在这样使用 <a href="mailto:example@phplamp.com">ex ...

  7. Jquery超简单遮罩层实现代码

    看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...

  8. getPos,offsetTop

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 状态压缩DP

    K - Necklace Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:327680KB     ...

  10. 怎么配置Java环境变量?

    右键计算机 -> 属性 -> 高级系统设置 -> 环境变量,   在系统环境变量添加以下三条变量. 1. PATH, 配置JDK命令文件的位置. 输入“%JAVA_HOME%\bin ...