做了一个基于 web-components 的前端框架

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 852 天前的主题，其中的信息可能已经有所发展或是发生改变。

rt ，Leafjs 是一个基于 web-components 的前端小型框架，目前主要功能功能有自定义组件与类似 Vue 的响应式系统。例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <my-counter></my-counter>

    <script type="module">
      import {
        LeafComponent,
        registerComponent,
        HTMLElements
      } from "https://cdn.jsdelivr.net/gh/samzhangjy/leafjs@master/packages/leaf/dist/leaf.min.js";

      class Counter extends LeafComponent {
        constructor() {
          super();

          this.state = {
            count: 0
          };
        }

        render() {
          const plusButton = new HTMLElements.button("+");
          plusButton.addEventListener("click", () => {
            this.state.count++;
          });
          const minusButton = new HTMLElements.button("-");
          minusButton.addEventListener("click", () => {
            this.state.count--;
          });
          const currentCount = new HTMLElements.p(
            `Counter: ${this.state.count}`
          );
          return [plusButton, minusButton, currentCount];
        }
      }

      registerComponent("my-counter", Counter);
    </script>
  </body>
</html>

就可以实现一个简单的计数器。

文档： https://leafjs.samzhangjy.com/

GitHub： https://github.com/samzhangjy/leafjs

当然现在 Leafjs 还有很多不足，欢迎大佬们提出相关建议！

2 条回复 • 2022-08-30 00:34:00 +08:00

kkkyrieliu

2022-08-29 16:56:58 +08:00

不如去成为 lit.dev 的贡献者

Danswerme

2022-08-30 00:34:00 +08:00 via iPhone

明天睡醒了看看