面试题：Svelte模块上下文、Slot与Action的复杂交互场景

Question

设计一个Svelte应用场景，有一个可复用的卡片组件`Card.svelte`。该卡片组件内部使用模块上下文来管理一些共享状态，比如卡片的点击次数。通过Slot传入不同类型的内容（文本、图片等）。并且为卡片添加一个Action，当鼠标悬停时，卡片会以动画形式放大，同时将当前卡片的点击次数通过模块上下文传递给父组件进行统计。请详细描述实现思路并给出核心代码。

Answer 1

实现思路

1. 创建Card.svelte组件：定义组件结构，使用模块上下文管理共享状态，即卡片的点击次数。
2. 处理共享状态：在模块上下文定义点击次数变量及更新方法。
3. 处理Slot内容：通过<slot>标签接收父组件传入的不同类型内容（文本、图片等）。
4. 添加Action：定义一个Action函数，实现鼠标悬停时卡片放大的动画效果，并在动画触发时将点击次数传递给父组件。

核心代码

1. Card.svelte组件

<script>
    // 模块上下文
    const cardContext = {};
    let clickCount = 0;
    cardContext.getClickCount = () => clickCount;
    function handleClick() {
        clickCount++;
    }

    // Action函数
    function zoomOnHover(node) {
        const handleMouseOver = () => {
            node.style.transform = 'scale(1.1)';
            const count = clickCount;
            // 这里假设父组件提供了一个接收点击次数的函数，通过上下文传递
            if (parentContext && parentContext.updateTotalCount) {
                parentContext.updateTotalCount(count);
            }
        };
        const handleMouseOut = () => {
            node.style.transform = 'scale(1)';
        };

        node.addEventListener('mouseover', handleMouseOver);
        node.addEventListener('mouseout', handleMouseOut);

        return {
            destroy() {
                node.removeEventListener('mouseover', handleMouseOver);
                node.removeEventListener('mouseout', handleMouseOut);
            }
        };
    }
</script>

<div use:zoomOnHover on:click={handleClick}>
    <slot />
</div>

2. 父组件使用Card.svelte

<script>
    import Card from './Card.svelte';
    let totalClickCount = 0;
    function updateTotalCount(count) {
        totalClickCount += count;
    }
</script>

<Card {parentContext: {updateTotalCount}}>
    <p>这是卡片内的文本内容</p>
</Card>
<Card {parentContext: {updateTotalCount}}>
    <img src="example.jpg" alt="示例图片">
</Card>

<p>所有卡片的总点击次数: {totalClickCount}</p>

以上代码实现了一个可复用的卡片组件，通过模块上下文管理点击次数，通过Slot传入不同内容，并添加了鼠标悬停放大的Action，同时能将点击次数传递给父组件进行统计。