面试题：Svelte中模块上下文与Action如何基础协同应用

Question

在Svelte项目中，简单描述模块上下文（module context）和Action各自的作用，并且举例说明它们是如何协同工作的，例如在一个按钮点击改变样式的场景下如何实现？

Answer 1

模块上下文（module context）的作用

模块上下文指的是模块内的作用域，它定义了模块内变量、函数等的访问范围。在 Svelte 中，模块上下文用于封装逻辑和状态，使得不同部分的代码可以相互独立又能通过导出接口进行交互。比如可以在模块内定义一些私有的函数和变量，仅在模块内部使用，同时通过 export 关键字导出需要外部访问的部分。

Action 的作用

Action 是 Svelte 提供的一种给 DOM 元素添加自定义行为的方式。它允许开发者将一些与 DOM 操作相关的逻辑封装起来，并应用到特定的元素上。例如，给一个按钮添加点击防抖功能，或者给一个输入框添加自动聚焦功能等。

协同工作示例（按钮点击改变样式场景）

<script>
    // 定义一个模块上下文内的变量来控制样式
    let isClicked = false;

    // 定义一个 Action
    function changeColorOnClick(node) {
        const handleClick = () => {
            isClicked =!isClicked;
            node.style.color = isClicked? 'red' : 'black';
        };
        node.addEventListener('click', handleClick);
        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }
</script>

<button use:changeColorOnClick>点击改变颜色</button>

在上述代码中，模块上下文定义了 isClicked 变量来跟踪按钮是否被点击。Action changeColorOnClick 则给按钮元素添加了点击事件处理函数，在点击时改变 isClicked 的值，并根据其值改变按钮的颜色。这里模块上下文提供了状态，而 Action 将状态变化与 DOM 样式操作关联起来，实现了两者的协同工作。