Svelte 前端框架，开发读书笔记，2024年前端大厂面试分享

}

而 Svelte 框架的核心思想在于『 通过静态编译减少框架运行时的代码量 』（尤雨溪大佬的解释）。

Svelte 不会将自己打包进项目，而是在编译打包阶段，将 Svelte 组件转换为原生 DOM 操作。因此，使用 Svelte 开发的项目，并不依赖 runtime，更没有像 Vue 和 React 中的 Virtual DOM，项目的体积也非常地小。

下面是 Svelte 项目的 package.json 文件，可以发现，svelte 是被作为开发时依赖引入。

“devDependencies”: {

“svelte”: “^3.0.0”

}

这是 Svelte 和其他前端框架的明显区别。与其说是 “新”，倒不如说是回归原始，返璞归真。

除了不依赖 runtime 和 Virtual DOM 外，Svelte 另一个 “新” 体现在其自身具有反应性，可以轻松地实现状态管理，而无需像 Vue 和 React 框架一样引入 Vuex 和 Redux 之类的状态管理库。这一点给开发者提供了极大地便利。

了解了 Svelte 框架的独特之处，让我们趁热打铁，做一个小项目来感受使用 Svelte 进行开发的高效和乐趣~

十分钟开发读书笔记

接下来，我们要开发一个读书笔记，来记录自己每日的学习内容。

先分析下需求，读书笔记需要有如下基本功能：

1. 添加读书笔记

2. 展示已添加的读书笔记

3. 删除某一条读书笔记

4. 导出读书笔记成 Markdown 格式的文件，并下载至本地

成品效果如下：

体验地址：https://read-note.now.sh/

总共分为四步，顺利的话，只用十分钟就可以开发完成并部署上线~

1. 启动模板项目

可以通过以下两种方式下载 Svelte 的模板项目。

方式一

直接下载压缩包，并手动解压，地址：https://github.com/sveltejs/template/archive/master.zip

方式二

通过 npx 命令创建一个 Svelte 模板项目：

npx degit sveltejs/template svelte-app

下载模板到本地后，进入项目目录，输入命令安装依赖：

npm install

Svelte 框架使用 Rollup 作为 JS 模块打包工具（也是大佬写的轮子），依赖安装完成后，通过控制台输入命令，在本地启动项目：

npm run dev

控制台看到如下输出，项目启动成功：

浏览器访问 localhost:5000，可以看到如下界面：

2. 开发界面

完成项目模板的下载和启动后，开始进入读书笔记界面的开发。

读书笔记只有一个主页面，先观察页面的布局，分为上下两部分，上方是一张张相同样式卡片组成的列表，下方是操作面板：

因此，我们只需要开发两个组件，卡片 和 操作面板。然后将多张卡片组成列表放在主页面上方，操作面板固定在主页面底部。

在项目 src 目录下新建几个 .svelte 文件（Svelte 框架的页面文件，App.svelte 为模板自带的主页面），此时目录结构如下：

.svelte 文件的语法结构和 Vue 框架非常类似，由行为、页面、样式三部分组成，分别对应 JavaScript、HTML、CSS 代码。一个标准的 .svelte 文件代码如下：

2.1 开发卡片组件

读书笔记的每张卡片都要有标题、内容和创建日期，还要给卡片编号，并给不同编号的卡片加上不同的颜色。当鼠标移到卡片上时，出现删除按钮。

打开 Card.svelte 文件，先在 script 标签中用 JavaScript 定义几个属性变量（组件内唯一）和一个删除函数：

然后编写卡片的内容，先用一个根 div 标签括起所有的内容，然后编写标题、内容、创建时间的 div 标签。在 Svelte 中，可以直接使用尖括号来输出变量的值，使用 on:click 指令来绑定鼠标点击事件：

{title} x

{content}

{creationTime}

在 style 标签中编写 CSS 代码，让卡片变得美美哒：

2.2 开发操作面板组件

操作面板包含两个输入框和两个按钮，用于添加卡片和导出笔记。

打开 AddCard.svelte 文件，和开发卡片一样，先编写 JavaScript，定义几个属性变量，以及 “添加” 和 “导出” 函数：

然后编写操作面板的内容，Svelte 通过 bind:value 指令实现表单数据的双向绑定：

添加

导出

最后编写 CSS 代码，让操作面板变得美美哒~ 此处使用 Flex 布局：

2.3 将组件放入主页面

开发完卡片和操作面板组件后，只需要将这些组件丢到 Svelte 模板项目默认生成的主页面 App.svelte 中，在 script 标签中通过 import 关键字引入组件：

在 div 标签中，通过 {# each ... } {/each} 循环语句实现卡片列表，直接通过组件名引入组件：

{#each $cards as card, i}

<Card {…card} index={i}/>

{/each}

细心的小伙伴可能会好奇，上述代码第 2 行的 $cards 变量是从哪儿来的呢？不着急，稍后揭晓~

大功告成！读书笔记的界面开发好了，但这时，所有的按钮都没有任何作用，下面我们来给读书笔记添加功能。

3. 实现功能

不知道大家有没有发现，我们要做的读书笔记，其实就是个简单的增删改查项目！

既然是增删改查，那肯定要有地方存储数据，记录数据的变化。通常数据是存在数据库中的，通过向后端发出请求来操作和查询数据库中的数据。

但这里我们只是一个前端项目，没有数据库，怎么办呢？可以直接使用 Svelte 自带的状态管理 API 来实现本地数据管理，无需引入任何新的依赖！

3.1 管理卡片数据

在项目 src 目录下新建 store.js，作为数据管理文件，此时目录结构如下：

在 store.js 文件中通过 writable 函数定义 cards 可写变量：

import {writable} from “svelte/store”;

export const cards = writable([]);

定义好之后，cards 已经被 Svelte 框架管理了，可以直接把 cards 当做一个全局变量来使用。

在主页面中引入 cards，并通过循环语句展示已添加的卡片列表。注意，想要使用状态变量，要在变量名前添加 $ 符号。此时的主页面文件  App.svelte 内容如下：

{#each $cards as card, i}

<Card {…card} index={i}/>

{/each}

完成了 cards 的展示后，我们依次实现 cards 的添加和删除吧~

3.2 添加卡片

点击操作面板的添加按钮，可以添加卡片。须实现 AddCard.svelte 文件的添加函数：