`
hongtoushizi
  • 浏览: 376542 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

读jQuery之六(缓存数据)

阅读更多

读jQuery之六(缓存数据)

 

 

很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如

1
2
3
4
<div data="some data">Test</div>
<script>
    div.getAttribute('data'); // some data
</script>

给页面中div添加了自定义属性“data”及值“some data”。后续JS代码中使用getAttribute获取。

 

jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段

1
2
3
4
5
6
7
8
9
jQuery.extend({
    cache: {},
 
    // Please use with caution
    uuid: 0,
     
    ...
     
});

即给jQuery添加了静态字段/方法,有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分别介绍


jQuery.cache 空对象,用来缓存。它的结构较复杂。


jQuery.uuid 自增唯一的数字。


jQuery.expando 字符串,使用Math.random生成,去掉了非数字字符。它作为HTMLElement或JS对象的属性名。

1
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),


jQuery.noData JS对象,对于指定的HTMLElement禁用data方法。如embed、applet。


jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性,则返回true。

1
2
3
4
5
6
7
<div>aa</div>
<script>
    var div = document.getElementsByTagName('div')[0];
    $.hasData(div); // false
    $.data(div, 'name','jack');
    $.hasData(div); // true
</script>

 

jQuery.acceptData 用来判断该元素是否能接受数据,返回true或false。在jQuery.data中使用。

 

jQuery.data 这是提供给客户端程序员使用的方法,它同时是setter/getter。

  1. 传一个参数,返回附加在指定元素的所有数据,即thisCachejQuery.data(el); // thisCache
  2. 传二个参数,返回指定的属性值jQuery.data(el, 'name'); 
  3. 传三个参数,设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
  4. 传四个参数,第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data,为避免人为的不小心重写在这个版本中加入的

 

jQuery.removeData 删除数据。

上面是jQuery数据缓存模块的整体概述,下面详细说下jQuery.data方法。jQuery.data为两种对象提供缓存:JS对象和HTMLElement

1
2
3
4
5
6
7
8
9
10
11
12
// 为JS对象提供缓存
var myObj = {};
$.data(myObj, 'name', 'jack');
$.data(myObj, 'name'); // jack
 
// 为HTMLElement提供缓存
<div id="xx"></div>
<script>
    var el = document.getElementById('xx');
    $.data(el, 'name', 'jack');
    $.data(el, 'name'); // jack
</script>

 

内部实现上也是有区别的,


1,为JS对象提供缓存时,直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性(类似于jQuery16101803968874529044),属性值也是个JS对象。举例说明

1
2
3
var myObj = {};
$.data(myObj, 'name', 'jack');
console.log(myObj);

myObj的结构如下

1
2
3
4
5
myObj = {
    jQuery16101803968874529044 : {
        name : 'jack'
    }
}


“jQuery16101803968874529044”这个字符串在data内部命名为id(注意并非HTMLElement元素的id),它实际就是jQuery.expando。上面已经提到它是在jQuery.js引入到页面后随机生成的。

 

2,为HTMLElement提供缓存时,却不会直接保存在HTMLElement上。而是保存在jQuery.cache上。cache为jQuery.cache。此时先给HTMLElement添加属性(类似于jQuery16101803968874529044),属性值为数字(1,2,3递增)。即只将一些数字保存在了HTMLElement上,不会直接将数据置入。这是因为IE老版本中可能会存在内存泄露危险。而HTMLElement如何与jQuery.cache建立联系呢? 还是id。刚刚提到属性值数字就是id。举例说明

1
2
3
4
5
6
7
<div id="xx"></div>
<script>
    var el = document.getElementById('xx');
    $.data(el, 'name', 'jack');
    console.log(el[jQuery.expando]); // 1
    console.log(jQuery.cache); // {1 : {name:'jack'}}
</script>

el 上添加了属性jQuery.expando,值为id,这个id是从1开始递增的。而id又作为jQuery.cache的属性(key)。这样就HTMLElement就与jQuery.cache建立了联系。如图





不知注意到没有,jQuery.data还有第四个参数pvt,这个参数只在jQuery._data中使用。

1
2
3
4
// For internal use only.
_data: function( elem, name, data ) {
    return jQuery.data( elem, name, data, true );
},

jQuery._data从命名上就指定它是私有的,使用jQuery的客户端程序员不应该去调用该方法。jQuery的API文档上也不会公开它。


jQuery的数据缓存模块从1.2.3到1.6.1几乎每个版本都在变。jQuery._data的提出就是为了避免客户端程序员覆盖/重写了默写模块。如jQuery事件模块中事件handler等就使用jQuery.data存储,如果重写了该模块。那么事件模块将瘫痪。因此特意添加了pvt参数及jQuery._data方法。


但如果你刻意要破坏,那么还是可以做的。如下

1
2
3
4
5
6
7
8
9
10
11
12
<div id="xx">Test</div>
<script>
    $('#xx').click(function(){
        alert('click');
    });
     
    // 语句1
    $.data($('#xx')[0], 'events', '', true);
     
    // 语句2
    //$._data($('#xx')[0], 'events', '');
</script>

点击div[id=xx]将不会触发点击事件。

 

整个jQuery.data设置(set)数据缓存的过程就是如此,理解的这个。取数据(get)的过程就好理解了。不重复。

最后,我会给zChian.js添加zChain.data/removeData方法,因为是“迷你版”,仅给HTMLElement添加数据缓存。请注意。

 

相关:

http://msdn.microsoft.com/en-us/library/Bb250448

http://bugs.jquery.com/ticket/6807

zChain-0.6.js

 

 

转载:  http://www.cnblogs.com/snandy/archive/2011/06/10/2077298.html

 

分享到:
评论

相关推荐

    读jQuery之六 缓存数据功能介绍

    ### jQuery缓存数据功能知识点 jQuery作为一个流行的JavaScript库,提供了强大的数据缓存功能,允许开发者在不同的对象上存储和管理数据。本文将详细介绍jQuery的缓存数据功能,包括其方法的使用、实现原理及应用...

    jQuery源码

    jQuery的核心部分之一是其选择器引擎Sizzle,它实现了高性能的CSS选择器解析。Sizzle使用正则表达式和递归下降解析技术,能够高效地匹配DOM元素。 9. **兼容性处理** 为了兼容不同的浏览器,jQuery做了大量的...

    jquery教程 文档 手册

    jQuery的AJAX功能使得异步数据交互变得简单,`.ajax()`是最核心的方法。例如,发送一个GET请求: ```javascript $.ajax({ url: "api/data", type: "GET", success: function(response) { console.log(response);...

    75款常用的jquery特效前端网页代码

    1. **jQuery基础**:jQuery的核心是其简洁的API,它使得JavaScript代码更加简洁易读。通过选择器选取DOM元素,然后对这些元素执行操作,如添加/删除类、改变属性或内容,以及响应用户事件。 2. **DOM操作**:jQuery...

    jquery自动补全

    **jQuery自动补全**是一种基于JavaScript库jQuery的插件功能,它允许用户在输入框中输入文本时,根据已有的数据集提供实时的下拉建议,以帮助用户快速完成输入。这种技术通常用于搜索框、表单字段或者任何需要动态...

    jquery开发入门整理(所需要了解的)

    ### 进行jQuery缓存使用说明介绍讲析 在频繁访问DOM元素的情况下,直接通过选择器获取元素会导致性能下降。为了避免这种情况,jQuery提倡使用缓存选择结果的方法。具体做法是将选择器的结果赋值给一个变量,然后对该...

    jquery 实现省市区三级联动

    在实际开发中,还需要考虑错误处理、数据缓存、用户体验优化等因素。例如,可以预先加载部分常用数据,减少首次选择时的延迟;也可以使用Promise或async/await处理异步操作,使代码更易读。 总的来说,jQuery实现...

    jquery与ajax调用,有代码 , 有说明,使ajax调用简单

    在Web开发中,jQuery与Ajax的结合使用极大地简化了异步数据交互的过程,使得前端可以高效地与服务器进行通信,而无需刷新整个页面。本教程将详细介绍如何利用jQuery实现Ajax调用,并通过具体的代码示例帮助你理解和...

    JQuery

    jQuery,一个轻量级、高性能的JavaScript库,自2006年发布以来,已经成为Web开发领域中最受欢迎的库之一。它的核心理念是简化HTML文档遍历、事件处理、动画制作以及Ajax交互,极大地提高了前端开发效率。"JQuery很...

    jquery ajax 实现省市县下拉列表联动

    在实际应用中,可能还需要考虑一些其他因素,如缓存已加载的数据、处理网络延迟、错误处理等。此外,随着前端技术的发展,现代Web应用更多地采用JSON作为数据格式,而非XML。因此,你可能会将XML替换为JSON文件,并...

    jquery的设计流程参考

    jQuery的核心设计理念是“Write Less, Do More”,它通过封装复杂的DOM操作、事件处理和动画效果,使JavaScript代码更加简洁易读。其主要目标是提供一个统一的、高效的跨浏览器解决方案,简化HTML文档遍历、事件处理...

    从零开始学习jQuery

    jQuery通过提供简洁的API,使得JavaScript代码更加简洁易读,从而极大地提高了开发效率。 二、jQuery的选择器 jQuery的选择器类似于CSS选择器,用于选取HTML文档中的元素。基本选择器包括:ID选择器(#id)、类选择...

    jQuery的起点教程

    jQuery的核心功能之一是选择DOM元素。它支持CSS1至CSS3的选择器,如`#id`(ID选择器)、`.class`(类选择器)、`tag`(标签选择器)以及更复杂的组合选择器,如`$("div.special")`选择所有class为'special'的div元素...

    jquery分页

    在网页开发中,分页是一种常见的用户...在实际开发中,还需要考虑错误处理、数据缓存、SEO优化等因素。确保分页功能既对用户友好,又对搜索引擎可读。同时,合理的设计和优化能够提升系统的响应速度,提高用户体验。

    jQuery开发技术详解

    例如,避免过多的DOM操作,合理使用缓存,以及适时地使用事件代理,都是jQuery开发中的最佳实践。 ### 10. 实战案例分析 通过实际的网页项目,我们可以学习如何将以上知识点应用于实际开发中,解决具体问题,提升...

    jquery做的星级评分可以利用AJAX来操作

    它的语法简洁易读,使得开发者能够快速地编写高效代码。 AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在我们的星级...

    jQuery Autocomplete自动完成插件

    jQuery Autocomplete 自动完成插件是一项广泛应用于Web开发中的jQuery插件,它能够帮助开发者快速地为文本输入框增加自动完成的功能。该插件通过向服务器发送异步请求,根据用户输入的内容提供一个下拉列表,该列表...

    jquery移动开发

    六、jQuery Mobile与其他技术的结合 jQuery Mobile可以与PhoneGap/Cordova结合,创建原生应用程序。同时,它也可以与Backbone.js、AngularJS等MV*框架一起工作,实现更复杂的业务逻辑和数据管理。 总之,jQuery...

Global site tag (gtag.js) - Google Analytics