实现一个函数 mount(component, container)，将组件挂载到指定的 DOM 节点上

推荐答案

// www.javascriptcn.com code example
function mount(component, container) {
    // 检查 container 是否是有效的 DOM 节点
    if (!(container instanceof HTMLElement)) {
        throw new Error('container must be a valid DOM element');
    }

    // 将组件渲染到 container 中
    container.innerHTML = component.render ? component.render() : component;
}

本题详细解读

1. 函数功能

mount(component, container) 函数的作用是将一个组件挂载到指定的 DOM 节点上。组件可以是一个字符串、HTML 片段，或者是一个包含 render 方法的对象。

2. 参数说明

• component: 要挂载的组件。可以是一个字符串、HTML 片段，或者是一个包含 render 方法的对象。
• container: 目标 DOM 节点，组件将被挂载到这个节点上。

3. 实现细节

• 参数校验: 首先检查 container 是否是一个有效的 DOM 节点。如果不是，抛出错误。
• 组件渲染: 如果 component 是一个包含 render 方法的对象，调用 render 方法获取组件的 HTML 内容；否则，直接将 component 作为 HTML 内容。
• 挂载: 将获取到的 HTML 内容设置为 container 的 innerHTML，从而将组件挂载到指定的 DOM 节点上。

4. 使用示例

// www.javascriptcn.com code example
// 示例 1: 组件是一个字符串
mount('<div>Hello, World!</div>', document.getElementById('app'));

// 示例 2: 组件是一个包含 render 方法的对象
const myComponent = {
    render() {
        return '<div>Hello, World!</div>';
    }
};
mount(myComponent, document.getElementById('app'));

5. 注意事项

• 如果 component 是一个对象但没有 render 方法，函数会直接将其作为字符串处理。
• 该函数假设 component 的 render 方法返回的是一个有效的 HTML 字符串。