4-7 静态接口设计
本节编程练习不计算学习进度,请电脑登录imooc.com操作

静态接口设计

通过源码可见,静态方法是直接操作数据类的 data_user.access 方法

jQuery.extend({
    data: function(elem, name, data) {
      return data_user.access(elem, name, data)
    }

静态方法data的实现不像attr操作直接把数据作为属性捆绑到元素节点上,如果为DOM Element 附加数据;DOM Element 也是一种 Object ,但 IE6、IE7 对直接附加在 DOM Element 上的对象的垃圾回收存在问题;因此我们将这些数据存放在全局缓存(我们称之为“globalCache”)中,即 “globalCache” 包含了多个 DOM Element 的 “cache”,并在 DOM Element 上添加一个属性,存放 “cache” 对应的 uid。

最后可见:

1:jQuery.data(element,[key],[value]),每一个element都会有自己的一个{key:value}对象保存着数据,所以新建的对象就算有key相同它也不会覆盖原来存在的对象key所对应的value,因为新对象保存是是在另一个{key:value}对象中

2:$("div").data("a","aaaa") 它是把数据绑定每一个匹配div节点的元素上

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

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <script src="http://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. $.data(body1, "bar", '慕课网一');
  19. $.data(body2, "bar", '慕课网二');
  20.  
  21. show( $.data(body1, "bar") )
  22. show( $.data(body2, "bar") )
  23.  
  24.  
  25. </script>
  26. </body>
  27. </html>
下一节