面试题：Svelte的writable store在复杂计数器应用中的优化

Question

假设要构建一个具有多种计数模式（如递增、递减、翻倍、减半）且支持重置功能的复杂计数器应用，使用Svelte的writable store，如何设计代码结构以提高性能和可维护性？请描述关键的设计思路和代码片段示例。

Answer 1

关键设计思路

1. 分离关注点：将计数器的逻辑和UI分离。使用Svelte的store来管理计数器的状态，组件负责展示和与用户交互。
2. 模块化：为每种计数模式创建单独的函数，这样可以提高代码的可维护性和可复用性。
3. 性能优化：减少不必要的重新渲染。Svelte的响应式系统会自动跟踪依赖，只有相关数据变化时才会触发组件更新。

代码片段示例

1. 创建writable store

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

    // 创建计数器的writable store
    const counter = writable(0);
</script>

2. 定义计数模式函数

<script>
    const increment = () => {
        counter.update(n => n + 1);
    };

    const decrement = () => {
        counter.update(n => n - 1);
    };

    const double = () => {
        counter.update(n => n * 2);
    };

    const halve = () => {
        counter.update(n => n / 2);
    };

    const reset = () => {
        counter.set(0);
    };
</script>

3. 组件部分

<script>
    import { counter, increment, decrement, double, halve, reset } from './counterLogic.js';
</script>

<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>
<button on:click={double}>Double</button>
<button on:click={halve}>Halve</button>
<button on:click={reset}>Reset</button>

{#if $counter}
    <p>The counter value is: {$counter}</p>
{/if}

在上述代码中，counterLogic.js文件可以用于存放计数器的逻辑函数和writable store的定义，使得组件文件更加简洁，关注点分离。组件通过导入相关函数和store来实现计数器的各种功能。