深入理解JavaScript模块化DOM操作策略

// src/modules/menuModule.js
/**
 * 负责创建并配置菜单DOM元素。
 */
const menuElement = document.createElement('div');
menuElement.id = 'main-menu';
menuElement.classList.add('navigation');
menuElement.innerHTML = `
    <h2>欢迎来到我们的餐厅！</h2>
    <ul>
        <li>首页</li>
        <li>菜单</li>
        <li>联系我们</li>
    </ul>
`;

export default menuElement;

// src/index.js
import menuContent from './modules/menuModule.js';

const appContainer = document.getElementById('app');
if (appContainer) {
    appContainer.appendChild(menuContent);
} else {
    console.error('App container not found.');
}

// src/modules/cardModule.js
/**
 * 创建一个可定制的卡片DOM元素。
 * @param {string} title - 卡片的标题。
 * @param {string} content - 卡片的内容。
 * @returns {HTMLElement} 新创建的卡片元素。
 */
export function createCardElement(title, content) {
    const cardDiv = document.createElement('div');
    cardDiv.classList.add('card');

    const titleElement = document.createElement('h3');
    titleElement.textContent = title;

    const contentElement = document.createElement('p');
    contentElement.textContent = content;

    cardDiv.appendChild(titleElement);
    cardDiv.appendChild(contentElement);

    return cardDiv;
}

// src/index.js
import { createCardElement } from './modules/cardModule.js';

const appContainer = document.getElementById('app');

if (appContainer) {
    // 创建第一张卡片
    const card1 = createCardElement('产品A', '这是关于产品A的详细描述。');
    appContainer.appendChild(card1);

    // 创建第二张卡片
    const card2 = createCardElement('产品B', '这是关于产品B的详细描述。');
    appContainer.appendChild(card2);

    // 也可以根据数据动态生成
    const data = [
        { title: '服务X', content: '提供专业的咨询服务。' },
        { title: '解决方案Y', content: '定制化的软件解决方案。' }
    ];
    data.forEach(item => {
        appContainer.appendChild(createCardElement(item.title, item.content));
    });

} else {
    console.error('App container not found.');
}