面试题：Svelte中如何实现一个自定义的Svelte Action并应用于多个元素

Question

请阐述在Svelte中创建自定义Action的步骤，并编写代码示例展示如何将这个自定义Action应用到多个DOM元素上，同时说明该Action在应用过程中如何接收和处理参数。

Answer 1

创建自定义Action步骤：

1. 定义Action函数：该函数接收目标DOM元素作为第一个参数，后续可以接收自定义参数。在函数内部可以执行各种操作，比如添加事件监听器、修改元素样式等。
2. 返回清理函数（可选）：如果Action有需要在元素被移除时清理的操作，如移除事件监听器，可以返回一个清理函数。

代码示例：

<script>
    // 定义自定义Action
    const myAction = (node, param) => {
        // 设置元素的背景颜色为传入的参数值
        node.style.backgroundColor = param;

        // 清理函数，当元素被移除时执行
        const cleanup = () => {
            node.style.backgroundColor = '';
        };

        return {
            destroy: cleanup
        };
    };

    let items = ['red', 'green', 'blue'];
</script>

{#each items as item}
    <div use:myAction={item}>{item}</div>
{/each}

参数接收与处理：

1. 接收参数：在use:actionName={param}中，param就是传递给自定义Action的参数。在上述示例中，item作为参数传递给myAction。
2. 处理参数：在自定义Action函数myAction中，通过第二个参数接收传递过来的参数。在示例里，param参数被用于设置DOM元素的背景颜色，在清理函数中又将背景颜色清除。