我如何重构我的 Widget 嵌入代码：从 8 行 JavaScript 到单个 Data Attribute

Source: Dev.to

原始嵌入代码

document.addEventListener('DOMContentLoaded', function () {
  init('da0a042d-78b7-4b0b-98b6-bc05a8c119c4');
});

该嵌入由两部分组成：

• 外部资源加载器

• 初始化代码片段

document.addEventListener(‘DOMContentLoaded’, function () { init(‘da0a042d-78b7-4b0b-98b6-bc05a8c119c4’); });

虽然可以正常工作，但这种做法需要粘贴两个独立的 `<script>` 块。

## 简化版小部件实现

一个最小的 `widget.js` 可以暴露一个 `init` 函数：

```js
(function () {
window.init = function (x) {
  const container = document.createElement('div');
  container.textContent = x;
  document.body.appendChild(container);
};
})();

init 函数接受一个标识符，创建一个包含该值的 “，并将其添加到页面中。实际的小部件会使用该 ID 从后端获取设置（颜色、位置等）。

解决方案：自动初始化

为了实现单标签嵌入，脚本会从自身的 <script> 元素读取 data-id 属性并自动调用 init。

function autoInit() {
  const scriptTag = document.querySelector('script[src*="widget.js"][data-id]');
  if (scriptTag) {
    window.init(scriptTag.dataset.id);
  }
}
document.addEventListener('DOMContentLoaded', autoInit);

有了这段逻辑，嵌入代码可以写成：

最终的 widget.js

(function () {
  window.init = function (x) {
    const container = document.createElement('div');
    container.textContent = x;
    document.body.appendChild(container);
  };

  function autoInit() {
    const scriptTag = document.querySelector('script[src*="widget.js"][data-id]');
    if (scriptTag) {
      window.init(scriptTag.dataset.id);
    }
  }

  document.addEventListener('DOMContentLoaded', autoInit);
})();

结论

通过将嵌入合并为带有 data-id 属性的单个 <script> 标签，实现变得更简洁、更友好。用户现在只需添加一行代码，就能降低复杂度和潜在错误，使小部件拥有更精致、专业的体验——这正是其他广泛使用的第三方解决方案所提供的效果。