如何将JavaScript组件对象转换为JSON并导入JS文件调用

第一步：将现有对象转换为合法JSON格式 #

JSON有固定语法要求，你需要对原有pageObjects对象做以下调整：

• 所有键名必须用双引号包裹
• 所有字符串值统一用双引号，原模板字符串的反引号替换为双引号，字符串内部的双引号前加转义符\
• 移除每个对象末尾的尾逗号

你可以直接把调整后的内容保存为components.json文件，参考格式如下：

{
  "objectComponent1": {
    "provideTitle": "Title",
    "provideId": "title1",
    "provideDesc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at. ",
    "provideHtml": "<p class=\"test\">This is a pragraph element.</p>"
  },
  "objectComponent2": {
    "provideTitle": "Title",
    "provideId": "title2",
    "provideDesc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at.",
    "provideHtml": "<p class=\"test\">This is a pragraph element.</p>"
  }
}

注意：不同组件的provideId不要重复，否则会导致页面ID冲突。

第二步：将JSON导入JS文件使用 #

根据你的运行环境选择对应导入方式即可：

场景1：ES模块环境（前端工程化项目、浏览器type="module"的script标签） #

直接通过import导入：

// 浏览器原生ES模块需要加assert断言，工程化环境（Vite/Webpack）可省略
import pageObjects from './components.json' assert {type: 'json'};

// 原有渲染逻辑直接使用即可，无需修改
const docsContent = document.querySelector(".docs-content");
for (const singleObject in pageObjects) {
  // 原有渲染代码保持不变
}

场景2：普通原生JS环境 #

通过fetch异步加载JSON文件后执行渲染：

fetch('./components.json')
  .then(res => res.json())
  .then(pageObjects => {
    // 原有渲染逻辑放在该回调内执行
    const docsContent = document.querySelector(".docs-content");
    for (const singleObject in pageObjects) {
      // 原有渲染代码保持不变
    }
  })

场景3：Node.js环境 #

直接通过require导入：

const pageObjects = require('./components.json');
// 后续逻辑保持不变

内容的提问来源于stack exchange，提问作者desert_dweller