原生JS如何导出模块函数内的DOM变量到其他文件修改classList

问题本质 #

你当前模块仅导出了DOM元素的生成函数，只有执行该函数才能拿到对应的DOM实例，直接对函数操作classList肯定无法生效。同时你现有代码中执行生成函数将元素追加到body时，没有将返回的DOM实例存储并导出，外部模块自然无法获取到要操作的元素。

具体修改方案 #

1. 调整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>
    `;

  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  return element;
}

// 存储生成的header元素实例
const headerElement = header();
// 提取导航按钮实例统一导出
const navButtons = {
  home: headerElement.querySelector('#home'),
  menu: headerElement.querySelector('#menu'),
  location: headerElement.querySelector('#location')
}
document.body.appendChild(headerElement);

// 导出实例，同时保留原构造函数的默认导出
export { headerElement, navButtons };
export default header;

2. 调整业务模块（以mission.js为例），导出页面对应的DOM实例 #

修改后代码如下：

const mission = () => {
  const element = document.createElement('div');
  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;
};

// 存储生成的mission页面实例
const missionElement = mission();
missionElement.classList.add('hide');
document.body.appendChild(missionElement);

// 导出实例，保留原构造函数的默认导出
export { missionElement };
export default mission;

3. 外部模块操作classList示例 #

在控制页面切换的逻辑文件中直接引入导出的实例即可操作：

import { navButtons } from './header.js';
import { missionElement } from './mission.js';
// 其他页面模块同理引入，比如import { menuElement } from './menu.js'

// 给home按钮绑定点击切换事件
navButtons.home.addEventListener('click', (e) => {
  e.preventDefault();
  // 直接操作元素的classList
  missionElement.classList.remove('hide');
  // menuElement.classList.add('hide');
})

补充说明 #

如果你的业务场景需要多次调用构造函数生成多个相同结构的元素，不需要提前执行生成实例，只需要在使用时调用构造函数拿到返回值即可操作：

import createMission from './mission.js';

// 生成新的mission元素并操作
const newMission = createMission();
newMission.classList.remove('hide');
document.body.appendChild(newMission);

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