JQuery.data函数

前端开发, 会有这样的需求, 将一些数据绑定到一个DOM上面, 来完成自己的一些工作需求.

比如, 新浪微博的点赞的人数.

简陋一点的办法就是, 可以直接把数据设置成DOM的自定义属性. $("#domId").attr("likeCount", 1234);

但是这样有两个缺点,

1, 直接把数据暴露给用户了, 审查元素直接可以看到, 一点也不隐私, 万一有好事者怎么办?

2, 万一需要存储很复杂的对象呢? 怎么办?

jquery.data 这个方法可以很好的解决这个问题. 使用方法详见jquery api 文档. (http://api.jquery.com/data/)

1, 对于第一个问题, 数据是存在jquery.cache里面的, 不那么容易被窥探到.

2, 对于第二个问题, $("#domId").data(key, value) 这里的value可以是个js对象, 也就允许存很复杂的东西了.

同时这个方法, 也是兼容HTML5 data-* 这些属性的.

下面这段代码可以检查jquery的cache:

(function ($) {
    $(function() {
        $('.dummy').data('foo', 'bar');
        $.each($.cache, function (k, v) {
            if (v.foo) {
                $('body').append($('<div>found foo: ' + v.foo + ' at index ' + k + '</div>'));
            }
        });
    });
}(jQuery));