import - 模块不断刷新整个应用程序

Question

我正在尝试使用 vanilla Javascript 模块创建一个列表应用程序，但是当我尝试从另一个模块操作另一个模块中的代码时，即使我正在使用热模块替换 (HMR)，整个应用程序也会不断重新加载。

index.js：

const actionsContainer = document.querySelector(".actions-container");
const createBtn = document.querySelector(".button");
const notes = document.querySelector("#notes");

if (createBtn) {
  createBtn.addEventListener("click", function () {
    window.location = "edit.html";
  });
}

export function createEl(value) {
  const html = `<a href="./edit.html#24d36cc5-1387-4fac-aa08-895718ce00b4" class="list-item">
    <p class="list-item__title">${value}</p>
    <p class="list-item__subtitle">Last edited 2 days ago</p>
  </a>`;
  notes.insertAdjacentHTML("afterbegin", html);
}

if (module.hot) {
  module.hot.accept();
}

编辑.js：

import { createEl } from "./index.js";

const noteTitle = document.querySelector("#note-title");
const noteBody = document.querySelector("#note-body");
const submitBtn = document.querySelector("#submit");

submitBtn.addEventListener("click", function (e) {
  e.preventDefault();

  if (noteTitle.value.length == 0 || noteBody.value.length == 0) {
    return;
  } else {
    createEl(noteTitle.value);
    // window.location = "index.html";
  }
});

if (module.hot) {
  module.hot.accept();
}

标签： importmoduleexport