面试题：Svelte利用context="module"处理复杂模块依赖

Question

假设你正在开发一个具有多层嵌套组件且存在复杂数据交互的Svelte应用，如何借助context="module"来优雅地处理模块间的依赖关系，保证数据传递的高效性与可维护性？请详细阐述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 定义上下文模块：使用context="module"创建一个模块级别的上下文。在这个模块中，定义共享的数据和方法。这样可以在整个应用的相关模块中方便地访问这些内容，避免通过层层传递props来共享数据。
2. 数据初始化：在上下文模块中初始化需要共享的数据。这些数据可以是全局状态、配置信息等。
3. 提供访问接口：为其他组件提供获取和修改共享数据的方法。这样可以控制对共享数据的访问，保证数据的一致性和可维护性。
4. 组件接入：在需要使用共享数据的组件中，引入上下文模块，通过模块提供的接口来获取和使用数据。

关键代码示例

1. 创建上下文模块（例如context.js）

// context.js
let sharedData = {
    user: null,
    settings: {}
};

export function getSharedData() {
    return sharedData;
}

export function setSharedData(newData) {
    sharedData = {...sharedData, ...newData };
}

2. 使用上下文模块的组件（例如App.svelte）

<script context="module">
    import { getSharedData, setSharedData } from './context.js';

    const initData = {
        user: { name: 'John' },
        settings: { theme: 'light' }
    };
    setSharedData(initData);
</script>

<script>
    import { getSharedData } from './context.js';
    const data = getSharedData();
</script>

<div>
    <p>User: {data.user.name}</p>
    <p>Theme: {data.settings.theme}</p>
</div>

3. 子组件（例如Child.svelte）

<script>
    import { getSharedData, setSharedData } from './context.js';
    const data = getSharedData();

    function updateTheme() {
        setSharedData({ settings: {...data.settings, theme: 'dark' } });
    }
</script>

<button on:click={updateTheme}>Switch to Dark Theme</button>