面试题：Svelte readable store在复杂业务场景下的应用

Store结构设计

定义基础数据结构：首先，根据应用需求确定readable store中数据的基础结构。例如，如果是管理商品列表，可能是一个包含商品对象的数组。假设商品对象有id、name、price等属性，store结构如下：

import { readable } from'svelte/store';

const initialData = [
    { id: 1, name: 'Product 1', price: 100 },
    { id: 2, name: 'Product 2', price: 200 }
];

const dataStore = readable(initialData, set => {
    return () => {
        // 清理逻辑，如取消可能的订阅
    };
});

export default dataStore;

添加元数据（可选）：如果需要记录筛选和排序的条件等信息，可以在store中添加元数据。例如：

import { readable } from'svelte/store';

const initialData = [
    { id: 1, name: 'Product 1', price: 100 },
    { id: 2, name: 'Product 2', price: 200 }
];

const initialMetadata = {
    filter: '',
    sortBy: 'id'
};

const combinedStore = readable({ data: initialData, metadata: initialMetadata }, set => {
    return () => {
        // 清理逻辑
    };
});

export default combinedStore;

数据更新逻辑

隔离更新逻辑：为了确保不影响其他依赖该store的组件正常显示，在更新数据时采用不可变数据模式。例如，当接收到新的筛选和排序操作结果时，创建新的数据副本并更新store。

import { readable, writable } from'svelte/store';

const dataStore = readable([], set => {
    // 这里假设初始为空数组
    return () => {
        // 清理逻辑
    };
});

const updateData = (newData) => {
    const newDataCopy = [...newData]; // 创建新的副本
    dataStore.set(newDataCopy);
};

export { dataStore, updateData };

处理复杂操作：对于复杂的筛选和排序操作，在单独的函数中实现这些逻辑。例如，假设筛选函数filterData和排序函数sortData：

const filterData = (data, filterText) => {
    return data.filter(item => item.name.includes(filterText));
};

const sortData = (data, sortBy) => {
    return data.sort((a, b) => {
        if (sortBy === 'id') {
            return a.id - b.id;
        } else if (sortBy === 'price') {
            return a.price - b.price;
        }
        return 0;
    });
};

const performComplexOperations = (data, filterText, sortBy) => {
    let filtered = filterData(data, filterText);
    return sortData(filtered, sortBy);
};

然后在更新store时调用这个函数：

import { readable, writable } from'svelte/store';

const dataStore = readable([], set => {
    // 初始为空数组
    return () => {
        // 清理逻辑
    };
});

const updateData = (data, filterText, sortBy) => {
    const newData = performComplexOperations(data, filterText, sortBy);
    const newDataCopy = [...newData];
    dataStore.set(newDataCopy);
};

export { dataStore, updateData };

组件间通信方式

通过上下文（Context API）：
- 在Svelte中，可以使用setContext和getContext来实现组件间通信。首先，在父组件中设置上下文：

<script>
    import { setContext } from'svelte';
    import { dataStore, updateData } from './stores.js';

    setContext('dataContext', { dataStore, updateData });
</script>

{#if false}
    <!-- 可以在这里放置子组件 -->
{/if}

- 然后，在需要操作数据的组件中获取上下文：

<script>
    import { getContext } from'svelte';

    const { updateData } = getContext('dataContext');
    const handleComplexOperations = () => {
        // 获取筛选和排序条件
        const filterText = 'Product';
        const sortBy = 'price';
        // 假设从其他地方获取到原始数据
        const originalData = [
            { id: 1, name: 'Product 1', price: 100 },
            { id: 2, name: 'Product 2', price: 200 }
        ];
        updateData(originalData, filterText, sortBy);
    };
</script>

<button on:click={handleComplexOperations}>Perform Operations</button>

通过事件机制：
- 在触发复杂操作的组件中，通过createEventDispatcher来派发事件：

<script>
    import { createEventDispatcher } from'svelte';

    const dispatch = createEventDispatcher();
    const performOperations = () => {
        const filterText = 'Product';
        const sortBy = 'price';
        dispatch('complex-operations', { filterText, sortBy });
    };
</script>

<button on:click={performOperations}>Perform Operations</button>

- 在负责更新`store`的组件中监听事件：

<script>
    import { dataStore, updateData } from './stores.js';

    const handleComplexOperations = (event) => {
        const { filterText, sortBy } = event.detail;
        // 假设从其他地方获取到原始数据
        const originalData = [
            { id: 1, name: 'Product 1', price: 100 },
            { id: 2, name: 'Product 2', price: 200 }
        ];
        updateData(originalData, filterText, sortBy);
    };

    $: on('complex-operations', handleComplexOperations);
</script>

星途面试题库

面试题：Svelte readable store在复杂业务场景下的应用

知识考点

面试题答案

Store结构设计

数据更新逻辑

组件间通信方式