面试题：Svelte组件如何实现高内聚

Question

在Svelte开发中，阐述你对高内聚原则的理解，并举例说明如何设计Svelte组件以实现高内聚，比如从组件的功能、数据处理等方面进行分析。

Answer 1

对高内聚原则的理解

高内聚原则指一个模块（在Svelte中可理解为组件）内的各个元素（如功能、数据处理逻辑等）紧密相关，它们共同完成单一、明确的任务。高内聚的组件具有更好的可维护性、可测试性和可复用性，因为其职责清晰，修改一处逻辑不会过多影响其他不相关部分。

设计Svelte组件实现高内聚示例

从功能方面

假设我们要创建一个简单的计数器组件。一个高内聚的计数器组件应专注于实现计数相关功能，而不是包含其他不相关功能。例如：

<script>
    let count = 0;
    const increment = () => {
        count++;
    };
    const decrement = () => {
        if (count > 0) {
            count--;
        }
    };
</script>

<button on:click={decrement}>-</button>
<span>{count}</span>
<button on:click={increment}>+</button>

此组件的功能仅围绕计数器的增减，所有功能都紧密关联，这就是高内聚在功能方面的体现。

从数据处理方面

以一个显示用户信息的组件为例。组件应该只处理与显示用户信息直接相关的数据。

<script>
    // 接收外部传递的用户数据
    export let user = {name: '', age: 0};
    // 格式化用户信息数据处理，仅用于组件内显示相关
    const formatUserInfo = () => {
        return `${user.name}, ${user.age}岁`;
    };
</script>

<p>{formatUserInfo()}</p>

该组件只处理与显示用户信息直接相关的数据，对数据的获取（从外部接收）和处理（格式化显示）都围绕显示用户信息这一单一目的，实现了高内聚的数据处理。