`
zhangyaochun
  • 浏览: 2620425 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

深入解读jquery的数据存储相关(data)序3

阅读更多

前言

 

上一篇:

 

深入解读jquery的数据存储相关(data)序2

 

 

上上一篇:

 

 

深入解读jquery的数据存储相关(data)开篇

 

 

正文

 

 

本文关注一下jQuery1.4版本:

 

主要的变化:

 

1、增加了一个noData的对象:对特定的这3个标签不添加expando属性,当时觉得因为会抛错!

 

noData:{
       "embed":true,
       "object":true,
       "applet":true
}

 

   带来的影响就是:

 

//多了一个变量,但是利用率就one
var emptyObject = {};  

jQuery.extend({
      data:function(elem,name,data){
              //增加了对elem的判断
             if(elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()]){
                   //如果是指定的3个标签就返回了
                   return;
             }  

            elem = elem == window ? windowData : elem;
            
             //下面逻辑细节也有部分优化
              var id = elem[expando],
                  cache = jQuery.cache,
                  thisCache;
              //处理特殊情况,没有传递name
              if(!name && !id){
                  return null;
              }
              //id的计算目的都是保证唯一
              if(!id){
                 id = ++uuid
              }

              //判断name参数的类型
              if(typeof name === "object"){
                    elem[expando] = id;
                    thisCache = cache[id] = jQuery.extend(true,{},name);
              }else if(cache[id]){
                    thisCache = cache[id];
              }else if(typeof data === "undefined"){
                    thisCache = emptyObject;
              }else{
                    thisCache = cache[id] = {};
              }   

               if(data !== undefined){
                   elem[expando] = id;
                   thisCache[name] = data;
              }

               return typeof name === "string" ? thisCache[name] : thisCache;



      }

});
 

   看看fn里面的变换:

 

 

jQuery.fn.extend({

        data:function(key,value){
               
                //增加了对key参数的判断
                if(typeof key === "undefined"  &&  this.length){
                     return jQuery.data(this[0]);
                }else if(typeof key === "object"){
                    //增加了处理object类型的支持,所有嘛each一下
                    return this.each(function(){
                             jQuery.data(this,key);
                     });
                }
        }

});
 

removeData的变化:

 

 

removeData:function(elem,name){
        //加了一层判断
        if(elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase]){
               return;
        }

        elem = elem == window ? windowData : elem;

        var id = elem[expando],
              cache = jQuery.cache,     //变化点1
              thisCache = cache[id];     //变化点2

        if(name){
              if(thisCache){
                      delete thisCache[name];

                      //如果空对象了,再次调用removeData
                      if(jQuery.isEmptyObject(thisCache)){
                             jQuery.removeData(elem);
                      }
               }
        }
        
}
 

 

 

使用方法:

 

 

<div id="out1"></div>
 

 

$('#out1').data({'job':'fe','name':'zhangyaochun_new'});
 

 


 

 

总结

 

  • 人性化地支持了key的原来单一的string类型
  • 特定的3个标签不处理数据存储
  • 作用域链优化:将频繁出现的jQuery.cache变量化cache,而且增加了一个变量thisCache 

 

 

 

1
1
分享到:
评论

相关推荐

    jQuery1.7.1_API中文手册

    本手册旨在对jQuery1.7.1的API进行深入解读,帮助开发者更好地理解和应用这一工具。 #### 二、获取jQuery对象:构建核心 ##### 1. $() 方法:一切的起点 - **参数类型**:`$()`方法接受多种类型的参数,包括...

    Jquery1.7使用以及讲解

    通过`.data()`方法存储的数据现在会直接存储在DOM元素上,而不是在jQuery对象内部,这减少了内存占用,提高了访问速度。 ```javascript $(element).data(key, value); ``` ### 4. `$.ajax()` 更新 在jQuery 1.7中...

    jquery 1.8 api

    2. `.data()`: 这个方法现在更加智能,能够正确处理DOM元素上的数据存储。它可以自动将字符串转换为数字、布尔值等,同时对复杂数据类型(如对象)的存储和检索也更为精确。 3. `.delegate()`, `.live()`, `....

    jQuery教程14个实用的jQuery技巧

    `data()`函数是jQuery提供的一种非常方便的方式来存储和检索数据。相比于传统的HTML属性如`alt`等,使用`data()`更加安全和灵活。 - **设置数据**: ```javascript $('selector').data('key', 'value to be ...

    Jquery 源代码分析

    1. **缓存机制**:jQuery使用`data()`和`cache`对象存储元素的附加数据,减少不必要的DOM查询。 2. **DOM操作的优化**:jQuery尽可能减少DOM操作,例如通过创建文档片段批量添加元素,提高性能。 七、结论 通过对...

    jQuery 源碼解讀

    jQuery对象可以通过`.data(key, value)`存储关联数据,方便在后续操作中使用。jQuery的插件机制允许用户扩展其功能,`.extend()`方法用于合并对象,实现自定义功能的叠加。 8. **工具函数**: jQuery提供了一系列...

    jquery集合1.2至1.8版本

    本集合包含从1.2至1.8版本的jQuery库,以及相关的API说明文档,旨在帮助开发者深入理解和应用jQuery。** ### 1. jQuery 版本演变 - **jQuery 1.2**: 引入了`.live()`方法,支持事件委托,提高了性能。还增加了对...

    jQuery 1.6 中文API

    `$.data()`在1.6中进行了优化,能更好地处理复杂数据存储。它可以将数据与DOM元素关联,对于存储自定义的用户数据非常有用。同时,它会尝试将字符串转换为适当的JavaScript类型,提高了数据读取的准确性。 4. **...

    jQuery1.6中文API

    此外,`data()`方法用于存储和检索与元素关联的数据。 **4. 事件处理** jQuery的事件处理包括`click()`, `mouseover()`, `mouseout()`等,可以方便地绑定和解绑事件。`on()`和`off()`是更通用的事件绑定和解绑方法...

    Jquery1.4.4中文帮助文档

    3. 新增API:例如,`.data()` 方法现在可以直接操作元素的自定义数据属性,增强了数据存储的便利性。 4. 错误处理:对错误处理机制进行了改进,提供了更好的错误报告和异常处理,帮助开发者定位问题。 三、实际...

    jQuery_1.4中文文档(PDF版).pdf

    1. 避免DOM操作:减少不必要的DOM操作,使用$(“#id”).data()存储和检索数据,而不是直接修改DOM属性。 2. 使用$(document).ready():确保DOM加载完毕后再执行脚本,提高页面加载速度。 3. 少用全局变量:过多的...

    data-integration-services:这是一个综合性的大数据分析平台,数据的采集、存储、清洗、指标分析

    数据集成服务(data-integration-services)是一个综合性的大数据分析平台,其核心目标是处理从各种来源获取的数据,通过一套完整的工作流程实现数据的价值挖掘。在这个平台上,数据生命周期中的关键环节包括数据采集...

    jquery照片画廊过度效果.rar

    5. 数据管理:为了跟踪当前显示的图片,可以使用jQuery的`.data()`方法存储状态信息,或者利用JavaScript数组管理图片索引。 三、实例分析:jiaoben464 在提供的压缩文件“jiaoben464”中,很可能包含了一个示例...

    jquery 1.5更新的中文说明

    同时,`.data()`方法的改进使得数据存储更加安全和可靠。 总的来说,jQuery 1.5是一次重要的升级,它在性能、易用性和功能上都有显著的提升。对于开发者来说,理解并掌握这些更新将有助于提高开发效率,创造更高...

    jQuery.1.4.Plugin.Development.Beginner's.Guide.pdf

    这些可以通过jQuery的`data`方法存储在DOM元素上: ```javascript $.fn.myPlugin = function(options) { var settings = $.extend({}, options); return this.each(function() { var $this = $(this); $this....

    finance-data:投资方面的一些金融数据记录

    在这个名为"finance-data"的压缩包中,我们可能找到了一个与金融数据记录相关的项目。下面将详细探讨HTML在金融数据展示中的应用以及可能包含在"finance-data-master"文件夹内的资源。 HTML是创建网页的基础语言,...

    088 HTML大数据综合分析平台模板_大屏幕展屏(html源码).rar

    本文将深入探讨与这个主题相关的多个知识点。 首先,我们关注的是HTML,这是一种超文本标记语言,是构建网页内容的基础。HTML源码定义了网页的结构,包括标题、段落、图像等元素。在大数据分析平台中,HTML用于创建...

    jQuery自定义组件(导入组件)

    在这一段给定的文件信息中,我们可以看到关于如何使用jQuery来创建和管理自定义导入组件的详细说明。这一部分的内容主要涉及了以下几个知识点: 1. jQuery自定义组件的概念与创建 2. jQuery插件开发的基本原则 3. ...

    Jquery 焦点图 用于图片展示效果代码

    4. **使用Jquery data函数**:文章中提到Jquery的data函数,此函数用于将数据与DOM元素关联。在这里,可以通过data函数来存储每个图片元素的额外信息,如图片索引、图片地址等。这样做的好处是可以避免使用冗余的...

    AjaxChart

    AjaxChart是一种基于Ajax...这种技术在现代Web开发中广泛应用于数据分析、监控界面、报表系统等场景,提高了用户对复杂数据的解读效率。通过熟练掌握Ajax和XML的使用,开发者能够创建出更加灵活、高效的Web应用程序。

Global site tag (gtag.js) - Google Analytics