jQuery数据缓存方案详解：$.data()的使用

最新推荐文章于 2024-08-05 17:53:21 发布

aitangyong

最新推荐文章于 2024-08-05 17:53:21 发布

阅读量3.2w

点赞数 6

分类专栏： jquery 文章标签： jQuery数据缓存 jQuery.data js数据临时存储

本文链接：https://blog.csdn.net/aitangyong/article/details/50323561

版权

jQuery提供了一种优雅的数据缓存方案，通过$.data()、$.cache、$.expando、$.hasData()和$.removeData()等方法，避免了全局变量的命名污染和DOM操作的性能损耗。$.hasData()用于检查对象是否有附加属性，$.data()用于读写属性值，而$.removeData()用于释放内存。jQuery.expando是一个随机字符串，作为对象的属性名。了解这些，能更好地利用jQuery进行数据管理。

摘要由CSDN通过智能技术生成

我们经常使用隐藏控件或者是js全局变量来临时存储数据，全局变量容易导致命名污染，隐藏控件导致经常读写dom浪费性能。jQuery提供了自己的数据缓存方案，能够达到和隐藏控件、全局变量相同的效果，但是jQuery实现方式更优雅。为了更好地使用jQuery数据缓存方案，我们需要掌握$.data()、$.cache、$.expando、$.hasData()、$.removeData()。

$.hasData()用来判断某个对象是否有附加的属性，可以给任何javascript对象和HTMLElement对象附加属性。$.data()用来读取或者修改属性值。$.removeData()用来删除已经添加的属性，这是为了释放内存，避免过多无用属性浪费内存。

var myObj = {};
// hasData用来判断HTMLElement或JS对象是否具有数据
console.log(jQuery.hasData($("#a")));// false

// data()添加属性
$.data(myObj, 'name', 'aty');
console.log(jQuery.hasData(myObj));// true

// data()读取属性
console.log($.data(myObj, 'name'));//aty

// removeData删除属性
$.removeData(myObj, 'name');
console.log($.data(myObj, 'name'));//undefined

// 如果所有属性都被删除,那么hasData返回false
console.log(jQue