有什么方法可以使用 vanilla JS 將模塊 function 中的 JS 變量導出到另一個文件？

Question

我的 header.js 動態創建顯示和隱藏我的頁面的按鈕。 這些頁面各自在各自的 JS 文件中獨立調制。 由於無法更改 function 上的 classList，如何導出必須更改 classList 的元素變量？

header.js

function header() {
  const element = document.createElement('div');

  element.innerHTML = `
    <nav>
       <button type="button" class="btn btn-dark" id="home"><a href="">Home</a></button>
       <button type="button" class="btn btn-dark" id="menu"><a href="">Menu</a></button>
       <button type="button" class="btn btn-dark" id="location"><a href="">Location</a></button>
     </nav>
    `;

  // Add the image to our existing div.
  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  return element;

}

document.body.appendChild(header());

export default header;

我的模塊 mission.js 示例

const mission = () => {
  const element = document.createElement('div');
  element.classList.add('hide');
  element.innerHTML = `
  <div class='asl'>
      <div class='mission' id='mission'>
          <div class='text-content'>
              <h2>Our Mission</h2>
              <h4>Provide you with Handpicked, Artisanally Curated, Free Range, Sustainable, Organic Tea & Delicious Desserts</h4>
          </div>
      </div>
  </div>
    `;

  return element;
};

document.body.appendChild(mission());

export default mission;

感謝你的幫助：）

Answer 1

您可以導出變量； 但是，您的常量是在 function 中聲明的，並且常量是塊范圍的，因此在 function 括號之外無法訪問它。

但是，您可以使用類似於模塊模式的東西來導出變量：

const myModule = (function() {
const myVariable = 1;

function myFunction() {
return myVariable + 1;
}

function getmyVariable() {
return myVariable;
}

return {myFunction, getMyVariable};
}());

export { myModule };

然后你可以像這樣使用它：

//import it
const variable = myModule.getMyVariable();

還有很多方法可以做到這一點，在 function 塊之外聲明常量，創建具有 getter 和 setter 的類或創建工廠函數。

Answer 2

ES 模塊（即import / export語法）是 Javascript 規范的一部分，也就是說，它們是“vanilla”。

然而，這並不意味着每個瀏覽器或其他 JS 運行時都支持它們，事實上有些仍然不支持，或者只是以某種臨時方式支持。 MDN 的模塊頁面有一個圖表，顯示了對流行 JS 運行時的支持細分。

如果您的運行時不支持 ES 模塊，它可能會支持舊的 CommonJS（即require ）語法。 如果兩者都不支持，您將需要使用某種捆綁程序。

PS 另一件需要考慮的事情是時機。 當模塊代碼運行時，它會在加載時運行……但是 DOM 可能還沒有准備好，這意味着使用document的代碼可能無法工作。 您必須將代碼添加到某種DOMContentReady或類似的事件處理程序，以確保首先加載模塊，然后加載 DOM，然后運行該代碼。