面试题：Svelte中如何通过自定义逻辑实现组件代码复用

1. 自定义 Actions

概念：Actions 是一种给 DOM 元素附加自定义行为的方式。在组件间复用逻辑时，可将特定的 DOM 操作相关逻辑封装成 action。
示例：假设我们有一个需要自动聚焦的输入框逻辑，在多个组件中可能会用到。

<script>
    // 自定义 action
    function autofocus(node) {
        node.focus();
        return {
            destroy() {
                // 清理逻辑，这里如果有后续需要清理的可添加
            }
        };
    }
</script>

<input use:autofocus type="text" placeholder="自动聚焦输入框">

复用：在其他组件中，只需引入这个 action 并使用 use 指令，就可以复用自动聚焦逻辑。

2. 自定义 Stores

概念：Stores 是 Svelte 中用于管理状态的机制。自定义 stores 可以封装复杂的状态管理逻辑，方便在多个组件间共享。
示例：创建一个简单的计数 store。

<script>
    import { writable } from'svelte/store';

    // 自定义 store
    function createCounter() {
        const { subscribe, set, update } = writable(0);

        return {
            subscribe,
            increment: () => update(n => n + 1),
            decrement: () => update(n => n - 1),
            reset: () => set(0)
        };
    }

    const counter = createCounter();
</script>

<button on:click={() => counter.increment()}>Increment</button>
<button on:click={() => counter.decrement()}>Decrement</button>
<button on:click={() => counter.reset()}>Reset</button>
<p>Count: {$counter}</p>

复用：在不同组件中，引入这个自定义 store 实例，就可以共享和操作这个计数状态。例如在另一个组件中：

<script>
    import { counter } from './CounterStore.js';
</script>

<p>Shared Count: {$counter}</p>

通过自定义 actions 和 stores，Svelte 提供了强大的组件间代码复用能力，提升开发效率与代码可维护性。

星途面试题库

面试题：Svelte中如何通过自定义逻辑实现组件代码复用

知识考点

面试题答案

1. 自定义 Actions

2. 自定义 Stores