NgSysV.创建一个简单的 Reactive Svelte Web 应用程序

该帖子系列已在 NgateSystems.com 上建立索引。您还可以在那里找到超级有用的关键字搜索工具。

最后评论：24 年 11 月

一、简介

上一篇文章创建了一个完全由简单 HTML 组成的 Svelte Web 应用程序。它不包含任何 Javascript，因此没有使用 Svelte 任何复杂的动态 HTML 生成工具。这篇文章只会触及 Svelte 功能的表面，但应该能让您感受到该语言的强大功能。

2. 状态和反应性

客观地来看，Web 应用程序是 HTML 页面、弹出窗口、表格、表单和按钮的复杂层次结构。这种令人眼花缭乱的视觉元素组合是由数据“告知”的。 表格中充满了 JavaScript 数组内容。弹出窗口根据标志字段的要求出现和消失。当鼠标和键盘输入“戳”时，表格中的数据就会绽放出来。简而言之 - 这很复杂。在这种情况下如何建立某种秩序？

总的来说，定义 Web 应用程序在任何时刻的外观的数据体称为 Web 应用程序的 状态。我们在软件开发技术上投入了大量精力，旨在让编写在状态变化时能够有效地做出反应的网络应用程序变得更加容易。像 Svelte 这样的平台专门设计用于提供良好的反应性。

让我们看看 Svelte 对 State 的定义方法及其 Reactivity 的实现。

2.1 一个简单的反应式Web应用程序

网页上的一个常见功能是一个弹出窗口，当您启动它时，它会显示（通常很烦人），但当您单击它时，它会自动消失。让我们看看 Svelte 如何让您使用 State 和 Reactivity 在 Web 应用程序中实现这一点。

在Javascript中，你需要先定义一个变量，然后才能使用它。例如，像
这样的命令

console.log(myDataItem);

将抛出错误，除非在代码的较早位置您使用类似
的语句定义了它

let myDataItem;

顺便说一句，您会发现访问“游乐场”很有用，它可以让您快速尝试像这样的 JavaScript 代码。任何浏览器页面的“检查”视图都提供了这样一个游乐场 - 在随机页面上打开检查器并选择其菜单栏上的“控制台”选项卡。或者，您也可以尝试 PlayCode 上的 javascript 控制台。

关于 JavaScript 的 let 关键字有很多话要说（尝试向 chatGPT 询问“范围”），但 let 在 Svelte 中还有额外的意义，因为这就是定义 State 的方式。在 Svelte 程序中，任何使用 let 定义的变量都会成为程序状态的一部分。

那又怎样？好吧，我之前说过状态变量——定义 web 应用程序外观的变量——是“反应性的”。这意味着当它们的值发生变化时，Web 应用程序的外观会自动进行相应的更改。 假设您使用 popupVisible 布尔变量来定义弹出窗口的状态。 Svelte（反应式平台）可以使用变量的值来确定弹出窗口是否可见吗？我们来试试吧。

这是我建议使用的代码。我将在一分钟内解释它的作用：

//src/routes/ page.svelte - 在运行之前删除此行

    让 popupVisible = true;

    函数切换弹出（）{
        popupVisible = !popupVisible;
    }
</脚本>

<div>
    {#if popupVisible}
        



<p>这里的代码分为两部分。上面的“脚本”部分由 <script></script> 定义。标签，声明一个 popupVisible javascript 变量和一个togglePopup() 函数。下方的“模板”部分指定由 Svelte {#if} {/if} 逻辑块“调节”的 HTML。 Svelte 代码可以引用 <script> 中定义的变量和函数。指导 HTML 代码生成的部分。引用用大括号 {} 括起来，除非直接在逻辑块中使用它们 - 有关完整详细信息，请参阅基本标记和逻辑块中的 Svelte 文档。</script></p>

<p>上面显示的代码非常粗糙。 “弹出窗口”通常由 </p>
<div> 定义。使用边框和一些定位 CSS 格式化的标签。在这里我使用了一个 <button>标签 - 更常用于定义表单上的“提交”元素。我这样做只是因为它使我能够避免一些可能分散您注意力的技术问题。我已将“弹出”按钮涂成蓝色，以便您可以看到它。

<p>如果您仍然有在 2.1 后创建的 svelte-dev Svelte 项目骨架的副本，请尝试使用此代码替换 src/routes/ page.svelte 的全部内容。当您在项目上打开终端并像以前一样启动开发服务器时，您的浏览器现在应该会启动并显示如下所示的屏幕：</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>蓝色矩形是“弹出窗口”。它在启动时显示，因为此时 popupVisible 变量设置为 true，并且指示驱动页面 HTML 生成的 Svelte 逻辑创建一个 <button> 按钮。在这种情况下标记。</button></p>

<p>现在尝试单击弹出窗口。魔法！它消失了。这是因为 指定弹出窗口的标记包含一个 onClick 子句，该子句使单击元素运行togglePopup 函数。这又将 popupVisible 变量设置为 false。</p>
<p>我之前说过，更改 Svelte“状态”变量会导致 Svelte 通过重新运行页面的模板部分来刷新屏幕。因此，模板部分重新运行，现在，由于 popupVisible 的值为 false，因此 <button> 会显示出来。显示弹出窗口的代码被绕过，留下一个空白页面。</button></p>

<p>现在花点时间来理解这一点。如果您仍在使用我在 1.1 篇文章中介绍的原始 DOM 操作代码，那么这种效果只能通过编写大量相当技术性的代码（并且可能是相当低效）低级代码。在这里，您只需更改变量的值。 Sveltekit 已经<strong>自动</strong>处理了复杂的后果（而且，放心，高效）。 </p>

<p>简而言之，Svelte 为您提供了一种高级语言，让您将浏览器屏幕管理的繁琐细节留给框架。  </p>

<p><em>2024 年 10 月，Svelte 5 对其反应性定义安排进行了一系列改进。上面描述的 let 结构仍然适用于本系列文章中的所有内容，但现在可以使用新的符文概念来处理更复杂的需求。有关详细信息，请参阅什么是符文。</em></p>

<h4>
  
  
  2.2 数据输入
</h4>

<p>让我们让弹出窗口变得更有趣一点。想象一下，您的工作是维护一家制造公司的“产品”列表。您需要一个实用程序来显示当前列表并允许您添加新产品。当然，在实践中，您还希望它能够编辑和删除条目，但现在让我们保持简单。 </p>

<p>看看下面的代码。它可能会扩展您的 JavaScript 知识，但内部注释应该会有所帮助。<br>
</p>

<pre class="brush:php;toolbar:false">//src/routes/ page.svelte - 在运行之前删除此行

    让 popupVisible = false;
    让新产品编号 = "";
    让产品= []； // 产品对象数组 {productNumber: ProductNumber}
</脚本>

<div>



<p>这里的“模板”部分首先检查 popupVisible 的值。如果这是 false（它将在启动时出现，因为该变量刚刚在“脚本”部分中初始化），则 Web 应用程序将显示 Web 应用程序的当前“产品”列表（存储在产品数组中的产品编号数组）。 </p>

<p>代码现在继续并显示一个“添加另一个产品”按钮 - 现在是一个正常的按钮，而不是上一个示例中使用的怪异版本。但是，和以前一样，它有一个关联的 on:click 函数，并且该函数将 popupVisible 的值设置为 true。</p>

<p>如果点击按钮会发生什么？为什么，既然 popupVisible 是一个反应变量，那么 web 应用程序将刷新其屏幕。</p>

<p>这一次，表单的产品显示部分将被忽略，控件将直接移至模板部分的第二部分。</p>
<p>在这里，您会看到更像传统弹出窗口的内容。这个使用了 </p>
<form> 。容器内的标签 div>收集 newProductNumber 状态变量的输入。  这里使用特殊的 Svelte“绑定”限定符来将 newProductNumber 与用户的键盘输入同步。每次用户在表单的 <input> 字段中键入一个字符时，newProductNumber 都会更新。

<p>当用户最终单击表单的“注册”按钮时，其 on:click 函数能够将完全更新的 newProductNumber 推送到产品数组中并重置 popupVisible 字段。</p>

<p>最后，由于 popupVisible 是一个反应变量，因此代码的“模板”部分将重新运行，并且弹出窗口将被更新的产品编号列表替换。</p>

<p>其他一两件事可能会让您感到困惑。在前面的示例中，anon:click 限定符引用了 web 应用程序的 <script> 中定义的函数。部分。然而，在这个新版本的 page.svelte 中，该函数是在 <button> 中明确定义的。字段的 HTML 规范。这两种方法都是完全有效的。这里使用的版本对您来说可能看起来有点奇怪，但它是一种广泛使用的安排，其优点是函数的逻辑是在其调用点定义的。这使得更容易看到正在发生的事情。 </script></p>

<p>仅供参考，表达式：<br>
“() => { .... }”表示“这是由以下 JavaScript 语句定义的函数：“{ .... }”。有很多变体。请 chatGPT 为您提供有关“箭头”的教程“功能。</p>

<p>继续前进，您还会注意到我在“造型”方面更具冒险精神。例如，有一个标题，并且所有内容都很好地居中（CSS“继承”确保>

</p>
<p>但这已经足够了。让我们看看 web 应用程序的运行情况。将新代码粘贴到 page.svelte 文件的当前内容上，保存它并（如有必要）在项目上打开终端，然后使用 npm run dev -- --open 命令重新启动开发服务器。这是您应该在浏览器中看到的内容::</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>这是单击按钮时应该看到的内容：<br><br></p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>由于 newProductNumber 字段没有验证，您会发现您可以输入字符和数字 - 我们将在以后的帖子中修复此问题。即便如此，当您单击“注册”按钮时，您应该会看到弹出窗口被原始库存显示页面取代，并且您的新产品“编号”已添加到列表中。</p>

<p>Svelte 的这个片段几乎开始看起来像一个信息系统！ </p>
<h3>
  
  
  3. 前进和向上
</h3>

<p>这篇文章让您简要了解了 Svelte 语言中体现的关键概念。不幸的是，有一个障碍。我相信您会注意到，您刚刚看到的“库存”示例实际上毫无用处，因为每次您关闭网络应用程序时，其产品列表都会消失！因此，下一步是向您介绍 Google 的 <strong>Firestore</strong> 数据库技术。这将允许您在服务器主机上创建<strong>持久</strong>存储。 </p>

<h3>
  
  
  后记 (a)：当出现问题时 - 使用 Chrome Inspector 调查布局问题
</h3>

<p>Post 2.1 中的“当事情出错时”描述了如何处理开发 Web 应用程序时遇到的一些更严重的问题。但现在您处于更高级的水平，您需要更复杂的工具。本节向您介绍“Chrome 检查器”，它在纠正 Web 应用程序的屏幕布局问题和 JavaScript 中的逻辑错误时提供了宝贵的帮助（以及更多内容，您将在本系列后面看到）。</p>

<p>通过右键单击页面并选择“检查”选项，可以在 Web 应用程序页面上启动检查器。这是其输出的示例：</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>在此屏幕截图中，我有：</p>
<ul>
<li>启动了检查器，如上所述。 w 检查窗口现在隐藏了 web 应用程序窗口的下半部分。这可能会很不方便，因为检查器现在可能隐藏了一些我想要检查的 webapp 元素！通过单击并拖动检查器窗口的上边框来“调整”检查器窗口的大小可以部分解决此问题。或者，您可以使用菜单最右侧三点图标下的“停靠侧”工具将检查器停靠在屏幕一侧。</li>
<li>从检查器菜单栏中选择“元素”选项卡</li>
<li>扩展了和 <div> HTML 标记层次结构中的行显示在左侧检查面板中，并将鼠标悬停在 <h1> 上。显示网络应用程序标题的标签


</h1>
<p>如果您自己尝试一下，您会注意到标题已经获得了一些彩色图形。这些显示了已添加到文本中的边距、边框和填充的大小和位置。右侧检查面板提供更多细节。如果单击菜单中的计算选项卡，您将获得一个图形，其中解释了各种元素的颜色编码和详细尺寸。如果单击“样式”选项卡，您将看到附加到文本的样式的详细信息。列表中的第一组条目确认使用标签的> 显式设置的样式

</p>
<p>这个面板的美妙之处在于您可以使用检查器来查看更改和添加样式的效果。例如，假设您想在标题上尝试红色字体，请单击面板顶部的 element.style 条目中的某处，然后输入颜色：红色。标题现在顺理成章地变成了红色。请注意使用自动完成功能来尝试不同颜色的机会。</p>

<p>我不想强调这一点，但我认为您应该开始了解这个工具如何为您提供一个精确且直观的工具来调查和修复布局问题。有关更多信息，请查看 Google 关于 DevTools 检查器的文档。 </p>

<p>准备好在这上面花费相当多的时间。检查器是一个复杂的工具，因此您需要一段时间才能自信地使用它。  但这时间花得值。 Inspector 无疑为我节省了无数个小时的源代码设置盲目实验时间。检查器的图形显示使元素宽度、边距和填充的所有隐藏属性可见。</p>

<h4>
  
  
  后记 (b)：使用 Chrome Inspector 调查逻辑问题
</h4>

<p>检查器还可以帮助您查看源代码并在您想要停止执行的行上设置“断点”，从而帮助您发现逻辑错误。刷新 Web 应用程序后（检查器仍打开），您可以检查每个断点处的字段值。这是检查器运行时的屏幕截图：</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277644137804.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>在此屏幕截图中，我：</p>

<ul>
<li>像以前一样启动检查器。 </li>
<li>单击左侧面板上方的“源”选项卡，并在页面视图中展开 localhost 的源层次结构，以便我能够单击 src/routes 行中路线的斜体 page.svelte 条目。</li>
<li>注意到右侧面板现在显示 page.svelte 的源代码并单击 let popupVisible = false;设置断点的行（通过其行号上的蓝色突出显示确认）。</li>
<li>刷新浏览器中的页面，并注意到 Web 应用程序现在显示“在调试器消息中暂停”，其中包括“恢复执行”按钮和“跳过下一个函数调用”按钮。您还会看到 let popupVisible = false;该行现在突出显示</li>
</ul>

<p>所有这些的效果是将 web 应用程序置于“代码调试”模式。现在，我正在调试 web 应用程序的 <strong><script></script></strong> 部分，这有点毫无意义，因为它只运行一次，而且你确切知道它的作用。但让我们走一遍这些动作，因为它们将帮助您了解调试器可以在 JavaScript 源代码中为您做什么。</p>

<p>目前，Web 应用程序在执行第一条语句之前停止，因此没有执行任何有用的操作。但是，通过单击“Step over next”按钮前进到下一条语句，并注意突出显示现在已移至第二行。将鼠标悬停在第一行中的 popupVisible 字段上，请注意现在显示的工具提示显示其当前值 - 当然是 false。重复这个技巧来确认 newProductNumber 和 products 的设置。</p>

<p>如果您在 <script> 中定义的 Javascript 函数中设置断点，则可以更清楚地看到检查器的价值。部分。每次引用函数时都会运行它们，并且检查器非常适合跟踪这些进程的进度。</script></p>

<p>不幸的是，使用 page.svelte 文件的“模板”部分中的断点进行调试并不是那么简单。在这里，每次页面在响应变量发生更改后重新呈现时都会运行代码，但此处显示的“源”选项卡的代码（即 page.svelte 的原始 Sveltekit 代码）并不是现在实际运行的代码。原始代码已替换为本地服务器生成的 Svelte 脚本。因此，您获取有关正在发生的事情的信息的范围有限。</p>

<p><em>如果您想了解更多有关渲染过程以及为什么您的页面。 svelte 文件在检查器中的行为与此类似，请短暂跳到 Post 4.4 的末尾。但是，请注意，这很复杂！</em></p>

<p>根据我的经验，您通常可以在 Sveltekit 语句上设置断点，从而跟踪重新渲染期间所采取的路径。但这些不会显示字段值。</p>
<p>但是，您可以在嵌入式函数中有效地设置断点。例如，尝试在 products.push({productNumber: newProductNumber}); 中设置断点“注册”按钮的行。请注意，<button> 的整个块都是代码会突出显示（灰色），提醒您这是一个“匿名函数”（让 chatGPT 有时向您解释这一点）。现在重新运行 web 应用程序并观察断点的行为方式，就像在 <script> 中一样。部分。要求 Web 应用程序注册新的产品编号 123 并单击“注册”按钮后，您将看到 Web 应用程序在断点行停止。 “跳过下一个函数调用”并将鼠标悬停在 products.push({productNumber: newProductNumber}); 上线。您会注意到，它现在显示产品数组现在包含单个值 123。</script></button></p>

<p>如果所有其他方法都失败，并且您仍然需要检查模板部分中变量的值，则变量“x”的“console.log”等效项将是 </p>
<p>x 的值是 {x }</p>声明。</p>

<p>请注意，“在调试器中暂停”行上的按钮在检查器菜单栏中重复，并辅以“步入下一个函数”按钮，使您能够遍历嵌套函数。 </p>

<p>您很快就会意识到，断点设置保留在 webapp 文件中。再次单击断点线即可将其关闭。在屏幕右侧检查器的“断点”面板中的文件条目中“右键单击”将显示一个主开关，用于删除所有断点。 </p>

<p>终于。请注意，当网络应用程序遇到重大问题并“崩溃”时，打开检查器将在其菜单栏的右侧显示红色的“错误计数”。发生这种情况时，可以在检查器的“控制台”选项卡中查看问题的详细信息。</p>


          </div>

            
        </li>
</ul>
</form>
</div>