从 JS 脚本创建一个可嵌入的“小部件”

Question

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

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

如果我能以某种方式打包它并像这样调用它，那就太好了：

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

如果有人可以指导我一点那就太好了。

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

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/