1. ホーム
  2. javascript

[解決済み] DOMに任意のJSONを埋め込むためのベストプラクティス?

2022-07-31 20:40:52

質問

DOMに任意のJSONを埋め込もうと思っているのですが、このようなことは可能でしょうか?

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

これは、任意の HTML テンプレートを DOM に保存して、後で JavaScript テンプレートエンジンで使用する方法と似ています。この場合、後でJSONを取得し、それを使ってパースすることができます。

var stuff = JSON.parse(document.getElementById('stuff').innerHTML);

この作品 しかし、これは最良の方法なのでしょうか?これはベストプラクティスや標準に違反していますか?

注: 私は、DOM に JSON を格納するための代替手段を探しているわけではありません。私はそれを行うための最良の方法を探しているだけです。

どのように解決するのですか?

オリジナルの方法がベストだと思います。HTML5仕様では、この用途に対応しています。

データブロック(スクリプトとは対照的)を含めるために使用する場合、データはインラインで埋め込まれなければなりません。 はインラインで埋め込まれなければならず、データの形式は type 属性で指定しなければなりません。 src 属性は指定してはいけません。 script 要素のコンテンツは、使用される形式に定義された要件に適合していなければなりません。 の要件に適合していなければなりません。

こちらをお読みください。 http://dev.w3.org/html5/spec/Overview.html#the-script-element

まさにその通りだ。何が気に入らないのか?属性データで必要な文字エンコーディングがない。好きなようにフォーマットできる。表現力があり、使用目的が明確である。ハッキングのように感じない(例えば、CSSを使って"carrier"要素を隠すような感じ)。完全に有効です。