面试题：Svelte中context="module"的作用及基本使用场景

作用

在Svelte中，context="module" 表示该脚本块为模块级上下文。这意味着脚本中的变量和函数作用域局限于该模块，不会污染全局命名空间。同时，这也允许在模块内定义顶级的响应式状态和函数，这些状态和函数可在整个模块中复用，且模块之间相互隔离，互不干扰。

常见使用场景

模块级状态管理：

假设我们正在构建一个可复用的组件库，其中一个组件需要维护自己独立的模块级状态。例如，一个分页组件，它需要跟踪当前页码、总页数等信息。通过 context="module"，我们可以在模块内定义这些状态变量，并且不用担心这些变量名与其他组件的变量名冲突。

<!-- Pagination.svelte -->
<script context="module">
    let currentPage = 1;
    let totalPages = 10;

    function goToPage(page) {
        if (page >= 1 && page <= totalPages) {
            currentPage = page;
        }
    }
</script>

<button on:click={() => goToPage(currentPage - 1)} disabled={currentPage === 1}>Previous</button>
<span>{currentPage} of {totalPages}</span>
<button on:click={() => goToPage(currentPage + 1)} disabled={currentPage === totalPages}>Next</button>

模块级工具函数：

当我们有一组与组件紧密相关但又不需要暴露给外部的工具函数时，可以使用 context="module" 来定义它们。比如在一个图表组件中，可能有一些用于计算坐标、格式化数据等内部使用的函数。

<!-- Chart.svelte -->
<script context="module">
    function calculateCoordinates(data) {
        // 具体的坐标计算逻辑
        return data.map(d => ({ x: d.x * 10, y: d.y * 10 }));
    }

    function formatData(data) {
        // 数据格式化逻辑
        return data.map(d => d.toFixed(2));
    }
</script>

<script>
    let chartData = [1, 2, 3, 4];
    let coordinates = calculateCoordinates(chartData);
    let formattedData = formatData(chartData);
</script>

<!-- 图表绘制相关代码，使用 coordinates 和 formattedData -->

星途面试题库

面试题：Svelte中context="module"的作用及基本使用场景

知识考点

面试题答案

作用

常见使用场景