HTML5中 data-*属性的实际用途

这篇文章 适用于还在使用二代框架(JQ 、zepto)等框架开发的人员~~

有些时候我们在做分页展示的时候后台会给我们一个JSON数组比如这样的数据

[
    {
        "activityId": "ACT_JAN_INVITE",
        "name": "aaa",
        "id": 6679,
        "jul2017Id": 0,
        "status": 0,
        "type": 2,
        "updateTime": {
            "date": 16,
            "day": 6,
            "hours": 0,
            "minutes": 30,
            "month": 11,
            "seconds": 46,
            "time": 1513355446000,
            "timezoneOffset": -480,
            "year": 117
        },
        "userId": 1999113
    },
    {
        "activityId": "ACT_JAN_INVITE",
        "discountMny": 0,
        "id": 6822,
        "name": "bbb",
        "status": 0,
        "type": 1,
        "updateTime": {
            "date": 16,
            "day": 6,
            "hours": 0,
            "minutes": 32,
            "month": 11,
            "seconds": 48,
            "time": 1513355568000,
            "timezoneOffset": -480,
            "year": 117
        },
        "userId": 1999113
    }
]

前端 只需要展示 userId和name里面的值 我们循环拼接字符串就可以了
现在有个需求，要求在点击每一行中的一个按钮的时候进行数据查找，然后跳转到一个详情页面，
后台查询数据需要两个参数
userId 和updateTime.time(实际可能需要的更多)

之前我们会这样 在每行中加入

type="hidden" value="">

value会拼入我们需要的值，之后会用JQ取到传给后台
如果hidden的值很多 很造成冗余

现在可以这样

<button type="button" data-time=""></button>

把变量拼入button中
之后可以在点击的时候通过
$(this).data(“time”)（JQ的写法，这里有个小坑，我们平时写变量名可能会用到骆驼命名法比如，creatTime，但是都必须是小写 用大写是取不到值的）
获得想要的值，可以节省很多冗余代码，

不过如果用vue之类的就更省事，还是来多学习学习新框架吧