jQuery数据缓存data(name,value)详解及实现
发布时间：2018-08-18 02:06:37 所属栏目：传媒 来源：站长网
导读：作为一名程序员，一提到缓存你很容易联想到客户端（浏览器缓存）和服务器缓存。客户端缓存是存在浏览者电脑硬盘上的，即浏览器临时文件夹，而服务器缓存是存在服务器内存中，当然在一些高级应用场合也有专门的缓存服务器，甚至有利用数据库进行缓存的实现。
|
作为一名程序员，一提到“缓存”你很容易联想到“客户端（浏览器缓存）”和“服务器缓存”。客户端缓存是存在浏览者电脑硬盘上的，即浏览器临时文件夹，而服务器缓存是存在服务器内存中，当然在一些高级应用场合也有专门的缓存服务器，甚至有利用数据库进行缓存的实现。当然这些都不在本文的讨论范围，本文要讨论的是最流行的JavaScript框架jQuery的数据缓存实现原理，这是jQuery1.2.3版开始加入的新功能。 一、 jQuery数据缓存的作用 jQuery数据缓存的作用在中文API中是这样描述的：“用于在一个元素上存取数据而避免了循环引用的风险”。如何理解这句话呢，看看我下面的举例，不知道合不合适，如果你有更好的例子可以告诉我。 （1） 存在循环引用风险的例子（注意getDataByName(name)方法中的for in语句）： Copy to Clipboard  引用的内容：[www.veryhuo.com]
<a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Tom</a><br/> <a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Mike</a> <script type="text/javascript"> var userInfo = [ { "name": "Tom", "age": 21, "phone": "020-12345678" }, { "name": "Mike", "age": 23, "phone": "020-87654321" }]; function getDataByName(name) { for (var i in userInfo) { if (userInfo[i].name == name) { return userInfo[i]; break; } } } function showInfoByName(name) { var info = getDataByName(name); alert('name:' + info.name + 'n' + 'age:' + info.age + 'n' + 'phone:' + info.phone); } </script> （2） 优化循环引用风险的例子（本例子其实与jQuery缓存实现原理差不多了，本例子重点在于改写了userInfo这个JSON结构，使name与对象key直接对应）： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Tom</a><br/> <a href="javascript:void(0);" onclick="showInfoByName(this.innerHTML);">Mike</a> <script type="text/javascript"> var userInfo = { "Tom": { "name": "Tom", "age": 21, "phone": "020-12345678" }, "Mike": { "name": "Mike", "age": 23, "phone": "020-87654321" } }; function showInfoByName(name) { var info = userInfo[name]; alert('name:' + info.name + 'n' + 'age:' + info.age + 'n' + 'phone:' + info.phone); } </script> （编辑：淮安站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
