面试题：Svelte 中如何通过模块化来组织代码以实现可维护的项目结构

Question

在 Svelte 项目中，解释如何利用 Svelte 组件的模块化特性来组织代码，例如不同功能模块如何拆分成独立的组件，以及组件之间如何进行有效的通信和数据传递，以构建一个可维护的项目结构。请结合实际代码示例说明。

Answer 1

利用 Svelte 组件模块化特性组织代码

1. 拆分不同功能模块为独立组件
   • 例如，假设我们正在构建一个简单的待办事项应用。可以将待办事项列表展示、添加待办事项输入框、单个待办事项项等功能拆分成不同的组件。
   • 首先创建 TodoList.svelte 组件用于展示整个待办事项列表：

<script>
    let todos = [];
</script>

<ul>
    {#each todos as todo}
        <TodoItem {todo} />
    {/each}
</ul>

<AddTodo on:addTodo={(e) => { todos.push(e.detail); }} />

• 然后创建 TodoItem.svelte 组件用于展示单个待办事项项：

<script>
    export let todo;
</script>

<li>{todo.text}</li>

• 再创建 AddTodo.svelte 组件用于添加新的待办事项：

<script>
    let newTodo = '';
    const handleSubmit = (e) => {
        e.preventDefault();
        const todo = { text: newTodo };
        newTodo = '';
        dispatch('addTodo', todo);
    };
</script>

<form on:submit={handleSubmit}>
    <input type="text" bind:value={newTodo} placeholder="Add a new todo" />
    <button type="submit">Add</button>
</form>

• 在上述代码中，TodoList.svelte 组件负责管理整个待办事项列表的状态和渲染，它将单个待办事项的渲染任务交给 TodoItem.svelte 组件，将添加待办事项的功能交给 AddTodo.svelte 组件，实现了功能模块的拆分。

2. 组件之间的通信和数据传递
   • 父组件向子组件传递数据：在 TodoList.svelte 中，通过属性传递的方式将 todo 对象传递给 TodoItem.svelte 组件，如 <TodoItem {todo} />。在子组件 TodoItem.svelte 中，使用 export let todo; 来接收父组件传递的数据。
   • 子组件向父组件传递数据：在 AddTodo.svelte 组件中，通过 dispatch 方法触发一个自定义事件 addTodo，并传递新创建的待办事项数据。在父组件 TodoList.svelte 中，通过 <AddTodo on:addTodo={(e) => { todos.push(e.detail); }} /> 监听这个自定义事件，并将新的待办事项添加到 todos 数组中，从而实现了子组件向父组件的数据传递。

通过这样的方式，利用 Svelte 组件的模块化特性，可以构建一个结构清晰、易于维护的项目结构。每个组件专注于自己的功能，通过合理的通信和数据传递协同工作。