`
zhangyaochun
  • 浏览: 2563050 次
  • 性别: 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
分享到:
评论

相关推荐

    jQuery技术内幕:深入解析jQuery架构设计与实现原理

    资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

    《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和...

    jquery中data的用法案例

    jquery中data的案例,获取同一标签内的数据,以及移除标签内的数据

    深入浅出Jquery

    非常详细的jquery文档,其全称是锋利的jquery

    jQuery源码解读

    jQuery源码解读,jQuery源码解读

    深入PHP与JQUERY开发

    《深入PHP与jQuery开发》是PHP与jQuery结合的经典之作。书中首先概括了jQuery和PHP的经典特性,随后详细阐述了如何高效地结合两种技术为应用构建高度交互的用户界面。《深入PHP与jQuery开发》共讲述4部分内容,分别...

    深入PHP与jQuery开发

    深入PHP与jQuery开发是PHP 与jQuery 结合的经典之作。《深入PHP与jQuery开发》首先概括了jQuery 和PHP 的经典特性,随后详细阐述了如何高效地结合两种技术为应用构建高度交互的用户界面。《深入PHP与jQuery开发》共...

    JQUERY技术内幕:深入解析QUERY架构设计与实现原理 完整版 共两个包

    深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...

    jQuery数据列表新增或修改删除代码

    jQuery数据列表新增或修改删除代码

    jQuery读取json数据

    jQuery去读取json的数据非常非常方面而且大大提高了用户界面的可读性,提高了读取的效率,比读xml文件更加方面

    Jquery数据绑定分页源码

    Jquery数据绑定分页源码

    JavaScript and jQuery for Data Analysis and Visualization azw3

    JavaScript and jQuery for Data Analysis and Visualization 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除

    table 绑定数据 jquery 分页

    table 绑定数据 jquery 分页 table 绑定数据 jquery 分页 table 绑定数据 jquery 分页

    Jquery数据分页

    程序员必备:Jquery数据分页,实现数据库中的数据的分页。这种分页技术可以实现无刷新更新页面。用起来方便灵活。用户体验较好。

    jquery的data函数

    NULL 博文链接:https://hyj1254.iteye.com/blog/586984

    解读jQuery插件开发流程_.docx

    解读jQuery插件开发流程_.docx

    用jquery解析JSON数据的方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里...

Global site tag (gtag.js) - Google Analytics