使用 Svelte 的 Svelte Web 界面

2025-05-25

使用 Svelte 的 Svelte Web 界面

有谁发现“svelte”是个真实存在的词吗？它基本上是“lithe”或“slender”的同义词。

如果你最近密切关注前端 JavaScript 框架生态系统，你可能已经注意到 JavaScript 已经开始趋于稳定。我们不再看到十几个框架在 JavaScript 领域争夺市场份额。现在，我们只看到了少数几个领先的框架和一些小众框架。

为什么有人会引入一个用 JavaScript 构建用户界面的新组件框架？

好问题，很高兴你问了这个问题。

传统的 JavaScript 框架（React 才六年历史，我们也可以称之为传统，对吧？）即使利用了虚拟 DOM，也会给浏览器带来沉重的负载。虚拟 DOM 可以帮助像 React 这样的框架在状态发生变化时高效地重新渲染 Web 界面。这真是个好主意。

但这可能没有必要。

那么虚拟 DOM 有什么问题呢？

通常情况下，VDOM 并没有什么问题。在大多数情况下，依赖虚拟 DOM 完全没问题；然而，它仍然会带来开销。

Rich Harris 写了一篇很棒的文章，介绍了 Svelte 项目对虚拟 DOM 的看法。简而言之，虚拟 DOM 在实践中对于许多应用程序来说都很好，但它的速度并不比 DOM 本身快。

上文中描述的一个类似示例是 C 编译器。你可以在堆栈的底层编写更快的代码，但是既然 C 语言友好（因此高效）且速度足够快，你为什么还要这么做呢？

但是如果您不必在生产力和速度之间做出选择会怎样？

使用 Svelte，您可以拥有在 React 和 Vue 中看到的相同强大的模型，而无需虚拟 DOM 的开销。

Svelte 有何特别之处？

它消除了开销。

Svelte 背后的假设很简单：基于浏览器的 UI 框架会带来很大的开销；可以通过在浏览器之外的构建步骤中处理框架来消除这些开销。Svelte 没有虚拟 DOM。

它是一个编译器，而不是依赖项。

像 Vue 和 React 这样的框架是依赖项；它们在代码执行时与代码交互。Svelte 是一个编译器；它在你将代码投入生产之前就与代码交互——Svelte 输出的是原生 JavaScript。

它是如何工作的？

svelte.dev上有一些非常棒的文档，我计划很快写一系列关于 Svelte 的教程。Svelte网站上也有一个很棒的 REPL。

不过，我会在本文中分享一些代码，让你体验一下如何在 Svelte 中工作。你可以使用 REPL 来跟着学习。😉

<!-- App.svelte -->

<script>
  let name = 'world';
</script>

<style>
  h1 {
    font-family: Helvetica;
    color: #333;
  }
</style>

<h1>Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

这很奇怪。它看起来像一个普通的HTML文件，但有一个例外：

<h1>Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

花括号是怎么回事？Svelte 可以轻松地将 JavaScript 放入标记中，就像 JSX 一样。例如，我们可以轻松地这样做：

<h1>Hello {name || 'world'}!</h1>
Enter fullscreen mode Exit fullscreen mode

就像这样，我们正在处理name变量的虚假值。

如果你一直跟着我看下去，你可能会感到困惑，因为我把它叫做组件框架（抱歉，我可能会交替使用“框架”和“编译器”这两个词）。你可能会问组件在哪里，但你正在看的是组件：

<!-- App.svelte -->

<script>
  let name = 'Jacob';
</script>

<style>
  h1 {
    font-family: Helvetica;
    color: #333;
  }
</style>

<h1>Hello {name || 'world'}!</h1>
Enter fullscreen mode Exit fullscreen mode

如果我们想添加另一个组件，我们只需创建一个新文件：

<!-- Image.svelte -->

<script>
  export let src;
  export let alt;
</script>

<style>
  h1 {
    font-family: "Comic Sans MS";
    color: #ff0;
  }
</style>

<h1>Check this out!</h1>
<img {src} {alt}>
Enter fullscreen mode Exit fullscreen mode

现在让我们导入我们的新组件并在其中呈现它App.svelte。

<!-- App.svelte -->

<script>
  import Image from './Image.svelte';

  let name = 'Jacob';
</script>

<style>
  h1 {
    font-family: Helvetica;
    color: #333;
  }
</style>

<h1>Hello {name || 'world'}!</h1>
<Image 
    src="https://ksassets.timeincuk.net/wp/uploads/sites/55/2016/04/2014RickAstley_Getty109255193201014-1.jpg"
    alt="The world's most talented musician"
/>
Enter fullscreen mode Exit fullscreen mode

你可能会注意到标签中一些很酷的东西<h1>。来自的样式App.svelte不会覆盖来自的样式Image.svelte，反之亦然。样式的作用域仅限于组件🤯。

这很酷，但请记住这是一个编译器。我编写的代码是为人类编写的（Svelte 也允许编写一些对人类友好的代码），但我们必须通过编译器运行它才能获得适用于浏览器的代码。

这是浏览器看到的内容：

CSS：

h1.svelte-iq7gzg{font-family:Helvetica;color:#333}
Enter fullscreen mode Exit fullscreen mode

和 JavaScript：

/* App.svelte generated by Svelte v3.9.2 */
import {
    SvelteComponent,
    append,
    attr,
    destroy_component,
    detach,
    element,
    init,
    insert,
    mount_component,
    noop,
    safe_not_equal,
    space,
    text,
    transition_in,
    transition_out
} from "svelte/internal";
import Image from "./Image.svelte";

function create_fragment(ctx) {
    var h1, t0, t1_value = name || 'world' + "", t1, t2, t3, current;

    var image = new Image({
        props: {
        src: "https://ksassets.timeincuk.net/wp/uploads/sites/55/2016/04/2014RickAstley_Getty109255193201014-1.jpg",
        alt: "The world's most talented musician"
    }
    });

    return {
        c() {
            h1 = element("h1");
            t0 = text("Hello ");
            t1 = text(t1_value);
            t2 = text("!");
            t3 = space();
            image.$$.fragment.c();
            attr(h1, "class", "svelte-iq7gzg");
        },

        m(target, anchor) {
            insert(target, h1, anchor);
            append(h1, t0);
            append(h1, t1);
            append(h1, t2);
            insert(target, t3, anchor);
            mount_component(image, target, anchor);
            current = true;
        },

        p: noop,

        i(local) {
            if (current) return;
            transition_in(image.$$.fragment, local);

            current = true;
        },

        o(local) {
            transition_out(image.$$.fragment, local);
            current = false;
        },

        d(detaching) {
            if (detaching) {
                detach(h1);
                detach(t3);
            }

            destroy_component(image, detaching);
        }
    };
}

let name = 'Jacob';

class App extends SvelteComponent {
    constructor(options) {
        super();
        init(this, options, null, create_fragment, safe_not_equal, []);
    }
}

export default App;
Enter fullscreen mode Exit fullscreen mode

👆这不是写给人类看的代码。这是写给浏览器看的代码；它针对浏览器进行了优化。将写给人类的代码和写给机器的代码区分开来意味着我们不必在可读性和速度之间做出取舍。

把它想象成任何编译器。编译器生成的代码不是为人类设计的，而是为机器设计的。进入编译器的代码是为人类设计的。作为一个热爱可读代码的人，这让我很兴奋。

乍一看，Svelte 是一款用极其简单（也就是可维护）的 JavaScript 编写基于组件的 UI 的工具。我不确定是否会将它投入生产，但目前我对 Svelte 的关注比几乎任何其他 Web 技术都更感兴趣。

🚀🎸🏎

还有更多...

这些天我写了很多文章，我运营着一个播客，并且我已经开始发送一份关于我听到的所有精彩故事的新闻通讯摘要。

您还可以在Twitter上关注我，在那里我会制作一些有趣的表情包并谈论作为一名开发人员的感受。

文章来源：https://dev.to/jacobherrington/svelte-web-interfaces-with-svelte-44ib
Devto 翻译
PREV
为什么要记录代码日志 | 代码日志（第 1 部分，共 4 部分）
NEXT
开源让我通过 30 天的兼职赚了 1 万美元