將字符串附加到 DOM 轉換為 JSON

Question

我正在嘗試為單元測試編寫一個快速模擬函數。 為了測試我的斷言，我需要在頁面中包含一個 HTML 元素，並且該元素包含字符串化的 JSON。 被測系統采用字符串化的 JSON，對其進行修改，將其轉換回並重新插入。

在創建我對 DOM 的模擬插入時，我注意到一個奇怪的地方，我的字符串化 JSON 似乎被訪問，當它只是一個字符串時，它實際上是 JSON。

這是代碼的示例

var mockJson = JSON.stringify({
    name: "Foo",
    data: {}
});
var mockScript = document.createElement("script");
mockScript.id = "myElement";
mockScript.textContent = mockJson;
document.body.appendChild(mockScript);

上面的這段代碼實際上工作正常。 運行時，我可以在 DOM 中看到附加的#myElement ，它包含我的字符串化模擬對象。

但是它也會拋出一個錯誤：

VM136:1 未捕獲的語法錯誤：意外的標記“：”

此錯誤似乎專門在腳本的最后一行運行。 我很困惑，因為:不在該行中。 但我意識到它實際上將字符串化的mockJson視為 JSON……但同時也運行良好。

我測試了刪除復雜的模擬對象並用一個簡單的字符串替換它：

var mockJson = "foo";
var mockScript = document.createElement("script");
mockScript.id = "myElement";
mockScript.textContent = mockJson;
document.body.appendChild(mockScript);

運行這個腳本時，它仍然會做它應該做的事情，我的腳本元素在 DOM 中顯示，其中包含字符串“foo”。 但是在這種情況下也會出現一個錯誤：

VM179:1 未捕獲的 ReferenceError: foo 未定義

所以它試圖將foo作為變量插入，盡管它被聲明為一個字符串。

為什么會這樣？ 為什么它既按預期將其添加為字符串，又會引發此錯誤？

小提琴示例

 var mockJson = JSON.stringify({ name: "Foo", data: {} }); var mockScript = document.createElement("script"); mockScript.id = "myElement"; mockScript.textContent = mockJson; document.body.appendChild(mockScript);

Answer 1

這與將數據附加到 DOM 無關。 這就是將 JSON 放入腳本元素時會發生的情況。

腳本元素應該包含JavaScript ，而不是 JSON 。

字符串文字是一個完全有效（盡管完全沒有意義）的 JavaScript 表達式。

 "A string"

對象文字不是。

 { "property": "value", "second property": "value" }

這是因為語法{}用於對象字面量和塊。 在這種情況下，它被視為一個塊。 第一個屬性是標簽。 后面的字符串是一個無意義的字符串（如上例所示）。 然后下一個:觸發錯誤。

如果要將 JSON 添加到頁面以進行自動化測試，請使用有意義的元素。 例如<pre>元素而不是<script>元素。

一個有點骯臟的技巧是在 script 元素上設置一個type屬性來聲明它不是 JavaScript。