在代码中使用 Ajax 转换字符串 importetd 以插入到对象的属性方法中

问：

我正在使用一个对象开发一个自定义的柔性平面窗户。

在我的计划中，调用此对象的按钮需要具有一个特殊的类和一个专用属性，如下所示：

<button class="btnBox" type="button" data-use="2" version="base">Show</button>

然后，使用 addEventListener，onClick 充当获取版本的函数，并调用对象的方法。init

这是对象本身的简化部分：

let CustomBox = {
  btnCaller:         document.querySelector('.btnBox'),
  boxType:           'base',
  idCaller:          1,
  },
  init: function () {
    idCaller = this.idCaller;
    console.log(this.boxType);
    this.create(this.boxType);
  },
create: function (type) {
    // contiene le strutture dei layout disponibili (si potrebbero anche importare con Json)
    switch (type) {
      case 'base':
        options = {
            title: 'Test with title only',
            text: 'Look to the result!',
            buttons: [
              {
                text: 'OK',
                name: 'confirm',
                onClick: function () {
                  alert('Button: ' + idCaller);
                },
              },
            ],
          }
        break;

      case 'insert':
        options = {
          title: 'Search windoe',
          text: 'Insert name to search',
          inBox: 'searchName',
          buttons: [
              {
                text: 'Vai',
                name: 'search',
                onClick: function () {
                  console.log(document.getElementById('searchName').value);
                  alert('Value: ' + document.getElementById('searchName').value + 'button: ' + idCaller);
                },
              },
              {
                text: 'Cancel',
                name: 'btnCancel',
              },
            ],
          }
        break;
      default:
    };
    this.call(options);
  },
template: function (opts) {
      let template = `<div class="pageCover"></div>
                      <div class="modalWindow">`;
      if (opts.title) template += `<div class="modalTitle">${opts.title}</div>`;
      if (opts.text) {
        let arr = opts.text.split('|');
        arr.forEach((item, i) => {
          template += `<p>${item}</p>`
        });
      }
      if (opts.inBox) {
        console.log(opts.inBox);
        template += `<div class="inBox">
                      <label for="${opts.inBox}"></label>
                      <input type="text" id="${opts.inBox}" name="${opts.inBox}" />
                    </div>`;
      };
      btnLength = opts.buttons.length;
      if (btnLength > 0) {
        template += `<div class="buttonArea">`;
        for (let i = 0; i < opts.buttons.length; i++) {
          template += `<BUTTON name="${opts.buttons[i].name}" btn-rif="${i}">${opts.buttons[i].text}</BUTTON>`;
        }
        template += `</div>`;
      }
      template += `</div>`;
      console.log(template);
      return template;
    },
  }

好吧，代码并不完整，因为它很长，但我写的足以解决我的问题。

无论如何，为了完整起见，我可以添加一个使用模板创建一个 HTML 对象，然后通过另一种方法将声明的函数添加到 click 事件中。

回到我的问题，我想使方法更加灵活。因此，我创建了一个文本文档（不是 Json 文档，因为函数中的代码需要太多转义），根据版本的不同，如果按钮对象中存在 inBox 属性，我将代码放入按钮的功能中，并将 HTML 字符串添加到模板中。

所以，第二部分非常容易，因为只有准备好的字符串需要考虑和插入，但问题是我应该以 Js 可读形式“转换”包含函数代码的字符串，并将其附加到 buttons 对象中的 onClick 属性。

为了便于理解，我举个例子：如果我考虑“插入”版本，我想加载这个函数（这是一个非常简单的例子，现实肯定会越来越复杂）：

function () {alert('Value: ' + document.getElementById('searchName').value + 'button: ' + idCaller);}

使用 Ajax，并将其作为代码编写为“create”方法中“onClick”属性的值。在代码中，您可以看到实际的方式，在开关中有许多案例对应于处理的版本。我的想法是仅为所需的版本导入这些部分。

我真的不想考虑这些选择。有人可以给我建议吗？eval()