jQuery技术

jQuery 源码系列(八)data 缓存机制

字号+ 作者:H5之家 来源:H5之家 2017-03-05 11:03 我要评论( )

jQuery 源码系列(八)data 缓存机制,不打算介绍deferred,或者放到后面以后去介绍,因为我对于js的异步存在着恐惧,看了半天代码,发现,用挺好用的,一看源码

不打算介绍 deferred,或者放到后面以后去介绍,因为我对于 js 的异步存在着恐惧,看了半天代码,发现,用挺好用的,一看源码,全傻眼了。如果你感兴趣,这边 链接1 , 链接2 。


jQuery 源码系列(八)data 缓存机制


数据缓存

jQuery 最初以便捷 DOM 操作而流行,而 DOM 的本质其实就是对象,开发者们又习惯性的将一些标志直接扔给 DOM 本事,这会带来内存泄漏的问题。

比如对于斐波那契数列,方法可以有递归,有迭代,如果用 js 来写的话有一个比较有意思的方法,就是用缓存来实现:

function fib(n){ if(n == 1 || n == 0) return n; if(!fib[n-1]){ fib[n-1] = fib(n-1); } if(!fib[n-2]){ fib[n-2] = fib(n-2); } return fib[n-1] + fib[n-2]; }

因为 fib 不仅是函数,而且是对象,JS 中万物都是对象,所以才有了这种缓存的解决办法,这就是前面所说的,不过是在 DOM 上实现的。

当然这种方法也会有弊端,造成内存泄漏。现代的浏览器有自动回收内存的机制, 但当出现循环引用或闭包的时候,就会产生内存泄漏问题 。

就不深入去讨论了。

jQuery 的缓存机制

来看看 jQuery 中提高的数据缓存机制,有两个函数,分别是 jQuery.data() 和 jQuery.fn.data() ,可以看出来,一个是在 jQuery 对象上,一个是在 jQuery 生成的对象上。如果仔细阅读的话,你会发现 jQuery 中很多函数都有两个,原型上一个,jQuery 上一个。

jQuery.data() 有两种使用,一个用于绑定,一个用于查询:

jQuery.data( element, key, value ) jQuery.data( element, key )

上面的 element 参数表示 DOM 元素,比如一个例子如下:

jQuery.data(document.body, 'foo', 52); jQuery.data(document.body, 'bar', 'test'); jQuery.data(document.body, 'foo'); // 52 jQuery.data(document.body, 'bar'); // "test"

还有 .data() 方法, .data() ,这个函数就直接在 jquery 对象上实行绑定 data:

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

这边有一个小细节 数据缓存接口 :

var jq1 = $("body"); var jq2 = $("body"); jq1.data('a', 1); jq2.data('a', 2); jq1.data('a'); //2 jq2.data('a'); //2 // 数据被覆盖 $.data(jq1, 'b', 3); $.data(jq2, 'b', 4); $.data(jq1, 'b'); //3 $.data(jq2, 'b'); //4 // 不会被覆盖

可以看出来,通过这两种方法绑定的数据,其实是不一样的, 前者会被覆盖,而后者不会,说明在 cache 中肯定有某种神秘的力量将他们区别开来 。

源码

在 jQuery 中的源码,大致是这样的结构:

function Data(){...} Data.prototype = { cache: function(){...}, set: function(){...}, get: function(){...}, access: function(){...}, remove: function(){...}, hasData: function(){...} } var dataUser = new Data(); jQuery.extend({ data: function( elem, name, data ) { return dataUser.access( elem, name, data ); }, hasData: function( elem ) { return dataUser.hasData( elem ) || dataPriv.hasData( elem ); }, removeData: function( elem, name ) { dataUser.remove( elem, name ); } }) jQuery.fn.extend({ data: function(){ ... dataUser... ... }, removeData: function(){...} })

由于之前已经弄懂 jQuery 内部结构,对于这个一点也不惊讶,在 jQuery 和 jQuery 的原型上分别有一个 data 函数,用来处理各自的情况。

既然已经知道了 data 的基本结构,我们来各个击破,先来看一下 function Data() :

function Data() { // jQuery.expando 是 jQuery 的标识 this.expando = jQuery.expando + Data.uid++; } Data.uid = 1; jQuery.expando = ('3.1.1' + Math.random()).replace( /\D/g, "" ) // "3.1.10.9610206515567563".replace( /\D/g, "" ) // "31109610206515567563"

接着是 prototype :

Data.prototype = { // 建立一个 cache 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 ) ) { // 判断 owner 是一个合格者后 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; }, // set 函数就是为 dom 设置 key,value set: function( owner, data, value ) { var prop, cache = this.cache( owner ); if ( typeof data === "string" ) { cache[ jQuery.camelCase( data ) ] = value; // 处理 data 为这种情况: [ owner, { properties } ] } else { // Copy the properties one-by-one to the cache object for ( prop in data ) { cache[ jQuery.camelCase( prop ) ] = data[ prop ]; } } return 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 ) ]; }, // 用来访问,将 get、set 结合到一起,并对 underfined 判断 access: function( owner, key, value ) { if ( key === undefined || ( ( key && typeof key === "string" ) && value === undefined ) ) { return this.get( owner, key ); } this.set( owner, key, value ); return value !== undefined ? value : key; }, // 用于移除 cache remove: function( owner, key ) { var i, cache = owner[ this.expando ]; if ( cache === undefined ) { return; } if ( key !== undefined ) { // 支持删除数组格式的 key if ( jQuery.isArray( key ) ) { key = key.map( jQuery.camelCase ); } else { key = jQuery.camelCase( key ); // 为了保持一致,强行的构造了一个 数组 key = key in cache ? [ key ] : ( key.match( rnothtmlwhite ) || [] ); } i = key.length; // 删 while ( i-- ) { delete cache[ key[ i ] ]; } } // cache 为空的时候,删除整个缓存 if ( key === undefined || jQuery.isEmptyObject( cache ) ) { if ( owner.nodeType ) { owner[ this.expando ] = undefined; } else { delete owner[ this.expando ]; } } }, hasData: function( owner ) { var cache = owner[ this.expando ]; return cache !== undefined && !jQuery.isEmptyObject( cache ); } };

然后是 jQuery.data() :

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery常用API jQuery

    jQuery常用API jQuery

    2017-03-01 15:00

  • What’s New In jQuery 3 : 17 Added Features amp; How To Use T

    What’s New In jQuery 3 : 17 Added Features amp; How To Use T

    2017-02-11 18:01

  • jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记三:jQuery工厂剖析

    2017-01-18 17:03

  • jQuery实现字符串全部替换的方法

    jQuery实现字符串全部替换的方法

    2016-12-15 13:07

网友点评