jQuery技术

jQuery.Data源码

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

jQuery.Data源码,jQuery.data的是jQuery的数据缓存系统。它的主要作用就是为普通对象或者DOM元素添加数据。 1 内部存储原理 这个原理很简单,原本要添加在DOM元

正文

jQuery.data的是jQuery的数据缓存系统。它的主要作用就是为普通对象或者DOM元素添加数据。

1 内部存储原理

image

这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cache集合中。它们之间靠一个从1开始的数字键来联系着。这样DOM元素就不会像以前那么笨重了,更不会出现以前那种循环引用而引起的内存泄漏。现在DOM只需要保存好这个数字键值即可。这个属性值被保存在DOM元素的一个属性里,该属性名是由jQuery.expando生成的。

2 Data构造函数 Object.defineProperty( this.cache = {}, 0, { get: function() { return {}; } });

首先来看Object.defineProperty函数,它的作用为:将属性添加到对象,或修改现有属性的特性。那我们先来看下ECMAScript5中的属性。

2.1 ECMAScript5中的属性

ECMAScript5中有两种属性:数据属性和访问器属性。

2.1.1 数据属性:

数据属性包含一个数据值的位置,在这个位置可以读取和写入值。有4种特性用来限制其行为。

①[[configurable]]

能否通过delete删除属性,能否修改属性的特性,能否把属性改为访问器属性。默认为true。

var obj={name:"abc"}; Object.defineProperty(obj,"name",{ configurable:false }); console.log(obj.name); delete obj.name; console.log(obj.name); Object.defineProperty(obj,"name",{ configurable:true });

image

注意,一旦将 configurable 设为false,就再也设置不回去了。而且还会报错。

②[[enumerable]]

在for-in循环是否能获取到属性。默认为true。ECMAScript规定,由程序员定义的属性的该特性都为true。

③[[writable]]

能否修改属性的值。默认为true。

var obj={name:"abc"}; Object.defineProperty(obj,"name",{ writable:false }); console.log(obj.name); obj.name="111"; console.log(obj.name);

image

④[[value]]

属性值所在的地方。读取属性值的时候获取的就是它,写属性值的时候也是往这里写。

var obj={name:"abc"}; console.log(obj.name); Object.defineProperty(obj,"name",{ value:111 }); console.log(obj.name);

image

2.1.2访问器属性

访问器属性不包含实际的属性值,它包含两个函数(getter和setter)

①[[get]]

读取属性时调用的函数。默认为undefined

②[[set]]

写入属性时调用的函数。默认为undefined

var obj={}; Object.defineProperties(obj,{ name:{ get:function () { return obj["_name"]; }, set:function (name) { if(name != "C#"){ obj["_name"]=name; } } }, label:{ get:function () { return "你不能改变我!!!"; } } }); obj.name="JavaScript"; console.log(obj.name); obj.label="我偏要改变你!!!"; console.log(obj.label);

image

上面给cache的属性0,只给了get属性。所以不能为该属性赋值。只能获取。

this.expando = jQuery.expando + Math.random();

这个expando就是用来为DOM元素或者对象存储在cache中的键的。即它将作为DOM元素的一个属性被存储这。

b4722170-1292-4c0e-bb79-8665339ad935

红色画框内的属性名就是由上面的语句生成的,指明div1的属性存储在cache的1属性中。

Data.uid = 1;该属性表示cache的属性将从1开始自增。因为0已经被这个冻结的空JSON占用了,所以从1开始。我们下次再为某DOM元素添加属性时,它将被保存在cache的2属性中。 3 允许的添加属性的元素 Data.accepts = function( owner ) { return owner.nodeType ? owner.nodeType === 1 || owner.nodeType === 9 : true; };

这段代码写的非常干练。表示如果owner是DOM元素则只有ELEMENT_NODE和DOCUMENT_NODE两种元素能添加属性,如果owner是一个对象,则都可以添加属性。 4 原型属性 4.1 key: function( owner ) { if ( !Data.accepts( owner ) ) { return 0; }

如果owner不能被添加data,则返回cache的第0个元素。

unlock = owner[ this.expando ];

这里获取的就是

b5699b61-ea45-4a9a-b45c-ebd3727f28af

如果能从owner中找到这个属性,则说明以前为它添加过值,也就是说,它已经拥有了一个在cache中的key。

if ( !unlock ) { unlock = Data.uid++; try { descriptor[ this.expando ] = { value: unlock}; Object.defineProperties( owner, descriptor ); } catch ( e ) { descriptor[ this.expando ] = unlock; jQuery.extend( owner, descriptor ); } }

 

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

网友点评
5