如何在页面中多次引入同一JavaScript文件并通过data属性传参

嘿，我看到你想通过多次引入同一个sc.js文件，用不同的data-key和data-id来获取对应的数据——这个需求挺常见的，但你当前的代码有个关键问题得先修正，然后再调整JS逻辑来支持多实例处理。

首先，你写的两个<script>标签用了完全相同的id值（sc_widget），HTML规范里id是全局唯一的，浏览器只会识别第一个带这个id的元素，第二个标签的参数根本不会被JS读取到。所以第一步先把这个问题解决掉：把重复的id改成类，比如class="sc_widget"，这样就能通过类选择器获取所有需要处理的script标签了。

修正后的HTML结构 #

<script class="sc_widget" data-key="rsl2xlfiovx09mkwofom" data-id="jwks97n15dpqge35jfmm" src="http://example.co.uk/sc.js" type="text/javascript"></script>
<script class="sc_widget" data-key="rsl2xlfiovx09mkwofom" data-id="fw8zy246n8vhf5f8du7n" src="http://example.co.uk/sc.js" type="text/javascript"></script>

接下来，我们需要让sc.js能够遍历所有带有sc_widget类的script标签，逐个读取它们的data属性，执行对应的逻辑。这里要注意：因为你多次引入了同一个JS文件，每次加载都会执行一次代码，所以得确保每个script标签只被处理一次，避免重复执行逻辑。

调整sc.js的核心逻辑 #

可以在sc.js里写这样的代码：

// 遍历所有带有sc_widget类的script标签
document.querySelectorAll('.sc_widget').forEach(script => {
  // 用dataset标记已经处理过的标签，避免重复执行
  if (script.dataset.processed) return;
  
  // 读取当前script的data属性
  const widgetKey = script.dataset.key;
  const widgetId = script.dataset.id;
  
  // 这里替换成你的业务逻辑，比如根据key和id请求对应数据
  console.log(`正在处理组件：key=${widgetKey}, id=${widgetId}`);
  
  // 标记为已处理，防止后续重复执行
  script.dataset.processed = 'true';
});

为什么这样能行？ #

• 用类选择器替代重复id，符合HTML规范，能准确获取到所有需要处理的script实例。
• 通过dataset.processed标记已处理的标签，完美解决了多次引入JS导致的重复执行问题。
• 每个script标签的data属性都是独立的，所以能分别读取不同的参数，执行对应的个性化逻辑。

额外优化：避免重复加载JS核心逻辑 #

如果你担心多次引入同一个JS文件会导致浏览器重复下载（虽然大部分浏览器会缓存静态资源，但还是可以优化），可以在sc.js里加个判断，让核心逻辑只执行一次，同时处理所有静态和动态添加的script标签：

// 检查是否已经初始化过核心逻辑
if (!window.scWidgetInitialized) {
  window.scWidgetInitialized = true;
  
  // 封装处理单个组件的函数
  function processSingleWidget(script) {
    const widgetKey = script.dataset.key;
    const widgetId = script.dataset.id;
    // 这里写你的业务逻辑，比如渲染组件、请求数据等
    console.log(`处理组件实例：key=${widgetKey}, id=${widgetId}`);
  }
  
  // 处理页面上已有的所有sc_widget标签
  document.querySelectorAll('.sc_widget').forEach(script => {
    if (!script.dataset.processed) {
      processSingleWidget(script);
      script.dataset.processed = 'true';
    }
  });
  
  // 可选：监听后续动态添加的sc_widget标签（比如通过JS动态插入的）
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'SCRIPT' && node.classList.contains('sc_widget') && !node.dataset.processed) {
          processSingleWidget(node);
          node.dataset.processed = 'true';
        }
      });
    });
  });
  
  observer.observe(document.body, { childList: true, subtree: true });
}

这样即使你多次引入sc.js，核心逻辑也只会初始化一次，同时能处理所有静态渲染和动态添加的组件实例。

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