HTML 데이터 속성에 JSON을 추가하는 것이 나쁜가요?

HTML 데이터 속성에 JSON을 추가하는 것이 나쁜가요?

HTML 이후dataAtribute는 커스텀 데이터를 추가할 수 있습니다.이러한 데이터를 포함시키는 것이 좋은 생각인지 궁금합니다.JSON로 기재하다.data속성?그럼, 대응하는 것은JSON쉽게 접근할 수 있다JavaScript와의 이벤트getAttribute("data-x").

사실, 제 질문은 다음과 같습니다.대규모 데이터 세트를 표준적이고 효율적이며 합리적인가?HTML속성?

예를들면

<div data-x="A LARGE SET OF JSON DATA" id="x">

또는 대규모 JSON 데이터 세트를 저장해야 합니다.<script>태그 및HTMLAtribute는 대규모 데이터 세트에 적합하지 않습니다.data기여하다.

모든 데이터를 데이터 속성에 저장하는 대신 식별자를 사용하여 데이터에 액세스할 수 있습니다.

예를 들어 다음과 같이 할 수 있습니다.

var myBigJsonObj = { 
                      data1 : { //lots of data}, 
                      data2 : { //lots of data}                   

                   };

그리고 다음과 같은 html이 있습니다.

<div data-dataId="data1" id="x">

다음과 같이 jquery를 사용하여 데이터를 가져올 수 있습니다.

var dataId = $('#x').attr('data-dataId');

var myData = myBigJsonObj[dataId];

이게 최선의 접근법이야 임호야.

오브젝트를 저장한다고 합니다.var dataObj = { foo: 'something', bar: 'something else' };html 데이터 속성으로 이동합니다.

우선 오브젝트의 스트링화를 검토하여var stringifiedDataObj = JSON.stringify(dataObj);

그런 다음 jQuery를 사용하여 stringizedDataObj를 데이터 속성으로 설정할 수 있습니다(예:jQuery.data()API

JSON의 긴 문자열을 데이터 속성에 삽입하는 것을 막을 수는 없지만 JSON 데이터의 속성당 하나의 데이터 속성을 추가하는 것이 더 "올바른" 방법이라고 할 수 있습니다.예:

Javascript:

var dataObj = { foo: 'something', bar: 'something else' }

HTML:

<div data-foo="something" data-bar="something else"></div>

이렇게 하면 JSON 객체의 각 데이터는 독립적으로 액세스할 수 있는 별도의 DOM 요소에 연결됩니다.

어느 쪽이든 HTML에 삽입하는 값을 회피할 필요가 있습니다.그렇지 않으면, 「」문자는 페이지를 망가뜨립니다.

기술적으로도 가능합니다.여러 사이트에서 이 작업을 하고 있는 것을 본 적이 있습니다만, 또 다른 솔루션은 JSON을 저장하여<script>태그 붙이고 스크립트태그를 참조합니다.data기여하다.데이터가 페이지 서버 측에 렌더링되는 경우, 예를 들어 인라인 스크립트 태그에 CSP 제한이 있는 경우, 이는 데이터를 실제 스크립트에 JS 개체로 저장하는 것보다 더 나은 솔루션입니다.

HTML

<div data-data-id="#MyScriptData" id="x"></div>

<script type="application/json" id="MyScriptData">
{
    "fruit": "apple",
    ...
}
</script>

JS

$(function () {
    var dataId = $("#x").data("data-id");
    var dataTag = $(dataId);
    var dataJson = dataTag.html(); // returns a string containing the JSON data
    var data = JSON.parse(dataJson);

    ...
});

당신은 지도를 이용할 수 있습니다.여기서 요소가 키가 되고 해당 키의 값이 원하는 데이터를 저장하는 개체가 될 수 있습니다.다음과 같은 경우(단, 테스트되지 않음):

(function(global) {

  const map = new Map();

  global.CustomData = {
    add(element, key, data) {
      if (!map.has(element)) {
        map.set(element, {});
      }

      map.get(element)[key] = data;

      return map.get(element);
    },

    get(element, key) {
      if (!map.has(element)) {
        return null;
      }

      if (key !== undefined) {
        return map.get(element)[key];
      }

      return map.get(element)
    },

    remove(element, key) {
      if (!map.has(element)) {
        return false;
      }

      delete map.get(element)[key];

      if (Object.keys(map.get(element)).length === 0) {
        map.delete(element);
      }

      return true;
    },

    clear(element) {

      if (!map.has(element)) {
        return false;
      }

      map.delete(element);

      return true;
    }
  }

})(window);

언급URL : https://stackoverflow.com/questions/15838593/is-it-bad-to-add-json-on-html-data-attribute