（6）svelte 教程： Conditionals（判断）和# Components（组件）

（6）svelte 教程： Conditionals（判断）和# Components（组件）

什么是 Conditionals

Conditionals（条件语句） 是编程中的一种控制结构，用于根据特定条件执行不同的代码块。在 Svelte 中，条件语句可以使用 {#if ...}{:else if ...}{:else}{/if} 块来实现，根据条件动态显示或隐藏某些内容。

逐行解释代码

以下是示例代码的详细逐行解释，包括每个参数和背后的含义：

<script>
    let num = 15;
</script>

<main>
  {#if num > 10}
    <p>Greater than 10</p>
  {:else if num > 5}
    <p>Greater than 5</p>
  {:else}
    <p>less than 5</p>
  {/if}
</main>

• let num = 15;
  • 声明一个名为 num 的变量，并将其初始值设置为 15。这是一个简单的数字变量，用于后续的条件判断。

部分

• <main>：

  • HTML <main> 元素，用于包裹组件的主要内容。

• {#if num > 10}

  • Svelte 的条件语句起始部分，使用 {#if ...} 语法。
  • num > 10：这是一个布尔表达式，用于判断 num 是否大于 10。如果条件为 true，则执行其后的代码块。

• <p>Greater than 10</p>：

  • HTML <p> 段落元素。当 num > 10 为 true 时，这个段落元素将会被渲染，显示内容为 “Greater than 10”。

• {:else if num > 5}

  • Svelte 的条件语句的 else if 分支，使用 {:else if ...} 语法。
  • num > 5：这是一个布尔表达式，用于判断 num 是否大于 5。如果 num > 10 为 false 且 num > 5 为 true，则执行其后的代码块。

• <p>Greater than 5</p>：

  • HTML <p> 段落元素。当 num > 5 为 true 且 num <= 10 时，这个段落元素将会被渲染，显示内容为 “Greater than 5”。

• {:else}

  • Svelte 的条件语句的 else 分支，使用 {:else} 语法。如果前面的所有条件都为 false，则执行其后的代码块。

• <p>less than 5</p>：

  • HTML <p> 段落元素。当 num <= 5 时，这个段落元素将会被渲染，显示内容为 “less than 5”。

• {/if}

  • 结束 Svelte 的条件语句块。

代码逻辑和执行过程

1. 初始化变量 num，值为 15。
2. 进入 <main> 标签内的内容。
3. 进行条件判断：

• 首先判断 num > 10 是否为 true。由于 num 的值为 15，条件 num > 10 为 true，因此渲染 <p>Greater than 10</p>。
• 由于 num > 10 条件已经为 true 并执行了相应的代码块，后续的 {:else if num > 5} 和 {:else} 分支将不会被执行。

4. 如果 num 的值被改变，重新评估条件语句，并根据新的值动态更新 DOM，显示对应的段落内容。

总结

通过使用 Svelte 的条件语句 {#if ...}{:else if ...}{:else}{/if}，可以根据变量 num 的值动态显示不同的内容。这种机制使得在应用程序中处理不同的状态和情况变得非常简便和直观。

Components 调用流程

什么是 Components

Components（组件） 是用户界面中的独立、可重用的部分，它们可以组合在一起构建复杂的应用程序。每个组件封装了自己的逻辑、模板和样式，便于管理和复用。在 Svelte 中，组件是通过 .svelte 文件定义的，这些文件包含了组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）。

逐行解释代码

我们将逐行解释示例代码，包括每个参数和背后的含义。

App.svelte

<script>
    import Modal from './Modal.svelte';
</script>

<Modal />

<main>

</main>

• <script>：

  • 该标签用于编写 JavaScript 代码，包含组件的逻辑部分。

• import Modal from './Modal.svelte';：

  • 这行代码从当前目录导入了名为 Modal 的组件。Modal.svelte 是一个独立的 Svelte 组件文件，通过 import 语法将其引入到当前组件中。

• <Modal />：

  • 这是一个自定义组件的实例，用于在 App.svelte 组件中嵌入和显示 Modal 组件。使用自闭合标签 <Modal /> 来表示组件实例。

• <main>：

  • HTML <main> 元素，用于包裹应用的主要内容。在这个示例中，<main> 元素是空的，但通常用于包含应用的核心内容。

Modal.svelte

<script>
    let showModal = true;
</script>

{#if showModal}
    <div class="backdrop">
        <div class="modal">
            <p>Sign up for offers!</p>
        </div>
    </div>
{/if}

<style>

</style>

• <script>：

  • 该标签用于编写 JavaScript 代码，包含组件的逻辑部分。

• let showModal = true;：

  • 声明一个名为 showModal 的变量，并将其初始值设置为 true。该变量用于控制模态框的显示状态。

• {#if showModal} ... {/if}：

  • Svelte 的条件语句块，用于根据 showModal 变量的值动态显示或隐藏内容。当 showModal 为 true 时，条件块内的内容将被渲染；当 showModal 为 false 时，条件块内的内容将被移除。

• <div class="backdrop">：

  • HTML <div> 元素，具有 backdrop 类，用于定义模态框的背景。

• <div class="modal">：

  • HTML <div> 元素，具有 modal 类，用于定义模态框的内容区域。

• <p>Sign up for offers!</p>：

  • HTML <p> 段落元素，包含模态框的提示文本 “Sign up for offers!”。

• <style>：

  • 该标签用于编写组件的样式部分。在这个示例中，样式部分是空的，但通常用于定义组件的 CSS 样式。

代码逻辑和执行过程

1. App.svelte：

• 引入并实例化 Modal 组件，显示 Modal 组件的内容。
• 主体部分 <main> 可以包含更多内容和其他组件。

2. Modal.svelte：

• 声明 showModal 变量并设置为 true。
• 使用条件语句 {#if showModal} 判断是否显示模态框内容。
• 如果 showModal 为 true，则渲染模态框背景和内容。

代码总结

这个示例展示了如何在 Svelte 中创建和使用组件。通过 import 语法引入 Modal 组件，并在 App.svelte 中实例化和使用它。条件语句块 {#if showModal} 控制模态框的显示状态，使得组件能够根据应用状态动态更新内容。这样可以实现组件的复用和独立管理，提升代码的可维护性和扩展性。