window.onload = function() {
// 测试
var demo = document.getElementById("demo");
// 写入缓存
data(demo, "myName", "hcy");
console.log(data(demo, "myName")); // hcy
data(demo, "myBlog", "http://www.cnblogs.com/cyStyle");
console.log(data(demo, "myBlog")); //
// 删除DOM元素的某个缓存值
removeData(demo, "myBlog");
console.log(data(demo, "myBlog")); // undefined
console.log(data(demo, "myName")); // hcy
console.log(demo[expando]); // 1
// 删除DOM元素
removeData(demo);
console.log(demo[expando]); // undefined
};
firefox下例子结果截图：
对于上述例子实现jQuery的简单缓存系统：先给该DOM元素添加一个随机生成的属性expando，这个属性用来存放访问缓存数据的id值，就好比DOM元素都有一把开启缓存保险箱的钥匙，只要有了钥匙就可以随时开启缓存保险箱。 将本来存放到DOM元素中的数据都转到了缓存中，而DOM元素本身只要存储一个简单的属性就可以了，这样就可以将由DOM元素引起的内存泄漏(具体会发生什么状况不知道，大家都这么说~)的风险规避到最小。
结语
糊里糊涂地又到了最后，有一些术语或解释上可能存在偏差，望各位童鞋指正和给出一些建议；另外，从理论上讲, data和removeData方法可以用于任何对象的缓存, 不过如果运用于本地对象或window对象, 会存在内存泄露、循环引用等问题(^_^从网上看到的), 所以一般还是用于DOM节点比较适合，还可以结合事件、动画对DOM节点进行缓存数据的操作。ps：cache真的很重要！需要慢慢体会~
因为分享，所以简单；因为分享，所以快乐。
您可能感兴趣的文章: