加載包含 javascript web 頁面中代碼使用的參數的 JSON 文件

Question

我正在 javascript 中開發 web UI。 數據存儲在遠程數據庫中，由 API 訪問。 我需要未存儲在數據庫中的額外數據，我無法在其中創建任何表或存儲任何結構化數據。

我從在代碼中創建 arrays 開始，但它很快變得不可讀和不堪重負，導致我的 JS 文件中的代碼和數據非常糟糕。

所以我創建了一個 JSON 文件來存儲它們，看起來像這樣。

{
    "version": "1.0",
    "encoding": "UTF-8",
    "arrays": {
        "array1": [
            ["key1","value1",0],
            ["key2","value2",1]
        ],
        "array2": [
            ["key1","value1",0],
            ["key2","value2",1]
        ]
    },
    "templates": {
        "template1": {
            "property1": 2,
            "property2": "value2",
            "property3": true
        },
        "template2": {
            "property1": 3,
            "property2": "value3",
            "property3": false
        }
    }
}

我編寫了一個簡單的解析器，在代碼的開頭將數據加載到全局 JSON object 中，同步的XMLHttpRequest在執行期間可以從多個函數中獲取數據。

var jsonDB = JSON.parse(getXML('https://example.com/data.json'));
// Where getXML is a function using a sync XMLHttpRequest to get and return the file.

然后我可以使用這些數據如下：

function X (param0, param1, param2) {
    if ( param0 == jsonDB[param1][param2].property1 ) {
        return jsonDB[param1][param2].property2;
    }
}

JSON 文件大約 90 KB，加載速度非常快。 從我的角度來看，架構很好：代碼很干凈，與這些數據分離； 並且數據是結構化的，易於維護。 從用戶的角度來看，加載時間是微不足道的。

但是，我收到了一個惱人的警告：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

然后，我創建了一個異步 xhr function 來加載文件。 但是它被調用的次數是如此之大，以至於它最終在呈現的 HTML 中出現未解決的請求和空字段。 我不知道異步 xhr 如何緩存 JSON 文件，但結果是響應丟失了。

我最終嘗試使用 await/sync 和 Promises，但在不重寫整個代碼的情況下，我無法讓某些東西按預期工作，這不是一個選擇。

我需要從代碼執行的開始加載一個 JSON 文件，而且只有一次，以使其在任何地方都可用，而不會收到來自瀏覽器的警告。 就像它是 a.js 庫或 css 文件一樣。 塊執行幾毫秒是可以的，但有警告是不行的。

誰能幫我解決這個問題？

注意：我在網站上看到很多關於在 JS 中加載 JSON 的問題，但沒有一個問題能夠解決這個精確的問題（JSON 作為變量），並且我使用 await/sync 完成的所有測試都失敗了。

Answer 1

答案很簡單，我很慚愧。

1. 在 JSON 數據文件的開頭添加變量聲明。

jsonDB = {"version": "1.0", "encoding": "UTF-8", "arrays": {...

2. 將文件擴展名更改為.js以在 IDE（我正在使用 Visual Studio Code）中正確解釋，順便說一句，它仍然正確地檢查 JSON 數據。 唯一的缺點是 JSON 語法高亮不再適用。

3. 像任何其他 javascript 文件一樣加載 JSON 文件。

<script src="dataJSON.js" ...