javascript - 从 JS 脚本创建一个可嵌入的 "widget"

Question

我希望能够使用一行代码将通过此代码段创建的内容嵌入到任何我喜欢的位置 - 与您在某处获得任何类型的代码段相同的方式，以便它呈现 iframe 或类似的返回。我不知道从哪里开始，如果我已经拥有的东西可以使用/准备“转换”为可嵌入的片段。我浏览了一些教程，但由于它使用了一些我不太了解的后端东西，所以很令人困惑......

显然，它应该托管在某个地方，但是我需要“调用”代码段的部分对我来说并不是很清楚。现在，它只是出现在我网站上的任何地方，因为它只是一个包含在内的普通 JS 文件，与所有其他文件一样。

如果我能以某种方式打包它并这样调用它，那就太好了，让我们说:

<script src="link-to-my-snippet.js"></script> 

如果有人能指导我一下，那就太好了。

const data = [
  {
    name: "John Doe",
    age: 40
  },
  {
    name: "Jane Doe",
    age: 50
  }
];

window.addEventListener("DOMContentLoaded", function() {
  function Item(configurationObject) {
    apiCall(data);
  }

  function apiCall(data) {
    // Do some API call and get back the data
    // With the Unique ID that wass passed in via the 
    // configuration Object
    // "data" is faked just for the demonstration
    createHTML(data);
  }

  function createHTML(data) {
    const mainDiv = document.createElement("div");
    document.body.appendChild(mainDiv);
    let html = '';

    data.forEach((user) => {
      html += `
          <div class="test">
              <p>${user.name}</p>
              <p>${user.age}</p>
          </div>
        `;
    });

    mainDiv.innerHTML = html;

    createStylesheet();
  }

  function createStylesheet() {
    const style = document.createElement("style");
    style.innerHTML = `
        .test {
                background-color: lightgreen;
            color: white;
        }
    `;

    document.head.appendChild(style);
  }

  let configurationObject = {
    uniqueID: 1234
  }

  let initialize = new Item(configurationObject);
});

Answer 1

有两种方式:

1. 使用现代 javascript - ES6、Webpack、SCSS，然后使用 NPM 将所有内容捆绑在一个文件中关注:https://blog.jenyay.com/building-javascript-widget/

2. 纯 JavaScript - 自定义创建。

您可以像这样创建一个可自行执行的匿名函数，并在其中编写完整的小部件代码——包括您的 HTML、CSS 等。一旦你的页面加载了这个脚本，它就会被执行。

(function() {
    // The following code will be enclosed within an anonymous function
    var foo = "Hello World!";
    document.write("<p>Inside our anonymous function foo means '" + foo + '".</p>');
})(); // We call our anonymous function immediately

对于第二种解决方案，您还可以按照以下文章进行操作: https://gomakethings.com/the-anatomy-of-a-vanilla-javascript-plugin/