如何在JavaScript文件中引入另一个JS文件？静态站场景求助

希望网站实现模块化同时保持静态，因此用JavaScript添加header和footer组件。但header组件需要调用date.js中的日期函数，直接在JS文件内引入该文件无法加载，求可行实现方法或合理替代方案。

用户提供的HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="header.js" type="text/javascript" defer></script>
  <script src="footer.js" type="text/javascript" defer></script>
</head>

<body>
  <br>
  <div class="welc">
    <img class="" src="image.png">
  </div>

  <br>

  <header-component>
  </header-component>
  <main>

    <br>
    <div style="" margin:auto>
      test
    </div>

  </main>
  <br>
  <footer-component></footer-component>
</body>
<html>

关联的header.js代码：

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
    <h1>this is a header</h1>
    <p>pretty dope, right?!</p>
    <script src="scripts/date.js" type="text/javascript"></script>
    `;
  }
}

customElements.define('header-component', Header);

方法1：全局提前引入date.js #

直接在HTML中先加载date.js，确保header组件初始化时，日期函数已经全局可用，这是最简单直接的方案。

修改后的HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 先引入date.js，保证在header组件前加载完成 -->
  <script src="scripts/date.js" type="text/javascript" defer></script>
  <script src="header.js" type="text/javascript" defer></script>
  <script src="footer.js" type="text/javascript" defer></script>
</head>

<body>
  <!-- 内容不变 -->
</body>
<html>

修改后的header.js：

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // 直接调用date.js里的函数（假设函数名为getCurrentDate）
    const currentDate = getCurrentDate();
    this.innerHTML = `
    <h1>this is a header</h1>
    <p>pretty dope, right?!</p>
    <p>当前日期：${currentDate}</p>
    `;
  }
}

customElements.define('header-component', Header);

方法2：动态加载date.js并执行 #

如果不想全局引入脚本，可以在header组件的生命周期里动态创建脚本标签，等待加载完成后再调用函数渲染内容。

修改后的header.js：

class Header extends HTMLElement {
  constructor() {
    super();
  }

  async connectedCallback() {
    // 先渲染基础内容
    this.innerHTML = `
    <h1>this is a header</h1>
    <p>pretty dope, right?!</p>
    <p id="date-wrap"></p>
    `;

    // 动态创建脚本标签加载date.js
    const script = document.createElement('script');
    script.src = 'scripts/date.js';
    script.type = 'text/javascript';

    // 等待脚本加载完成
    await new Promise((resolve, reject) => {
      script.onload = resolve;
      script.onerror = () => reject(new Error('date.js加载失败'));
      document.head.appendChild(script);
    });

    // 调用日期函数并插入内容
    const currentDate = getCurrentDate();
    this.querySelector('#date-wrap').textContent = `当前日期：${currentDate}`;
  }
}

customElements.define('header-component', Header);

方法3：使用ES模块导入 #

如果浏览器支持ES模块（现代浏览器都支持），可以把date.js转为模块，直接在header.js中导入使用，避免全局污染。

第一步，修改date.js为模块：

// date.js
export function getCurrentDate() {
  return new Date().toLocaleDateString();
}

第二步，修改header.js为模块并导入函数：

// header.js
import { getCurrentDate } from './scripts/date.js';

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const currentDate = getCurrentDate();
    this.innerHTML = `
    <h1>this is a header</h1>
    <p>pretty dope, right?!</p>
    <p>当前日期：${currentDate}</p>
    `;
  }
}

customElements.define('header-component', Header);

第三步，修改HTML中的脚本引入，加上type="module"：

<script src="header.js" type="module"></script>
<script src="footer.js" type="module"></script>

注意：ES模块在本地file://协议下可能会触发跨域限制，建议用本地服务器（比如http-server）运行静态页面。

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