浅析jQuery 3.0中的Data


Posted in Javascript onJune 14, 2016

jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery。这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20)。一路走来,颇为不易。

一、Data浅析

jQuery 3.0 中的 Data 是内部使用的,定义为一个“类”。一共用它创建了两个对象,dataPriv 和 dataUser。Data 有 1 个对象属性(expando)和类属性(uid),有 6 个方法,如下

浅析jQuery 3.0中的Data

下面分别解读

1、Data.uid

这是一个从 1 开始用来自增的数字。

2、expando

由 jQuery.expando 和 uid 组合而成,它用来作为元素(如DOM元素)的key,是唯一的。jQuery.expando 的生成如下

jQuery.expando = "jQuery" + ( version + Math.random() ).replace( /\D/g, "" )

即 'jQuery' + (版本号 + 随机数),然后把非数字的都去掉,比如

"jQuery" + ".." + . == "jQuery..."

去掉非数字变为

jQuery30009423638425146147"

jQuery 3.0 内部变量 dataPriv 和 dataUser 生成 expando 如下

jQuery 300 024727210109188635 1
jQuery 300 024727210109188635 2

第三部分是随机数,每次刷新都会变,其它部分的不变。

3、cache

cache 方法会给 owner 上绑定一个对象作为存储,owner 必须满足 acceptData 的,cache 会以 this.expando 为线索 key。
owner 有两种,一中是DOM元素(nodeType为1和9),另一种则是普通的JS对象。诸如 文本节点(nodeType=3)、注释节点(nodeType=8) 一律不添加。

acceptData 的定义如下

var acceptData = function( owner ) {
  // Accepts only:
  // - Node
  //  - Node.ELEMENT_NODE
  //  - Node.DOCUMENT_NODE
  // - Object
  //  - Any
  /* jshint -W018 */
  return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );
};

acceptData 在 3.0 中一共有 3 处使用,分别为

Data 类的 cache 方法,为私有方法不提供给程序员使用。$.cleanData 方法,清空元素关联的所有缓存数据。为公开方法,但很少使用。该方法被用在 empty、html、replaceWith、remove 方法中。$().trigger 方法,主动派发事件,为公开方法。

如果是 DOM 元素,则直接使用点操作符赋值,如果是普通 JS 对象则使用 ES5 的 Object.defineProperty 方法,这也是 jQuery 3.0 会使用新 API 的体现。

// If it is a node unlikely to be stringify-ed or looped over
// use plain assignment
if ( owner.nodeType ) {
  owner[ this.expando ] = value;
// Otherwise secure it in a non-enumerable property
// configurable must be true to allow the property to be
// deleted when data is removed
} else {
  Object.defineProperty( owner, this.expando, {
    value: value,
    configurable: true
  } );
}

转换成如下代码

elem['jQuery3000247272101091886351'] = dataObj;
var person = {name: 'John', age: 30};
Object.defineProperty( person, 'jQuery3000247272101091886351', {
  value: dataObj,
  configurable: true
} );

cache 方法就是这样,传入 owner,只有第一次会 set ,返回 value (一个空对象),之后取到 value 后直接返回。

源码

cache: function( owner ) {
  // Check if the owner object already has a cache
  var value = owner[ this.expando ];
  // If not, create one
  if ( !value ) {
    value = {};
    // We can accept data for non-element nodes in modern browsers,
    // but we should not, see #8335.
    // Always return an empty object.
    if ( acceptData( owner ) ) {
      // If it is a node unlikely to be stringify-ed or looped over
      // use plain assignment
      if ( owner.nodeType ) {
        owner[ this.expando ] = value;
      // Otherwise secure it in a non-enumerable property
      // configurable must be true to allow the property to be
      // deleted when data is removed
      } else {
        Object.defineProperty( owner, this.expando, {
          value: value,
          configurable: true
        } );
      }
    }
  }
  return value;
},

4、set

上面的 cache 方法为 owner 建立一个以 expando 为 key 的空对象,后面所有的方法都围绕这个空对象来展开,这个空对象就被称为缓存对象,后面所有的数据都添加到它上面。set 就是给这个对象来添砖加瓦,set 每次都是先取回 cache ,再给其添加新的属性及数据。如果 data 是字符串,则以它为 key 添加,如果是对象,则遍历它添加。只需注意一点,横线连接符内部会被转成驼峰格式,这也是为了对 H5 data-xxx 的兼容 。

源码

set: function( owner, data, value ) {
  var prop,
    cache = this.cache( owner );
  // Handle: [ owner, key, value ] args
  // Always use camelCase key (gh-2257)
  if ( typeof data === "string" ) {
    cache[ jQuery.camelCase( data ) ] = value;
  // Handle: [ owner, { properties } ] args
  } else {
    // Copy the properties one-by-one to the cache object
    for ( prop in data ) {
      cache[ jQuery.camelCase( prop ) ] = data[ prop ];
    }
  }
  return cache;
},

5、get

get 简单至极,传 key 则从 cache 上取回该 key 的值,无则取回整个 cache。

源码

get: function( owner, key ) {
  return key === undefined ?
    this.cache( owner ) :
    // Always use camelCase key (gh-2257)
    owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];
},

6、access

这个方法即时 getter,也是 setter,如此而已。

getter 条件

key 是 undefined,这时取整个 cachekey 是字符串且value 是undefined,这是取指定 key 的值

setter 条件

owner、key、value 这三个参数都传

源码

access: function( owner, key, value ) {
  // In cases where either:
  //
  //  1. No key was specified
  //  2. A string key was specified, but no value provided
  //
  // Take the "read" path and allow the get method to determine
  // which value to return, respectively either:
  //
  //  1. The entire cache object
  //  2. The data stored at the key
  //
  if ( key === undefined ||
      ( ( key && typeof key === "string" ) && value === undefined ) ) {
    return this.get( owner, key );
  }
  // When the key is not a string, or both a key and value
  // are specified, set or extend (existing objects) with either:
  //
  //  1. An object of properties
  //  2. A key and value
  //
  this.set( owner, key, value );
  // Since the "set" path can have two possible entry points
  // return the expected data based on which path was taken[*]
  return value !== undefined ? value : key;
},

7、remove

清空绑定元素(owner)上面的缓存对象,依然需要先通过 this.expando 拿到 cache,如果传了 key 则删除指定key的值(key自身也被删除)。
当然 jQuery API 保持已有的方便性,key 可以为一个数组,这样可以批量删除多个 key。如果 key 没传则将整个 cache 删除,这里区分了 DOM 和普通 JS 对象,DOM 对象使用undefined赋值,JS 对象则使用 delete。

源码

remove: function( owner, key ) {
  var i,
    cache = owner[ this.expando ];
  if ( cache === undefined ) {
    return;
  }
  if ( key !== undefined ) {
    // Support array or space separated string of keys
    if ( jQuery.isArray( key ) ) {
      // If key is an array of keys...
      // We always set camelCase keys, so remove that.
      key = key.map( jQuery.camelCase );
    } else {
      key = jQuery.camelCase( key );
      // If a key with the spaces exists, use it.
      // Otherwise, create an array by matching non-whitespace
      key = key in cache ?
        [ key ] :
        ( key.match( rnotwhite ) || [] );
    }
    i = key.length;
    while ( i-- ) {
      delete cache[ key[ i ] ];
    }
  }
  // Remove the expando if there's no more data
  if ( key === undefined || jQuery.isEmptyObject( cache ) ) {
    // Support: Chrome <=35 - 45
    // Webkit & Blink performance suffers when deleting properties
    // from DOM nodes, so set to undefined instead
    // https://bugs.chromium.org/p/chromium/issues/detail?id=378607 (bug restricted)
    if ( owner.nodeType ) {
      owner[ this.expando ] = undefined;
    } else {
      delete owner[ this.expando ];
    }
  }
}, 

8、hasData

用来判断 owner 上是否有缓存数据,返回 true 或 false。

源码

hasData: function( owner ) {
  var cache = owner[ this.expando ];
  return cache !== undefined && !jQuery.isEmptyObject( cache );
}

二、Data在jQuery内部的使用

以上解读完了 Data 的所有方法,上面也提到 Data 类是在 jQuery 内部使用的,一共创建了它的两个对象:dataPriv 和 dataUser。

这两个对象在 3.0.0 中有着明确的分工,dataPriv 可以猜测到是 “data” 和 “private” 两个单词的组合后简写。即 dataPriv 是私有的用来服务 jQuery 内部方法,dataUser 用来服务那些公开给用户使用的方法。

下面看下这两个对象分布在哪些模块中使用。

浅析jQuery 3.0中的Data

完整版点击展开可查看

dataPriv
  公共
    $.hasData
    $.cleanData
    cloneCopyEvent
  队列
    $().queue
    $()._queueHooks
    $().promise
  动画
    $().animate
    $().stop
    $().finish
    showHide
  事件
    $.event.add
    $.event.remove
    $.event.dispatch
    $.event.trigger
  其它
    setGlobalEval
    domManip
    defaultPrefilter
    $().toggleClass
dataUser
  公共
    $.hasData
    $.cleanData
    cloneCopyEvent
  数据缓存
    $.data
    $.removeData
    $().data
    $().removeData
  其它
    dataAttr

以上可以看到,除了“公共”,DataPriv 用在了 jQuery 的 队列、动画、事件等模块;dataUser 用在了数据缓存及dataAttr模块。

“公共” 是指这三个方法内都用到了 dataPriv 和 dataUser

$.hasData(elem)

用来判断 elem 上是否绑定了相关的数据缓存,返回 true 和false,只有 dataPriv 和 dataUser 上都没有才返回 false

源码

hasData: function( elem ) {
return dataUser.hasData( elem ) || dataPriv.hasData( elem );
},

$.cleanData(elems)

清空 elem 上绑定的所有数据缓存,理所当然的需要同时清空 dataPriv 和 dataUser 上的。
注意:虽然这个方法在公开暴露在了 $ 上, 但官网API上却没有该方法的介绍。另使用不当会造成严重后果,比如绑定了事件后(.on),调用该方法,绑定的事件将全部失效。因为会清空 dataPriv 内的所有数据。

cloneCopyEvent(src, dest)

这是一个内部方法,$.clone 会使用到它。克隆元素时除了会克隆node节点外,绑定在node上的数据也会被克隆过去。比如

var cloneNode = $.clone(elem);

把 elem 克隆给 cloneNode,此时 elem 上添加的事件 cloneNode 上也会有。

三、1.x.x 和 2.x.x 的比较

jQuery 1.x 系列 和 2.x 系列的版本对 数据缓存模块的实现差异还是很大的。大家可以对比我11年的这篇文章

1. 缓存的数据结构

1.x (直到1.11.2) 缓存都是存储在 jQuery.cache 上的,2.x(包括3.x) 则使用了一个内部类 Data 做缓存,其主要用到了两个对象 dataPriv 和 dataUser。很明显 2.x 做的更好,它所有的缓存数据都是私有的,不会存在被误写的风险,而 1.x 的 jQuery.cache 是公开的,如果被误写(比如某个同学想当然的给$上添加一个cache对象)后果不堪设想。

2. jQuery._data

看到这个下划线就知道是私有的(约定式),在 1.x 中是仅在内部使用的,不提供给开发者。以 1.11.2 示例、这个方法被事件模块、队列模块、动画模块、setGlobalEval、cloneCopyEvent、fixCloneNodeIssues、domManip、showHide、defaultPrefilter、toggleClass 使用。3.x 则使用 dataPriv 和 dataUser 替代,大家可以对比看看。

(2/3).x 相比 1.x 明显更优,dataPriv 和 dataUser 是真正的私有的(封装的更好,更安全),比起 1.x 约定式的私有 jQuery._data。虽然 3.0.0 还保守的兼容了 jQuery._data,相信过不了多久的后续版本就会剔除。

浅析jQuery 3.0中的Data

3. 重构

1.x 以 $._data 为中心,以它来辅助实现其它 API, (2/3).x 以 dataPriv/dataUser 为中心来实现。(2/3).x 将代码重构后提取出了 Data 类,更加清晰。

以上所述是小编给大家介绍的jQuery 3.0中的Data的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
树结构之JavaScript
Jan 24 Javascript
js实现图片懒加载效果
Jul 17 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
深入了解JavaScript 防抖和节流
Sep 12 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 #Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 #Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 #Javascript
jQuery实现手机自定义弹出输入框
Jun 13 #Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 #Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 #Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 #Javascript
You might like
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
五年级英语教学反思
2014/01/31 职场文书
党员公开承诺书范文
2014/03/25 职场文书
合作协议书
2014/04/23 职场文书
社会工作专业求职信
2014/07/15 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
python如何将mat文件转为png
2022/07/15 Python