前面的第三小节留下了一个疑问: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: "慕课网二", });
这种情况下,肯定是被覆盖掉了。所以也就为什么通过实例的接口会覆盖数据了。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script src="https://img1.sycdn.imooc.com//down/541f6ff70001a0a500000000.js" type="text/javascript"></script> <title></title> </head> <body> <script type="text/javascript"> var body1 = $("body") var body2 = $("body") body1.data("bar", { myType: "慕课网一", count: 10 }); body2.data("bar", { myType: "慕课网二", count: 20 }); show( body1.data("bar") ) show('</br>') show(body2.data("bar") ) </script> </body> </html>