jquery data

小灰灰 2022-08-21 01:29 14阅读 0赞

jquery data是一个数据缓存系统，通过key和value借助html dom进行缓存数据

1.方法有data,removeData和hasdata

//$(select).data(key,obj) obj为任意对象
    $("body").data("name","lucy"); //在body上缓存数据
    $("body").data("age",34);
    
    //$(select).data(key) 通过key在选择器上获取缓存数据
    console.log($("body").data("name") + "已经" +  $("body").data("age") + "岁了")
    
    //$.hasData(ele) 某个dom节点是否有缓存数据
    console.log($.hasData(document.getElementsByTagName("body")[0]));
    
    //$(select).removeData([key]) 通过key在选择器上删除数据
    $("body").removeData("name"); //单独key删除数据
    console.log("name ? " + $("body").data("name")); //name ? undefine
    
    $("body").data("name","lili"); 
    console.log($("body").data("name") + "已经" +  $("body").data("age") + "岁了");
    
    $("body").removeData(); //没有提供key，删除该节点上所有的数据
    
    console.log("name ? " + $("body").data("name") + " age ? " +  $("body").data("age")); //name ? undefined age ? undefined
    
    $("body").data("name","mem").data("age",35); 
    console.log($("body").data("name") + "已经" +  $("body").data("age") + "岁了");
    
    $("body").removeData("name age");  //参数为数组，间隔为空格
    
    console.log("name ? " + $("body").data("name") + " age ? " +  $("body").data("age")); //name ? undefined age ? undefined

2.原理

jq data通过建一个cache = ｛｝缓存对象，随机生成一个唯一的id作为key，再将整个cache附在dom节点上进行缓存数据，简单代码实现下原理如下：

var cache = cache || {
       /** * uuid唯一标识 */
       id : jQuery.expando;
       /** * 设置数据 */
       set : function(ele,key,value){
          var cache = ele[this.id];//判断该dom节点上是不是有缓存数据
          if(!value){ //没有缓存数据
              cache = {} ; //新建一个缓存json
          }
          cache[key] = value ;   //缓存数据
          ele[this.id] = cache;  //将缓存对象赋到dom节点上
       },
    
        /** * 获取数据 */
       get : function(ele,key){
          var cache = ele[this.id];//判断该dom节点上是不是有缓存数据
          if(cache) return cache[key];
       },
    
       /** * 删除数据 */
       remove : function(ele,key){
    
        var cache = ele[id];
        if(cache === undefined ) return ; //dom节点上没有该缓存对象，直接返回
        if(key === undefined || $.isEmptyObject( cache ) ) delete ele[this.id]; //没有传key或者缓存对象是空直接删除缓存
    
         // 支持数组或者是以空格间隔开的字符串
        if ( $.isArray( key ) ) { 
            name = key.concat( key.map( $.camelCase ) );//将key如my_name的格式转化成驼峰结构myName
        } else {
            camel = $.camelCase( key ); //转化驼峰结构
            if ( key in cache ) { //如果只是单个key
                name = [ key, camel ]; //转化成驼峰结构
            } else { //空格间隔开的字符串，转化成数组
                name = camel;
                name = name in cache ?
                    [ name ] : ( name.match( rnotwhite ) || [] );
            }
        }
    
        i = name.length; //最终key转化成数组
    
        while ( i-- ) { //删除
            delete cache[ name[ i ] ];
        }
       },
    
       /** * dom中是否有缓存数据，如果有缓存数据，是不是有某个key的值 */
       has : function(ele,key){
         var cache = ele[id];
         if(cache === undefined ) return false ;
    
         if(key === undefined){ //没有传key直接判断dom节点是否有缓存对象
            return true ;
         }else{ //有传key判断缓存对是否有key值
           return cache[key] ? true : false ;
         }
       }
    } 
    };

简单的实现jq的缓存系统原理，代码有些不合理，有些代码是直接从源代码里面贴的

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关关于jquery data()如何存值

天在js权威指南第19章看到一句话, 说 jQuery的数据框架没有将元素数据当作元素属性来存储,但它确实需要给元素添加一个特殊的属性用来与数据关联. 但jQuery究竟...

迷南。/ 2024年04月17日 06:08/ 0 赞/ 49 阅读

相关 JQuery.Ajax()的data参数类型

假如现在有这样一个[表单][Link 1]，是添加元素用的。 <form id="addForm" action="UserAdd.action" type="post">

小灰灰/ 2024年03月30日 13:15/ 0 赞/ 74 阅读

相关 JQuery.Ajax()的data参数类型分析

![7eeb89b3f40960049ae668ce1f772e31.jpeg][] 假如现在有这样一个表单，是添加元素用的。 <form id="addForm" act

╰半橙微兮°/ 2024年03月26日 15:28/ 0 赞/ 68 阅读

相关 JQuery中自定义data-*的使用

向元素附加数据，然后取回该数据： $("btn1").click(function(){ $("div").data("greeting", "Hell

Bertha 。/ 2022年09月23日 11:00/ 0 赞/ 201 阅读

相关 jquery easyui datagrid data format

概要 jQuery EasyUI是一个基于jquery的集成了各种用户界面的框架,使用easyui我们不需要写太多javascript代

Bertha 。/ 2022年08月24日 11:47/ 0 赞/ 225 阅读

相关 jquery data

jquery data是一个数据缓存系统，通过key和value借助html dom进行缓存数据 1.方法有data,removeData和hasdata //$(

小灰灰/ 2022年08月21日 01:29/ 0 赞/ 15 阅读

相关 JQuery.Ajax()的data参数类型

[JQuery.Ajax()的data参数类型][JQuery.Ajax_data] 2017年9月14日：补充JQuery.Ajax()的数据类型本文以前提到

港控/mmm°/ 2022年05月30日 05:13/ 0 赞/ 188 阅读

相关 jquery 获取data-* 属性值

`data-`自定义数据属性 > HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或

男娘i/ 2022年05月23日 00:41/ 0 赞/ 585 阅读

相关 jQuery 数据缓存 data()

本篇文章给大家介绍本人最常用到的jQuery方法之一 $(select).data(key,value) ——这是jQuery提供的数据缓存方法。与之对应的方法是 $(se

今天药忘吃喽~/ 2022年05月14日 13:22/ 0 赞/ 121 阅读

相关 jquery ajax的data参数

data 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value

桃扇骨/ 2021年06月24日 13:59/ 0 赞/ 425 阅读