JavaScript模块化中的DOM元素管理：直接导出元素还是导出创建函数？

// menu.js - 直接导出元素模块
const menuElement = document.createElement('div');
menuElement.classList.add('menu-container');
menuElement.innerHTML = `
  <h2>我们的菜单</h2>
  <ul>
    <li>披萨</li>
    <li>汉堡</li>
    <li>沙拉</li>
  </ul>
`;

export default menuElement;

// index.js - 使用直接导出元素模块
import menuElement from './menu.js';

const contentArea = document.querySelector('#content');
contentArea.appendChild(menuElement);

// menu.js - 导出创建元素的函数模块
function createMenu(options = {}) {
  const { title = '我们的菜单', items = ['披萨', '汉堡', '沙拉'] } = options;

  const menuElement = document.createElement('div');
  menuElement.classList.add('menu-container');

  const titleElement = document.createElement('h2');
  titleElement.textContent = title;
  menuElement.appendChild(titleElement);

  const listElement = document.createElement('ul');
  items.forEach(itemText => {
    const listItem = document.createElement('li');
    listItem.textContent = itemText;
    listElement.appendChild(listItem);
  });
  menuElement.appendChild(listElement);

  // 可以在这里添加事件监听器或其他交互逻辑
  // menuElement.addEventListener('click', () => console.log('Menu clicked!'));

  return menuElement;
}

export default createMenu;

// index.js - 使用导出创建元素函数的模块
import createMenu from './menu.js';

const contentArea = document.querySelector('#content');

// 创建默认菜单
const defaultMenu = createMenu();
contentArea.appendChild(defaultMenu);

// 创建一个自定义菜单
const specialMenu = createMenu({
  title: '今日特供',
  items: ['意面', '牛排', '甜点']
});
contentArea.appendChild(specialMenu);

// 也可以将父元素传入函数，让函数负责挂载（不推荐作为唯一方式）
// function createAndAppendMenu(parent, options = {}) {
//   const menu = createMenu(options);
//   parent.appendChild(menu);
//   return menu;
// }
// createAndAppendMenu(contentArea, { title: '早餐', items: ['咖啡', '面包'] });

// menu.js - 函数负责创建并附加
export function createAndAppendMenu(parentElement, options = {}) {
  const menuElement = document.createElement('div');
  menuElement.classList.add('menu-container');
  // ... 添加内容和样式 ...
  parentElement.appendChild(menuElement); // 直接附加
  return menuElement;
}

// index.js - 调用并传递父元素
import { createAndAppendMenu } from './menu.js';
const contentArea = document.querySelector('#content');
createAndAppendMenu(contentArea, { title: '早餐' });