• jQuery数据缓存data(name, value)详解及实现


    一、 jQuery数据缓存的作用

    jQuery数据缓存的作用在中文API中是这样描述的:“用于在一个元素上存取数据而避免了循环引用的风险”。如何理解这句话呢,看看我下面的举例,不知道合不合适,如果你有更好的例子可以告诉我。

    (1) 存在循环引用风险的例子(注意getDataByName(name)方法中的for in语句):

      <a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Tom</a><br/>
      <a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Mike</a>
    
      <script type="text/javascript">
        var userInfo = [
          {
              "name": "Tom",
              "age": 21,
              "phone": "020-12345678"
          }, 
          {
              "name": "Mike",
              "age": 23,
              "phone": "020-87654321"
          }
        ];
    
        function getDataByName(name){
          for (var i in userInfo){
            if (userInfo[i].name == name){
              return userInfo[i];
              break;
            }
          }
        }
    
      function showInfoByName(name){
        var info = getDataByName(name);
        alert('name:' + info.name + '
    ' + 'age:' + info.age + '
    ' + 'phone:' + info.phone);
      }
      </script>

    (2) 优化循环引用风险的例子(本例子其实与jQuery缓存实现原理差不多了,本例子重点在于改写了userInfo这个JSON结构,使name与对象key直接对应):

    <a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Tom</a><br/>
    <a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Mike</a>
    
    <script type="text/javascript">
      var userInfo = {
          "Tom": {
                    "name": "Tom",
                    "age": 21,
                    "phone": "020-12345678"
                  },
          "Mike": {
                    "name": "Mike",
                    "age": 23,
                    "phone": "020-87654321"
                  }
          };
    
      function showInfoByName(name){
          var info = userInfo[name];
          alert('name:' + info.name + '
    ' + 'age:' + info.age + '
    ' + 'phone:' + info.phone);
      }

    二、简单实现jQuery设置数据缓存方法

    jQuery数据缓存的实现其实是很简单的,下面我来实现jQuery设置数据缓存方法,我让代码尽量的简单,这有助于你更容易了解data的实现原理。函数与测试代码如下:

    <div id="div1">div1</div><br/>
    <div id="div2">div2</div>
    <script type="text/javascript">
    //cache对象结构像这样{"uuid1":{"name1":value1,"name2":value2},"uuid2":{"name1":value1,"name2":value2}},每个uuid对应一个elem缓存数据,每个缓存对象是可以由多个name/value对组成的,而value是可以是任何数据类型的,比如可以像这样在elem下存一个JSON片段:$(elem).data('JSON':{"name":"Tom","age":23})
    var cache = {};
    //expando作为elem一个新加属性,为了防止与用户自己定义的产生冲突,这里采用可变后缀
    var expando = 'jQuery' + new Date().getTime();
    var uuid = 0;
    
    function data(elem, name, data){
        //至少保证要有elem和name两个参数才能进行取缓存或设置缓存操作
        if (elem && name){
            //尝试取elem标签expando属性
            var id = elem[expando];
    
            if (data){
                //设置缓存数据
                if (!id){ 
                  id = elem[expando] = ++uuid;
                }
                console.log(id);
                //如果cache中id键对象不存在(即这个elem没有设置过数据缓存),先创建一个空对象
                if (!cache[id]) {
                  cache[id] = {};
                  cache[id][name] = data;
                }
            }else{
                //获取缓存数据
                if (!id) {
                    return 'Not set cache!';
                }else{
                    return cache[id][name];
                }
            }
        }
    }
    
    var div = document.getElementById('div1');
    data(div, "tagName", "div");
    data(div, "ID", "div1");
    alert(data(div, "tagName")); //div
    alert(data(div, "ID")); //div1
    
    var div2 = document.getElementById('div2');
    alert(data(div2, "tagName")); //Not set cache!
    </script>

    三、使用jQuery数据缓存注意事项

    (1)因为jQuery缓存对象是全局的,在AJAX应用中,由于页面刷新很少,这个对象将一直存在,随着你对data的不断操作,很有可能因为使用不当,使得这个对象不断变大,最终影响程序性能。所以我们要及时清理这个对象,jQuery也提供了相应方法:removeData(name),name就是你当初设置data值时使用的name参数。

    另外,根据我对jQuery代码的了解,发现下面几种情况不需要手动清除数据缓存:

    <1> 对elem执行remove()操作,jQuery会清除对象可能存在的缓存。jQuery相关源代码参考:

    remove:function(selector){
        if (!selector || jQuery.filter(selector, [this]).length) {
            // Prevent memory leaks
            jQuery("*", this).add([this]).each(function(){
                jQuery.event.remove(this);
                jQuery.removeData(this);
            });
            if (this.parentNode) {
                this.parentNode.removeChild(this);
            }
        }
    }

    <2> 对elem执行empty()操作,如果当前elem子元素存在数据缓存,jQuery也会清除子对象可能存在的数据缓存,因为jQuery的empty()实现其实是循环调用remove()删除子元素。jQuery相关源代码参考:

    empty:function(){
        // Remove element nodes and prevent memory leaks
        jQuery(this).children().remove();
        // Remove any remaining nodes
        while (this.firstChild) 
            this.removeChild(this.firstChild);
    }

    2、jQuery复制节点clone()方法不会复制data缓存,准确说jQuery不会在全局缓存对象中分配一个新节点存放新复制elem缓存。jQuery在clone()中把可能存在的缓存指向属性(elem的expando属性)替换成空。如果直接把这个属性复制,就会导致原先和新复制的elem都指向一个数据缓存,中间的互操作都将会影响到两个elem的缓存变量。以下jQuery代码就是把expando属性删除(jQuery1.3.2,较早版本不是这样处理,显然新版本的这个方法性能更好)。

    jQuery.clean([html.replace(/ jQueryd+="(?:d+|null)"/g, "").replace(/^s*/, "")])[0];

    把数据缓存一起复制有时候也是很有用的,比如在拖动操作中,我们点击源目标elem节点就会复制出一个半透明的elem副本开始拖动,并把data缓存复制到拖动层中,等到拖动结束,我们就可能取到当前拖动的elem相关信息。现在jQuery方法没有给我们提供这样的处理,怎么办法。第一个办法是改写jQuery代码,这个方法显然很傻,很不科学。正确做法是复制源目标的data,把这些data都重新设置到复制出来的elem中,这样在执行data(name, value)方法时,jQuery会在全局缓存对象中为我们开辟新空间。实现代码如下:

    if (typeof($.data(currentElement)) == 'number') {
        var elemData = $.cache[$.data(currentElement)];
        for (var k in elemData){
            dragingDiv.data(k, elemData[k]);
        }
    }

    在上面代码中,$.data(elem,name,data)包含三个参数,如果只有一个elem参数,这个方法返回它的缓存key(即uuid),利用这个key就可以得到整个缓存对象,然后把对象的数据都复制到新的对象。

    作者:WebFlash
    出处:http://webflash.cnblogs.com 

    工作并不只是为了那点工资,而是为了创造一份属于自己的事业
  • 相关阅读:
    多线程访问成员变量与局部变量
    Could not resolve placeholder 解决方案
    instanceof, isinstance,isAssignableFrom的区别
    YYYY-mm-dd HH:MM:SS
    整合Spring Data JPA与Spring MVC: 分页和排序
    dubbo配置文件xml校验报错
    安装eclipse插件时出现问题
    Windows上搭建hadoop开发环境
    jquery validate 在ajax提交表单下的验证方法
    HDU 1698 Just a Hook(线段树区间替换)
  • 原文地址:https://www.cnblogs.com/zouer/p/4239745.html
Copyright © 2020-2023  润新知