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

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 还有很多不足，欢迎大佬们提出相关建议！

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/876154