HTML 5におけるdata-*属性の実用化

この文章はまだ2世代フレームワーク(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の値を示すだけでいいです.文字列をループすればいいです.各行のボタンをクリックするときにデータを検索し、詳細ページにジャンプします.バックグラウンドでデータを検索するには2つのパラメータuserIdとupdateTimeが必要です.time(実際にはもっと必要かもしれません)
以前はこのように各行に参加していました

type="hidden" value="">

valueは私たちが必要とする値をつづり込み、その後JQでバックグラウンドに渡されますhiddenの値が多いと冗長になります
今こうして

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

変数をbuttonにスペルするとクリック時に$(this)を通過できます.Data(「time」)(JQの書き方、ここには小さな穴があります.私たちは普段変数名を書くのにラクダの命名法、例えばcreatTimeを使うかもしれませんが、小文字で大文字では値が取れません)を使って希望の値を得る必要があります.冗長コードを多く節約することができます.
でもvueとか使えばもっと手間が省けるので、新しい枠組みをもっと勉強しましょう.