最常问的 Svelte.js 面试题及答案

以下是最常问的 Svelte.js 面试题及答案列表。

1) 什么是 Svelte.js？/ 你对 Svelte 有什么理解？

Svelte.js 或 Svelte 是一个用于构建快速 Web 应用程序的 UI 框架或工具。它与 React 和 Vue 等 JavaScript 框架非常相似，可以轻松构建流畅的交互式用户界面。它还用于解决与 React 或 Vue 相同的问题，但 Svelte.js 鼓励用户以声明式、组件驱动的方式构建应用程序，而不是进行命令式的 DOM 操作。

Svelte 与 React 和 Vue 等其他 JavaScript 框架之间最重要的区别在于，它在构建时将我们的应用程序转换为理想的 JavaScript，而不是在运行时解释我们的应用程序代码。这提供了巨大的优势：我们不必为框架的抽象付出性能成本，并且在应用程序首次加载时也不会产生罚款。这就是为什么它能提供更快的加载和运行速度的应用程序。

2) Svelte 与 React.js 和 Vue.js 等传统前端框架的主要区别是什么？

尽管 Svelte 与 React.js 和 Vue.js 等其他传统前端框架非常相似，但根据它们的功能，它们之间存在很大差异。React.js 和 Vue.js 等传统框架大部分任务是在浏览器中完成的，即在运行时，而 Svelte.js 则在构建步骤中完成该任务，即在编译时完成。S

因此，Svelte 不需要使用任何 DOM 更新工具（如 React）来更新 DOM。Svelte.js 编写的代码会在应用状态发生变化时更新 DOM，而不是通过虚拟 DOM 差异化来更新 DOM。

3) Svelte.js 如何工作？

Svelte 是一个前端 UI 框架，所以我们可以在 HTML 文件中编写组件。HTML 文件可以包含可选的 <style> 和 <script> 元素来封装 CSS 和其他行为。您可以轻松学习 Svelte.js 模板语法。

Svelte.js 编译器通过命令行界面或各种构建工具集成将 HTML 组件文件转换为模块。这些模块包含低级 DOM 操作，根据我们的应用程序。这意味着 Svelte 不遵循任何数据绑定技术、DOM 差异化或其他框架必须使用的技巧来渲染我们的 UI。

示例

HelloWorld.html 文件

app.js 文件

输出

Hello tpointtech

4) Svelte 用于做什么？

Svelte 是一个新的前端 UI 框架，用于创建用户界面，与其他框架如 React 和 Vue.js 类似。Svelte 与其他框架的主要区别在于，Svelte 在编译时将大部分代码转换为更低级别的代码。

因此，由于大部分工作在编译时完成，Svelte 应用程序的运行和引导速度会更快。Svelte 主要关注以下几点：

• 轻量级库
• 更快的应用程序性能
• 对变化的响应性
• 易于编码和使用

5) Svelte.js 应用程序中的响应性是什么意思？

响应性是用于开发现代交互式 Web 应用程序的概念。它表明当您更改值时，它会自动反映在 DOM 中。例如，当应用程序是响应式的时，这意味着任何值的更改（用户输入的结果）都会自动反映在文档对象模型 (DOM) 中。DOM 是一个逻辑树结构，代表用户可以在浏览器中看到的 HTML 页面，或者任何其他值根据用户输入而改变的地方。

6) 与其他前端 UI 框架相比，Svelte.js 的主要优势是什么？

以下是 Svelte.js 与其他前端 UI 框架相比的主要优势列表：

• js 允许开发人员编写更少的代码。它主要旨在通过使用已知的语言（如 HTML、CSS 和 JavaScript）来构建无样板组件。
• js 真正具有响应性，并将响应性带入 JavaScript 本身。它不需要更复杂的状態管理库。
• js 不需要虚拟 DOM。它将代码编译成微小的、无框架的原生 JS。这就是为什么 Svelte.js 应用启动快、加载快、保持快速的原因。
• js 相对于其竞争对手来说更好，因为它提供的代码更少、样板文件更少、捆绑包更小、速度更快、性能更好。

7) Svelte.js 的应用程序结构是怎样的？

当我们首次将 Svelte.js 安装到我们的系统上时，启动模板默认具有以下结构：

让我们详细看看它们：

package.json 和 package-lock.json： package.json 和 package-lock.json 包含 Node.js/npm 使用的项目信息，以保持其有序。

node_modules： node_modules 文件指定 node 在何处保存项目依赖项。这些依赖项仅用于开发目的，不会发送到生产环境。

.gitignore： 这用于告诉 git 忽略项目中的哪些文件或文件夹。如果您决定将您的应用程序包含在 git 仓库中，则需要此文件。

rollup.config.js： 在 Svelte 中，rollup.config.js 用作模块打包器。此配置用于告诉 rollup 如何编译和构建您的应用程序。如果您使用 webpack 来创建您的启动项目（使用 npx degit sveltejs/template-webpack svelte-app），则会跳过此文件。

scripts： 它包含所需的设置脚本。目前，它只包含 **setupTypeScript.js**。

src： 此目录用于指定应用程序的源代码所在的位置，以及您需要为应用程序创建代码的位置。它包含两个组件：App.svelte 和 main.js。

• App.svelte 是应用程序的顶级组件，它渲染“Hello World！”消息。
• main.js 是应用程序的入口点，用于实例化 App 组件并将其绑定到 HTML 页面的 body。

public： public 是一个包含所有需要在生产环境中发布的文件的目录。此目录包含以下文件：

• favicon.png： 这是应用程序的默认图标。目前显示 Svelte logo。
• index.html： 这是应用程序的主页面。最初，它只是一个空的 HTML5 页面，加载 Svelte 生成的 CSS 文件和 js 捆绑包。
• global.css： global.css 文件包含未作用域的样式。它是一个常规的 CSS 文件，应用于整个应用程序。
• build： build 文件夹用于包含生成的 CSS 和 JavaScript 源代码。
• bundle.css： bundle.css 文件是从 Svelte 每个组件定义的样式生成的。
• bundle.js： bundle.js 是从所有 JavaScript 源代码编译而来的 JavaScript 文件。

8) Svelte.js 应用程序中的组件是什么？

在 Svelte.js 中，一个应用程序由一个或多个组件组成。组件是可重用的、自包含的代码块，它封装了需要在一起的代码（HTML、CSS 和 JavaScript）。组件是 Svelte 应用程序的构建块，并使用 HTML 的超集写入 .svelte 文件。代码编辑器中的“Hello World”示例就是一个简单的组件。

The <script> 部分

<script> 部分包含组件实例创建时运行的 JavaScript。在顶层声明的变量对于组件的标记是“可见的”。Svelte 通过顶层变量处理组件状态，并且它们默认是响应式的。

标记部分

在此部分，您可以插入任何 HTML。您还可以使用花括号 {} 插入有效的 JavaScript 表达式。

The <style> 部分

这用于在应用程序中添加 CSS。

例如