4-6 实例方法的设计
本节编程练习不计算学习进度,请电脑登录imooc.com操作

实例方法的设计

前面的第三小节留下了一个疑问:jQuery.data() 与 .data()为什么会有区别?

jQuery的方法设计大都是多用的,可以根据传递参数的个数判断是set还是get处理,不仅如此jQuery还对参数的传递类型还抽出了一个处理的方法jQuery.access,我们可以传递字符串、数组、对象等等,根据这种类型自动分解成接口所有能接受的参数。

省略了部分,比如数据的过滤,HMLT5 data的处理之类,保留直接的处理,如下代码:

jQuery.fn.extend({
    data: function(key, value) {
      return access(this, function(value) {
        // 通过access解析出参数 value的值
      }, null, value, arguments.length > 1, null, true)
    })
}

通过access解析后的参数就能让data_user接口所接收,此时我们可以调用数据对象接口开始对数据进行存储设置了。

this.each(function() {
   var data = data_user.get( this, camelKey );
   data_user.set( this, camelKey, value );
});

因为jQuery可以是一个元素合集,所以内部需要通过each对每一个合集都遍历处理,

对数据的存储内部就是调用的data_user.get缓存类的接口。

get: function(owner, key) {
  var cache = this.cache[this.key(owner)];
  return key === undefined ?
    cache : cache[key];
}

通过get方法通过key去cache中取得之前的值,如果没有则新开辟一个空间用来存储之后的新值,

通过data_user.set去设置这个新的值:

set: function(owner, data, value) {
  var prop,
    unlock = this.key(owner),
    cache = this.cache[unlock];
  cache[data] = value;
  return cache;
}

取出cache中对应的存储空间,然后可见

cache[ data ] = value;

数据直接就是通过对象的键值对的方式存储在内存中的。

当我们重复同一个key的时候,其实是反复操作同一个cache缓存区下的同一个key

所以当下面:

cache[‘bar’] = {
     myType: "慕课网一",
});

cache[‘bar’] = {
     myType: "慕课网二",
});

这种情况下,肯定是被覆盖掉了。所以也就为什么通过实例的接口会覆盖数据了。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  6. <script src="https://img1.sycdn.imooc.com//down/541f6ff70001a0a500000000.js" type="text/javascript"></script>
  7. <title></title>
  8. </head>
  9. <body>
  10.  
  11.  
  12. <script type="text/javascript">
  13.  
  14. var body1 = $("body")
  15. var body2 = $("body")
  16.  
  17.  
  18. body1.data("bar", {
  19. myType: "慕课网一",
  20. count: 10
  21. });
  22.  
  23. body2.data("bar", {
  24. myType: "慕课网二",
  25. count: 20
  26. });
  27.  
  28. show( body1.data("bar") )
  29. show('</br>')
  30. show(body2.data("bar") )
  31.  
  32. </script>
  33. </body>
  34. </html>
下一节