jQuery 2.0.3 源码分析 数据缓存

var aa1=$("#aaron");
    var aa2=$("#aaron");

    // 覆盖
    // aa1.data('a',1111); //结果2222222
    // aa2.data('a',2222); //结果2222222


    // console.log(aa1.data('a'))
    // console.log(aa2.data('a'))

    // 不覆盖
    $.data(aa1,"b","1111")
    $.data(aa2,"b","2222")

    console.log($.data(aa1,"b"))   //结果111111
    console.log($.data(aa2,"b"))   //结果222222


    // 分析
    //data()不会再dom element 书写出值而是在内存中，不像attr
    

    // 一：思考一个问题?
    // 设置$.data后移除remove()还是可以获取带值
    // 
    aa1.remove()
    aa2.remove()

    console.log($.data(aa1,"b"))   //结果111111
    console.log($.data(aa2,"b"))    //结果222222

    // 二：同样，这些问题也存在于event 对象中，因为事件处理器(handlers)也是用该方法来存储的
    if ( elem.nodeType ) {
        cache[ id ] = dataObject;     
        elem[ expando ] = id;
    } else {
        elem[ expando ] = dataObject;
    }

    // 实现解析
    function Data(){
      Object.defineProperty( this.cache = {}, 0 ,{
        get: function(){
          return {};
        }
      })
      this.expando = jQuery.expando + Math+randow();
    }
    // 解析
    // 接着把每个节点的dom[expando]的值都设为一个自增的变量id，保持全局唯一性。 
    // 这个id的值就作为cache的key用来关联DOM节点和数据。也就是说cache[id]就取到了这个节点上的所有缓存，即id就好比是打开一个房间(DOM节点)的钥匙。
    // 而每个元素的所有缓存都被放到了一个map映射里面，这样可以同时缓存多个数据。
    // 所以cache对象结构应该像下面这样
    var cache = {
      "uid1": { // DOM节点1缓存数据，
          "name1": value1,
          "name2": value2
      },
      "uid2": { // DOM节点2缓存数据，
          "name1": value1,
          "name2": value2
      }
      // ......
  };
  // 流程分析
  // 存储：1.一个数组结果2.了把不把数据与dom直接关联，所以会把数据存储到一个cache对象上，
  // 把unlock标记号，作为一个属性值 赋予$body节点
  // cache缓存对象中开辟一个新的空间用于存储foo数据，this.cache[ unlock ] = {};
  // 最后把foo数据挂到cache上,cache[ data ] = value;
  // 获取数据：从$body节点中获取到unlock标记，通过unlock在cache中取到对应的数据cache[ unlock ]
  


  // 那么jQuery.data() 与 .data()  有什么区别？
  // jQuery.data()
  jQuery.extend({
        acceptData: Data.accepts,
        hasData: function( elem ){},
       //直接调用 data_user.access 数据类的接口，传入的是elem整个jQuery对象
        data: function( elem, name, data ) {
            return data_user.access( elem, name, data );
        },
        ........
  // .data()
  jQuery.fn.extend({
    data: function( elem, name, data ) {
      return jQuery.access( this, function( value )){
        //区别在each方法了，处理的是每一个元素dom节点
        this.each(function() {
            
        }  
      }
    }
  },
  ........
  // 看jQuery.data(element,[key],[value])，每一个element都会有自己的一个{key:value}对象保存着数据，
  // 所以新建的对象就算有key相同它也不会覆盖原来存在的对象key所对应的value，因为新对象保存是是在另一个{key:value}对象中
  // $("div").data("a","aaaa") 它是把数据绑定每一个匹配div节点的元素上


  // 源码可以看出来，说到底，数据缓存就是在目标对象与缓存体间建立一对一的关系,整个Data类其实都是围绕着 thia.cache 内部的数据做 增删改查的操作

参考：https://www.cnblogs.com/aaronjs/p/3370176.html