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 个方法，如下
下面分别解读
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 的兼容 。
源码