MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Svelte 使用 Action 实现自定义事件处理

2021-03-242.2k 阅读

Svelte 中 Action 的基础概念

在 Svelte 框架里，Action 是一种非常强大且独特的功能，它允许开发者为 DOM 元素附加自定义行为。简单来说，Action 可以看作是一个函数，这个函数接收一个 DOM 元素作为参数，并返回一个对象（可选地包含 destroy 和 update 方法）。通过这种方式，开发者能够为 DOM 元素添加额外的功能，而无需在组件的逻辑中编写复杂的 DOM 操作代码。

Action 的基本定义与使用

下面我们来看一个简单的例子，展示如何定义和使用一个基本的 Action。假设我们想要创建一个 Action，当鼠标进入 DOM 元素时，改变元素的背景颜色，当鼠标离开时，恢复原来的颜色。

<script>
    function hoverAction(node) {
        const originalColor = node.style.backgroundColor;
        node.style.backgroundColor = 'lightblue';

        const handleMouseOut = () => {
            node.style.backgroundColor = originalColor;
        };

        node.addEventListener('mouseout', handleMouseOut);

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

<div use: hoverAction>
    鼠标移入我，背景色会改变
</div>

在上述代码中，我们定义了 hoverAction 函数。这个函数接收 node（即要应用 Action 的 DOM 元素）作为参数。首先，我们保存了元素原来的背景颜色 originalColor，然后改变元素的背景颜色为 lightblue。接着，我们定义了 handleMouseOut 函数，当鼠标离开元素时，将背景颜色恢复为原来的颜色。同时，我们为 DOM 元素添加了 mouseout 事件监听器，绑定 handleMouseOut 函数。最后，我们返回一个对象，其中 destroy 方法用于在组件销毁时移除事件监听器，以避免内存泄漏。

Action 的参数传递

Action 还支持接收参数，这使得 Action 更加灵活和通用。例如，我们可以修改上面的 hoverAction，使其可以接受一个自定义的颜色作为参数，当鼠标移入时，将元素背景色改为这个自定义颜色。

<script>
    function hoverAction(node, hoverColor) {
        const originalColor = node.style.backgroundColor;
        node.style.backgroundColor = hoverColor;

        const handleMouseOut = () => {
            node.style.backgroundColor = originalColor;
        };

        node.addEventListener('mouseout', handleMouseOut);

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

<div use: hoverAction="['pink']">
    鼠标移入我，背景色会变成粉色
</div>

在这个例子中，hoverAction 函数现在接收第二个参数 hoverColor，在使用 Action 时，我们通过 use: hoverAction="['pink']" 传递了 pink 作为参数。这样，当鼠标移入元素时，背景色就会变成粉色。

基于 Action 实现自定义事件处理

自定义事件处理的原理

在 Svelte 中，基于 Action 实现自定义事件处理的核心原理是利用 DOM 的事件机制。我们可以在 Action 函数内部，为 DOM 元素添加特定的事件监听器，并在事件触发时，通过自定义的方式通知组件。通常，我们会使用 CustomEvent 来创建自定义事件，并通过 dispatchEvent 方法在 DOM 元素上触发这个事件。组件可以监听这个自定义事件，并执行相应的逻辑。

创建一个简单的自定义事件处理 Action

假设我们想要创建一个 Action，当用户双击 DOM 元素时，触发一个自定义事件，并传递一些数据给组件。

<script>
    function doubleClickAction(node) {
        const handleDoubleClick = () => {
            const customEvent = new CustomEvent('my - double - click', {
                detail: {
                    message: '你双击了我'
                }
            });
            node.dispatchEvent(customEvent);
        };

        node.addEventListener('dblclick', handleDoubleClick);

        return {
            destroy() {
                node.removeEventListener('dblclick', handleDoubleClick);
            }
        };
    }
</script>

<div use: doubleClickAction on: my - double - click={event => console.log(event.detail.message)}>
    双击我触发自定义事件
</div>

在上述代码中，我们定义了 doubleClickAction。在这个 Action 中，我们为 DOM 元素添加了 dblclick 事件监听器。当双击事件触发时，我们创建了一个名为 my - double - click 的自定义事件，并在 detail 属性中传递了一些数据（这里是 {message: '你双击了我'}）。然后，我们通过 dispatchEvent 方法在 DOM 元素上触发这个自定义事件。在组件中，我们通过 on: my - double - click 来监听这个自定义事件，并在事件处理函数中打印出 detail 中的消息。

自定义事件传递复杂数据结构

有时候，我们可能需要在自定义事件中传递更复杂的数据结构。例如，假设我们有一个包含多个属性的对象，想要在自定义事件触发时传递给组件。

<script>
    function complexDataAction(node) {
        const handleClick = () => {
            const complexData = {
                name: '示例数据',
                value: 42,
                subData: {
                    nestedValue: '嵌套的值'
                }
            };
            const customEvent = new CustomEvent('my - complex - click', {
                detail: complexData
            });
            node.dispatchEvent(customEvent);
        };

        node.addEventListener('click', handleClick);

        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }
</script>

<div use: complexDataAction on: my - complex - click={event => console.log(event.detail)}>
    点击我触发传递复杂数据的自定义事件
</div>

在这个例子中，当点击 DOM 元素时，我们创建了一个复杂的数据对象 complexData，并将其作为 detail 属性传递给名为 my - complex - click 的自定义事件。组件在监听这个自定义事件时，可以获取并处理这个复杂的数据对象。

自定义事件与组件状态交互

自定义事件不仅可以传递数据，还可以与组件的状态进行交互。例如，我们可以在自定义事件触发时，更新组件的状态。

<script>
    let count = 0;

    function incrementAction(node) {
        const handleClick = () => {
            const customEvent = new CustomEvent('my - increment - click');
            node.dispatchEvent(customEvent);
        };

        node.addEventListener('click', handleClick);

        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }

    const handleIncrement = () => {
        count++;
    };
</script>

<div use: incrementAction on: my - increment - click={handleIncrement}>
    点击我增加计数：{count}
</div>

在这个代码中，我们定义了 incrementAction，当点击 DOM 元素时，触发 my - increment - click 自定义事件。组件通过 on: my - increment - click 监听这个事件，并在事件处理函数 handleIncrement 中更新 count 状态，从而在页面上显示点击次数的增加。

深入理解自定义事件处理 Action 的生命周期

Action 的初始化阶段

当 Action 被应用到 DOM 元素时，首先会进入初始化阶段。在这个阶段，Action 函数被调用，接收 DOM 元素作为参数。此时，我们可以在 Action 函数中进行一些初始设置，比如保存元素的初始状态、添加初始的事件监听器等。例如，在前面的 hoverAction 中，我们在初始化阶段保存了元素原来的背景颜色，并添加了 mouseout 事件监听器。

Action 的更新阶段

虽然不是所有的 Action 都需要更新阶段，但在某些情况下，当 Action 的参数发生变化时，我们可能需要执行一些更新操作。如果 Action 返回的对象中包含 update 方法，那么当 Action 的参数更新时，update 方法会被调用。例如，我们可以修改前面带有参数的 hoverAction，使其支持更新颜色参数。

<script>
    function hoverAction(node, hoverColor) {
        let currentColor = hoverColor;
        const originalColor = node.style.backgroundColor;
        node.style.backgroundColor = currentColor;

        const handleMouseOut = () => {
            node.style.backgroundColor = originalColor;
        };

        node.addEventListener('mouseout', handleMouseOut);

        return {
            update(newHoverColor) {
                currentColor = newHoverColor;
                node.style.backgroundColor = currentColor;
            },
            destroy() {
                node.removeEventListener('mouseout', handleMouseOut);
            }
        };
    }
</script>

<script let: color = 'pink'>
    <div use: hoverAction={color}>
        鼠标移入我，背景色会变成 {color}
    </div>
    <button on: click={() => color = 'lightgreen'}>
        点击改变移入颜色
    </button>
</script>

在这个例子中，当点击按钮时，color 变量的值发生变化，由于 hoverAction 有 update 方法，update 方法会被调用，新的颜色 lightgreen 会应用到 DOM 元素上。

Action 的销毁阶段

当组件被销毁时，Action 也会进入销毁阶段。此时，Action 返回对象中的 destroy 方法会被调用。在 destroy 方法中，我们通常会执行一些清理操作，比如移除之前添加的事件监听器，以避免内存泄漏。例如，在前面的所有 Action 示例中，我们都在 destroy 方法中移除了相应的事件监听器。

自定义事件处理 Action 的应用场景

表单相关的自定义交互

在表单元素中，我们可以使用自定义事件处理 Action 来实现一些特殊的交互逻辑。比如，当用户在输入框中输入特定内容时，触发一个自定义事件，通知表单组件进行某些验证或其他操作。

<script>
    function specialInputAction(node) {
        const handleInput = () => {
            if (node.value === '特殊内容') {
                const customEvent = new CustomEvent('special - input - detected');
                node.dispatchEvent(customEvent);
            }
        };

        node.addEventListener('input', handleInput);

        return {
            destroy() {
                node.removeEventListener('input', handleInput);
            }
        };
    }
</script>

<input type="text" use: specialInputAction on: special - input - detected={() => console.log('检测到特殊输入')} />

在这个例子中，当用户在输入框中输入 特殊内容 时，会触发 special - input - detected 自定义事件，表单组件可以根据这个事件执行相应的验证或其他逻辑。

动画与交互结合

我们可以将自定义事件处理 Action 与动画结合起来。例如，当用户点击一个元素时，触发一个自定义事件，同时启动一个动画效果。

<script>
    function clickAnimationAction(node) {
        const handleClick = () => {
            const customEvent = new CustomEvent('click - animation - start');
            node.dispatchEvent(customEvent);
            node.style.animation = 'bounce 1s ease - in - out';
        };

        node.addEventListener('click', handleClick);

        return {
            destroy() {
                node.removeEventListener('click', handleClick);
                node.style.animation = 'none';
            }
        };
    }
</script>

<style>
    @keyframes bounce {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }

        100% {
            transform: translateY(0);
        }
    }
</style>

<div use: clickAnimationAction on: click - animation - start={() => console.log('动画开始')}>
    点击我触发动画并触发自定义事件
</div>

在这个例子中，当点击 div 元素时，不仅会触发 click - animation - start 自定义事件，还会启动一个名为 bounce 的动画效果。

组件间的通信优化

在复杂的组件结构中，自定义事件处理 Action 可以作为一种有效的组件间通信方式。例如，在一个包含多个子组件的父组件中，子组件可以通过自定义事件将某些信息传递给父组件，而不需要依赖复杂的状态管理库。

<script>
    function childComponentAction(node) {
        const handleSomeEvent = () => {
            const customEvent = new CustomEvent('child - event - to - parent', {
                detail: {
                    dataFromChild: '子组件传递的数据'
                }
            });
            node.dispatchEvent(customEvent);
        };

        node.addEventListener('click', handleSomeEvent);

        return {
            destroy() {
                node.removeEventListener('click', handleSomeEvent);
            }
        };
    }
</script>

<script>
    const handleChildEvent = (event) => {
        console.log(event.detail.dataFromChild);
    };
</script>

<div use: childComponentAction on: child - event - to - parent={handleChildEvent}>
    子组件模拟
</div>

在这个例子中，当点击模拟子组件的 div 元素时，会触发 child - event - to - parent 自定义事件，并传递数据给父组件。父组件通过监听这个事件来处理子组件传递的数据。

优化自定义事件处理 Action 的性能

减少不必要的事件触发

在定义自定义事件处理 Action 时，要注意避免不必要的事件触发。例如，如果一个 Action 监听了 mousemove 事件，并且在事件处理函数中触发自定义事件，可能会导致大量的事件触发，影响性能。在这种情况下，可以考虑使用防抖（Debounce）或节流（Throttle）技术。

防抖（Debounce）

防抖是指在一定时间内，如果事件被频繁触发，只执行最后一次。我们可以通过一个定时器来实现防抖功能。

<script>
    function debounceAction(node) {
        let timer;
        const handleScroll = () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                const customEvent = new CustomEvent('debounced - scroll');
                node.dispatchEvent(customEvent);
            }, 300);
        };

        node.addEventListener('scroll', handleScroll);

        return {
            destroy() {
                node.removeEventListener('scroll', handleScroll);
                clearTimeout(timer);
            }
        };
    }
</script>

<div use: debounceAction on: debounced - scroll={() => console.log('防抖后的滚动事件')} style="height: 200px; overflow - y: scroll;">
    滚动我触发防抖后的自定义事件
</div>

在这个例子中，当用户滚动 div 元素时，handleScroll 函数会被调用。每次调用时，会清除之前设置的定时器，并重新设置一个新的定时器，延迟 300 毫秒后触发自定义事件。这样，如果用户在 300 毫秒内持续滚动，只会触发一次自定义事件。

节流（Throttle）

节流是指在一定时间内，无论事件触发多么频繁，都只执行一次。我们可以通过记录上次执行的时间来实现节流功能。

<script>
    function throttleAction(node) {
        let lastTime = 0;
        const handleResize = () => {
            const now = new Date().getTime();
            if (now - lastTime >= 500) {
                const customEvent = new CustomEvent('throttled - resize');
                node.dispatchEvent(customEvent);
                lastTime = now;
            }
        };

        node.addEventListener('resize', handleResize);

        return {
            destroy() {
                node.removeEventListener('resize', handleResize);
            }
        };
    }
</script>

<div use: throttleAction on: throttled - resize={() => console.log('节流后的窗口大小改变事件')}>
    改变窗口大小触发节流后的自定义事件
</div>

在这个例子中，当窗口大小改变时，handleResize 函数会被调用。通过比较当前时间和上次执行时间，如果间隔大于等于 500 毫秒，则触发自定义事件，并更新 lastTime。这样，在每 500 毫秒内，无论窗口大小改变多么频繁，都只会触发一次自定义事件。

合理管理事件监听器

在 Action 中添加事件监听器时，要确保在组件销毁时正确移除事件监听器，以避免内存泄漏。同时，要注意不要重复添加相同的事件监听器。例如，可以在 Action 函数内部设置一个标志变量，记录是否已经添加了某个事件监听器。

<script>
    function singleListenerAction(node) {
        let isAdded = false;
        const handleClick = () => {
            const customEvent = new CustomEvent('single - click - event');
            node.dispatchEvent(customEvent);
        };

        if (!isAdded) {
            node.addEventListener('click', handleClick);
            isAdded = true;
        }

        return {
            destroy() {
                if (isAdded) {
                    node.removeEventListener('click', handleClick);
                }
            }
        };
    }
</script>

<div use: singleListenerAction on: single - click - event={() => console.log('只添加一次点击监听器的自定义事件')}>
    点击我触发只添加一次监听器的自定义事件
</div>

在这个例子中，通过 isAdded 变量来判断是否已经添加了 click 事件监听器，避免重复添加。在组件销毁时，也会根据这个标志变量来正确移除事件监听器。

优化自定义事件的数据传递

在自定义事件中传递数据时，要尽量避免传递过大或不必要的数据。传递的数据应该是组件处理事件所必需的最小数据集合。例如，如果只需要知道某个元素是否被点击，那么在自定义事件的 detail 中只传递一个布尔值即可，而不需要传递整个元素的所有属性。

<script>
    function simpleClickAction(node) {
        const handleClick = () => {
            const customEvent = new CustomEvent('simple - click', {
                detail: true
            });
            node.dispatchEvent(customEvent);
        };

        node.addEventListener('click', handleClick);

        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }
</script>

<div use: simpleClickAction on: simple - click={event => console.log(event.detail? '已点击' : '未点击')}>
    点击我触发简单数据传递的自定义事件
</div>

在这个例子中，自定义事件 simple - click 只传递了一个布尔值 true，表示元素被点击，这样可以减少数据传递的开销。

自定义事件处理 Action 的常见问题与解决方法

事件监听器未正确移除

有时候，在组件销毁时，事件监听器可能没有正确移除，导致内存泄漏。这通常是由于 destroy 方法没有正确实现，或者在 destroy 方法中没有正确调用 removeEventListener。解决这个问题的方法是仔细检查 destroy 方法的实现，确保事件监听器被正确移除。同时，可以在开发环境中使用浏览器的性能分析工具，如 Chrome DevTools 的 Memory 面板，来检测内存泄漏问题。

自定义事件在某些浏览器中不兼容

虽然 CustomEvent 是一个标准的 Web API，但在某些旧版本的浏览器中可能存在兼容性问题。为了解决这个问题，可以使用 polyfill。例如，下面是一个简单的 CustomEvent polyfill：

<script>
    if (typeof window.CustomEvent === 'undefined') {
        (function () {
            function CustomEvent(event, params) {
                params = params || {
                    bubbles: false,
                    cancelable: false,
                    detail: undefined
                };
                const evt = document.createEvent('CustomEvent');
                evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
                return evt;
            }

            CustomEvent.prototype = window.Event.prototype;
            window.CustomEvent = CustomEvent;
        })();
    }
</script>

将这段代码放在项目的入口文件中，可以确保在不支持 CustomEvent 的浏览器中也能正常使用自定义事件。

Action 参数更新未正确处理

如果 Action 支持参数更新，但在参数更新时没有正确处理，可能会导致组件行为异常。例如，在前面带有 update 方法的 hoverAction 例子中，如果 update 方法没有正确更新 DOM 元素的背景颜色，就会出现问题。解决这个问题的关键是确保 update 方法正确处理新的参数，并根据参数变化更新 DOM 元素的状态。同时，可以在 update 方法中添加调试语句，以便在开发过程中发现和解决问题。

总结自定义事件处理 Action 的优势与局限

优势

  1. 代码复用性高：通过将自定义事件处理逻辑封装在 Action 中，可以在多个组件中复用相同的功能。例如，前面定义的 doubleClickAction 可以在不同的组件中使用，而不需要重复编写双击事件处理的代码。
  2. 分离 DOM 操作与组件逻辑：Action 使得 DOM 相关的操作和事件处理逻辑与组件的主要业务逻辑分离。这样，组件的代码更加清晰和易于维护，同时也提高了代码的可测试性。
  3. 灵活的事件处理：可以根据具体需求创建各种自定义事件，实现灵活的交互逻辑。无论是表单验证、动画触发还是组件间通信，都可以通过自定义事件处理 Action 来实现。

局限

  1. 学习成本：对于初学者来说，Svelte 的 Action 以及基于 Action 的自定义事件处理可能具有一定的学习成本。需要理解 Action 的定义、生命周期以及 CustomEvent 的使用等概念。
  2. 兼容性问题：如前面提到的，CustomEvent 在某些旧版本浏览器中存在兼容性问题，需要使用 polyfill 来解决。同时，一些特殊的 DOM 事件和自定义事件处理逻辑可能在不同浏览器中表现略有差异，需要进行兼容性测试。
  3. 性能问题：如果不正确使用 Action 和自定义事件，可能会导致性能问题，如过多的事件触发、内存泄漏等。需要开发者在编写代码时注意性能优化，合理使用防抖、节流等技术，正确管理事件监听器。

总的来说，Svelte 的自定义事件处理 Action 是一个非常强大的功能，在正确使用的情况下，可以大大提高前端开发的效率和代码质量。通过深入理解其原理、应用场景以及优化方法，开发者可以充分发挥其优势，避免其局限，打造出高性能、交互丰富的前端应用。