Svelte

Svelte

Svelte是一个构建web应用程序的工具。Svelte与诸如ReactVueJavaScript框架类似,都怀揣着一颗让构建交互式用户界面变得更容易的心。但是有一个关键的区别:Svelte在构建/编译阶段将你的应用程序转换为理想的JavaScript应用,而不是在运阶段解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。

背景特性

SvelteRich Harris开发,Rich Harris曾在《卫报》工作,目前任职于《纽约时报Harris先前创建的Ractive Web框架被《卫报》采用,并成为Vue的部分功能的灵感来源。Harris还创建了Rollup模块打包器,它是WebpackParcel的替代品。

快速开始

你可以使用Svelte构建整个应用程序,也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包(package)交付到任何地方,并且不会有传统框架所带来的额外开销。

以最简单的模板为例,其会被编译为如下的JS代码:

<h1>Hello world!</h1>
/* App.svelte generated by Svelte v3.12.1 */
import {
  SvelteComponent,
  detach,
  element,
  init,
  insert,
  noop,
  safe_not_equal,
} from "svelte/internal";

function create_fragment(ctx) {
  var h1;

  return {
    c() {
      h1 = element("h1");
      h1.textContent = "Hello world!";
    },

    m(target, anchor) {
      insert(target, h1, anchor);
    },

    p: noop,
    i: noop,
    o: noop,

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

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

export default App;

Links