jQuery技术

jQuery.Data源码(2)

字号+ 作者:H5之家 来源:H5之家 2017-07-09 09:02 我要评论( )

如果找不到,则说明是第一次为owner添加属性,则要创建一个key。这个key就是在Data的uid的基础上加1.Data的uid是一个静态属性。这样就能记录前一个元素的key是多少,这次的key又应该是多少。try块里面为owner(即DO

如果找不到,则说明是第一次为owner添加属性,则要创建一个key。这个key就是在Data的uid的基础上加1.Data的uid是一个静态属性。这样就能记录前一个元素的key是多少,这次的key又应该是多少。try块里面为owner(即DOM元素或者对象)添加它在cache中的索引。这里会出现兼容性的问题。在Android系统<4时会出现安全问题,因此jQuery使用extend静态方法将descriptor扩展到owner上面。

if ( !this.cache[ unlock ] ) { this.cache[ unlock ] = {}; }

这里为owner对应在cache中的key赋值一个Object。

这个的key方法的作用就是为DOM元素创建属性,为cache中对应的key赋值(空对象)。

image

key返回的是这个unlock,即owner对象在cache中对应的key。 4.2 set: function( owner, data, value ) { unlock = this.key( owner ), cache = this.cache[ unlock ];第一句不用解释,第二句或者cachekey值。以上图所示,则这里的cache目前还是{},因为在此之前还没有为div1添加过属性。 if ( typeof data === "string" ) { cache[ data ] = value;

我们下面的代码走的就是这里:

$("#div1").data("name","div1");

但是我们有很多属性要设置的时候,

$("#div1").data({name:"div1",from:"0",to:"100"});

jQuery的处理方式是这样的:

// Handle: [ owner, { properties } ] args } else { ( jQuery.isEmptyObject( cache ) ) { jQuery.extend( this.cache[ unlock ], data ); // Otherwise, copy the properties one-by-one to the cache object } else { for ( prop in data ) { cache[ prop ] = data[ prop ]; } } }

其实这里个人以为不用再判断了,因为extend里面也是用for循环将data的属性扩展到cache中的。

4.3 get: function( owner, key ) { var cache = this.cache[ this.key( owner ) ]; return key === undefined ? cache : cache[ key ];

获取属性,代码非常简单。如果key不存在则返回cache对象。

4.4 access: function( owner, key, value ) {

这里对get和set方法的统一访问。 4.5 remove: function( owner, key ) { unlock = this.key( owner ), cache = this.cache[ unlock ];

获取owner的在cache中的数据对象,this.key返回的是owner在cache中的key。

if ( key === undefined ) { this.cache[ unlock ] = {};

如果不指定要删除那个属性的话,jQuery会删除owner所有的数据属性。

否则再判断key是不是数组,

if ( jQuery.isArray( key ) ) { name = key.concat( key.map( jQuery.camelCase ) ); } 是数组的话,将key数组和用key的每一项转驼峰后的数组合并,即: $("#div1").remove(["one_key","two_key"]);

经过上面的代码,key为变为["one_key","two_key","oneKey","twoKey"]。后面会将这4个属性都删除掉。

那如果key不是数组: camel = jQuery.camelCase( key ); if ( key in cache ) { name = [ key, camel ]; } else { name = camel; name = name in cache ? [ name ] : ( name.match( core_rnotwhite ) || [] ); }

同样先输转驼峰,然后判断key是否存在,不存在则判断key的驼峰形式是否存在,后面的正则表达式用于去除驼峰形式前后的空格。

15beac62-c2e7-453d-8cf6-a4814dbb9854

当这些情况过滤完之后,进行删除操作:

i = name.length; while ( i-- ) { delete cache[ name[ i ] ]; }

在while循环里面使用delete进行删除。 4.6 hasData: function( owner ) {

cache中是否拥有woner的数据对象。 4.7 discard: function( owner ) {

删除cache中的woner的数据对象。

image

5 创建两个私有的cache data_user = new Data(); data_priv = new Data();所以,我们在jQuery的外面不能直接拿到这个cache。因为它是jQuery的局部变量。data_user供开发人员使用,data_priv供jQuery内部使用。 6 创建对外接口(工具方法和原型方法)

由于Data构造器是jQuery私有的,我们在外面不能访问到,所以前面的那些方法,我们也不能直接访问,jQuery在这里,给我们提供了一些接口。来操作data_user,为DOM元素和Object进行属性操作。工具方法非常简单只是对data_user方法的封装而已。我们主要看下原型方法。

jQuery.fn.extend({ data: function( key, value ) {

设值和取值都会进入上面的方法。

这里有这样一个思想,如果是设值的时候,则给选集中所有的选项设值,如果获取值的时候,只获取第一个选项的值。 if ( key === undefined ) { if ( this.length ) { data = data_user.get( elem ); if ( elem.nodeType === 1 && !data_priv.get( elem, "hasDataAttrs" ) ) { attrs = elem.attributes; for ( ; i < attrs.length; i++ ) { name = attrs[ i ].name; if ( name.indexOf( "data-" ) === 0 ) { name = jQuery.camelCase( name.slice(5) ); dataAttr( elem, name, data[ name ] ); } } data_priv.set( elem, "hasDataAttrs", true ); } } return data; }

在第3行,已经取到cache中elem对应的属性了,下面jQuery由将elem的attributes里的所有属性添加到elem的 。

hasDataAttrs属性是我们自己添加,因为下面这段代码只需要执行一次即可。代码第6行,获取elem所有的属性;

a7b4953a-c10f-4d0a-a507-6542fe126ee4

这个NamedNodeMap类型,我们平时很少直接用它,它和NodeList,HTMLCollection一样都是“动态”的。NamedNodeMap集合中的每一项都是Attr类型,Attr对象有3个属性:name,value和specified。

在下面的for循环里面,就检测这个name属性中是否含有"data-"前缀。有的话就去掉它,并且将剩余部分转为驼峰形式。

 

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

相关文章
  • CoffeeScript jQuery的

    CoffeeScript jQuery的

    2017-07-08 08:09

  • JavaScript 框架比较

    JavaScript 框架比较

    2017-07-07 17:03

  • jQuery javascript 细节原理剖析

    jQuery javascript 细节原理剖析

    2017-07-07 12:02

  • 14条改善jQuery代码的技巧

    14条改善jQuery代码的技巧

    2017-07-07 11:02

网友点评
'