JavaScript Library

前言

上一回我介绍了 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} />

Svelte 其它知识点

获取 DOM 的时机

new Component 后，DOM 就渲染好了。

总结

目前我就用到这些而已。感觉无论如何都比 Alpine.js 合适。我喜欢他的简单直接，希望他越来越火，有朝一日我可以用它于 production 场景。