ES6动态import与选项卡模块动态加载实例页面

HTML代码：

<nav>
    <a href="javascript:" class="active" data-module="mm1">美女1</a>
    <a href="javascript:" data-module="mm2">美女2</a>
    <a href="javascript:" data-module="mm3">美女3</a>
</nav>
<main><img src="mm1.jpg"></main>
                

script代码：

<script>
  const main = document.querySelector('main');
  const links = document.querySelectorAll('nav > a');
  for (const link of links) {
    link.addEventListener('click', async (event) => {
      event.preventDefault();
      
      // 选项卡UI变化
      document.querySelector('.active').classList.remove('active');
      event.target.classList.add('active');
      // 尝试导入模块
      try {
        const module = await import(`./${link.dataset.module}.mjs`);
        // 模块暴露名为`loadPageInto`的方法。
        module.loadPageInto(main);
      } catch (error) {
        main.textContent = error.message;
      }
    });
  }
</script>
                

mm*.mjs代码：

// 指定DOM元素中显示美女
export const loadPageInto = (dom) => dom.innerHTML = '<img src="mm*.jpg">';