JavaScript Library – Svelte
前言
上一回我介绍了 Alpine.js。作为我开发企业网站 draft 版本的 render engine。
用了一阵子后,我觉得它真的非常不好用。所以打算换一个。
前端有好几个 framework / library / compiler 都可以用来做 MVVM render engine。比如 Angular、React、Vue、Lit、Solid、Qwik、Svelte。
Angular 太重
React、Solid、Qwik 我不爱 JSX
Vue 半吊子
Lit 我不能接受 html`` 语法
所以最后选了 Svelte。
安装
它有 2 个用法,第一个是搭配 SvelteKit,类似于 Angular CLI,官方出的脚手架。
另一个方法是搭配 Vite,我是要轻巧的,自然是不想引入多一个 SvelteKit 概念,用 Vite 足也。
Vite 我之前介绍过了,没用过的人可以先看这篇。
更新:17-11-2023,新版本只需要一行 command 就可以创建给予 vite 的 svelte 了。
下面是以前的安装方式,留作纪念。
yarn create vite
然后填写 project name 选择 Svelte 模板和 TypeScript
进入 folder 安装 node_modules 就可以了
cd play-svelte
yarn install
yarn dev --open
效果
vite config with svelte
我们看看是怎样 config svelte to vite 的
首先 vite.config.ts 多了一个 svelte plugin
多了一个 svelte.config.js 里面是 vite plugin
这样一来一往,两家就连上了。
还有一个重要的是 tsconfig.json
大致上是这样。
Svelte 的基本使用概念
我的目的是用它来替代 Razor。所以我只关心一些小功能而已。
index.html 作为 page 的入口
导入 main.ts 这个和一般的 Vite 使用是一样的。
然后 main.ts 长这样
关键就在那个 App.svelte。
.svelte 类似于 Blazor 的 .razor file。它是 Script (JS / TS) + HTML + Style (CSS / Scss) 的合体。
一个 .svelte file 等于一个组件。它也有 isolated css 的概念哦,但不关我的事,我用不上。
Svelte 的基本语法
binding text
<script lang="ts"> const name = 'Derrick'; </script> <main> <h1>{name}</h1> </main>
非常简单直接
binding html raw text
<script lang="ts"> const rawHtml = '<h1>Hello World</h1>'; </script> <main> { @html rawHtml } </main>
click event and change binded text
<script lang="ts"> let name = 'Derrick'; </script> <main> <h1>{name}</h1> <button on:click={() => name = 'new name'}>change name</button> </main>
效果
简单到爆,不需要像 Solid、Angular 那样去搞什么 Signal / Reactive 做追踪,逼迫开发者写出恶心代码。直接了当就是 Svelte 的风格。
当然这种黑箱有时候也很恐怖。类似重新定义 HTML、CSS、JS 了,但是这种事后端经常干,见怪不怪。
binding property / attribute
<h1 class="{ 'abc ' + (true ? 'xyz' : 'kknd') }">Hello World</h1> <input type="text" required={true}> <h1 class:active={true} >Hello World</h1>
直接写 JS 拼接 class 也是可以的。简单直接
if else
{#if Math.random() > 0.1} <h1>Hello World</h1> {:else if Math.random() > 0.4} <p>too cold!</p> {:else} <h1>false value</h1> {/if}
Angular 也正在考虑用上面这个写法。比起 Razor 确实有点丑。
for loop
{#each values as value, index} <h1 class="item">{value}</h1> {/each}
component
counter.svelte
一个 .svelte 代表一个组件
<script lang="ts"> export let startNumber; let count = startNumber; </script> <main> <h1>{count}</h1> <button on:click={() => count++}>increase</button> </main> <style> h1 { color: red; } </style>
script 里面的 export let startNumber 组件的 property,外部通过修改这个影响组件内部。类似 Angular 的 @Input
app.svelte
<script lang="ts"> import Counter from './Counter.svelte'; let name = 'Derrick'; </script> <main> <h1>{name}</h1> <button on:click={() => name = 'new name'}>change name</button> <Counter startNumber="5" /> </main>
使用组件的方式是 import 组件,然后写入 HTML。
component slot
外面传进去
<Counter startNumber="5"> <div class="header" slot="header">header</div> <div slot="footer">footer</div> </Counter>
里面接收
<main> <slot name="header"> No header was provided </slot> <h1>{count}</h1> <button on:click={() => count++}>increase</button> <slot name="footer"></slot> </main>
简单直接。题外话: <slot> 在 HTML 规范里不是 self-closing tag 哦,但 Svelte 依然可以正确解释的。
component slot 和 fragment slot
<HeaderComponent slot="header" />
组件和 element 一样可以直接写 slot property。
fragment slot 长这样,有点类似 Angular 的 ng-container
<svelte:fragment slot="footer"> <p>All rights reserved.</p> <p>Copyright (c) 2019 Svelte Industries</p> </svelte:fragment>
component pass multiple properties
<MyComponent {...props} />
dynamic tag
<script lang="ts"> export let tag : 'section' | 'aside' = 'section'; </script> <svelte:element this={tag}> <h1>Hello World</h1> </svelte:element>
这样就可以创建 dynamic tag 了,不像 Angular,完全不支持这个功能🙄
Svelte 其它知识点
获取 DOM 的时机
new Component 后,DOM 就渲染好了。
总结
目前我就用到这些而已。感觉无论如何都比 Alpine.js 合适。我喜欢他的简单直接,希望他越来越火,有朝一日我可以用它于 production 场景。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)