前言
Svelte,一个语法简洁、入门容易,面向未来的前端框架。
从 Svelte 诞生之初,就备受开发者的喜爱,根据统计,从 2019 年到 2024 年,连续 6 年一直是开发者最感兴趣的前端框架 No.1:
Svelte 以其独特的编译时优化机制著称,具有轻量级 、高性能 、易上手 等特性,非常适合构建轻量级 Web 项目。
为了帮助大家学习 Svelte,我同时搭建了 Svelte 最新的中文文档站点。
如果需要进阶学习,也可以入手我的小册《Svelte 开发指南》,语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte!
欢迎围观我的"网页版朋友圈"、加入"冴羽·成长陪伴社群",踏上"前端大佬成长之路"。
仅服务端模块
SvelteKit 会像一个好朋友一样,保守您的秘密。在同一个代码仓库中编写后端和前端代码时,很容易不小心将敏感数据(例如包含 API 密钥的环境变量)导入到前端代码中。SvelteKit 提供了一种完全防止这种情况发生的方法:仅服务端模块(server-only modules)。
私有环境变量
$env/static/private
和 $env/dynamic/private
模块只能导入到仅在服务端上运行的模块中,例如 hooks.server.js
或 +page.server.js
。
仅服务端工具
$app/server
模块包含一个 read
函数,用于从文件系统读取资源,同样只能被服务端运行的代码导入。
您的模块
您可以通过两种方式使您的模块成为仅服务端模块:
- 在文件名中添加
.server
,例如secrets.server.js
- 将它们放在
$lib/server
中,例如$lib/server/secrets.js
工作原理
任何时候,当您有公开的代码,导入仅服务端代码时(无论是直接还是间接)...
js
// @errors: 7005
/// file: $lib/server/secrets.js
export const atlantisCoordinates = [
/* 已编辑 */
];
js
// @errors: 2307 7006 7005
/// file: src/routes/utils.js
export { atlantisCoordinates } from '$lib/server/secrets.js';
export const add = (a, b) => a + b;
html
/// file: src/routes/+page.svelte
<script>
import { add } from './utils.js';
</script>
...SvelteKit 将报错:
bash
Cannot import $lib/server/secrets.js into public-facing code:
- src/routes/+page.svelte
- src/routes/utils.js
- $lib/server/secrets.js
尽管公开代码 --- src/routes/+page.svelte
--- 只使用了 add
导出而没有使用秘密的 atlantisCoordinates
导出,秘密代码也可能最终出现在浏览器下载的 JavaScript 中,因此这个导入链被认为是不安全的。
此功能也适用于动态导入,甚至是像 await import(`./${foo}.js`)
这样的插值导入,只有一个小注意点:在开发过程中,如果公开代码和仅服务端模块之间存在两个或更多的动态导入,则在第一次加载代码时不会检测到非法导入。
!NOTE\] 像 Vitest 这样的单元测试框架不区分仅服务端代码和公开代码。因此,当运行测试时,非法导入检测会被禁用,这由 `process.env.TEST === 'true'` 决定。
进一步阅读
快照
临时的 DOM 状态 --- 比如侧边栏的滚动位置、<input>
元素的内容等 --- 在从一个页面导航到另一个页面时会被丢弃。
例如,如果用户填写了一个表单但在提交之前离开并返回,或者用户刷新页面,他们填写的值将会丢失。在需要保留这些输入的情况下,您可以创建一个 DOM 状态的快照,当用户返回时可以恢复这个状态。
要实现这一点,从 +page.svelte
或 +layout.svelte
中导出一个带有 capture
和 restore
方法的 snapshot
对象:
svelte
<!--- file: +page.svelte --->
<script>
let comment = $state('');
/** @type {import('./$types').Snapshot<string>} */
export const snapshot = {
capture: () => comment,
restore: (value) => comment = value
};
</script>
<form method="POST">
<label for="comment">评论</label>
<textarea id="comment" bind:value={comment} />
<button>发表评论</button>
</form>
当您离开这个页面时,capture
函数会在页面更新之前立即被调用,返回的值会与浏览器历史栈中的当前记录关联。如果您返回此页面,restore
函数会在页面更新后立即被调用,并传入存储的值。
数据必须是可以序列化为 JSON 的,这样它才能被保存到 sessionStorage
中。这样就可以在页面重新加载时,或者用户从其他网站返回时恢复状态。
!NOTE\] 避免从 `capture` 返回非常大的对象 --- 一旦被捕获,对象将在会话期间保留在内存中,在极端情况下可能会因太大而无法保存到 `sessionStorage` 中。
Svelte 中文文档
点击查看中文文档:
系统学习 Svelte,欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte!
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章, 全系列文章目录:github.com/mqyqingfeng...
欢迎围观我的"网页版朋友圈"、加入"冴羽·成长陪伴社群",踏上"前端大佬成长之路"。