Cample.js

Cample.js

我在 2024 年的主要目标之一是改进该框架，使其成为使用响应式而非虚拟 DOM 的 Web 上速度最快的框架之一。到 2023 年底，该框架的指标达到 1.12。这是一个相当不错的结果，但无论如何，它对我来说速度很慢，这很糟糕。

无论如何，经过半年左右的时间，我终于能够完成实现。是的，这花了很长时间，当然，我不可能在这么长时间内弄清楚。事实上，解决方案表面上看起来微不足道，但事情就是这样发生的。大约在夏天的时候，我能够在 1.08 中完成它并取得一个很酷的结果。

之后，我们可以说任务完成了。是的，如果你再多花点时间，你已经可以将其加速到 1.05 倍，但这没有多大意义，因为主要解决方案已经存在。

之后，此刻我的灵魂里有一点空虚，因为我已经做了我想做的事，需要一个新的意义，所以我想到了一个可以实现的新想法。而我认为框架的最佳延续是：

高血压性脉动蛋白

到那时我已经清楚地了解到开发框架没有什么特别的意义，因为现代 UI 工具所具有的功能实在是太庞大了，但我也不想失去快速渲染的发展，所以决定在旧框架、其扩展标记和服务器工作之间建立一种共生关系。

你自己看一下，有这样一个工作标记，它在工作中很有用，但在框架内它根本不起作用：


    Data table:
    
        
            
                Id
                Name
                Material
                Quantity in stock
                Number of sales
                Price

我不想浪费那么多时间在框架上 + SSR 的想法已经在积极发展和发展，如果我不将这两个参数组合成更有价值的东西，那将是愚蠢的。这不会创建架构，而只是补充。这正是 HMPL 的第一个版本。

经过几个月的工作，HMPL 的第一个版本发布了，也称为 **cample-html**。它与我之前做的一样，但只在服务器环境中工作。它看起来像这样：

const templateFn = CampleHTML.createTemplate(
  ``
);

// (After the response arrives from the server) { element = template (HTMLTemplateElement type), status = 200 }
const elementObj = templateFn({
  credentials: "same-origin",
  get: (prop, value) => {
    if (prop === "element") {
      console.log(value);
    }
  },
});

它已经或多或少看起来像现在的样子了，但那时它更像是一个 beta 测试。有很多未完成的工作阻碍了该模块的正常使用。再加上名字又长又难听，所以很多东西不得不改。

现在，六个月过去了，我们已经可以说它完全可以使用了。已经实现了很多很酷的功能，比如记忆、事件、表单的自动主体等等，但主要工作尚未完成。我发现可以设置请求间隔、添加对 Web 套接字的支持，还可以实现计划中的其他一些功能。

到目前为止，该项目已实施了以下措施：

import { compile } from "hmpl-js";

const templateFn = compile(
  `
  
    
      Login: 
      
    
    
      
    
  
  
    {
      {
        src: "/api/register",
        after: "submit:#form",
        repeat: false,
        indicators: [
          {
            trigger: "pending",
            content: "
Loading..."
          }
        ]
      }
    }
  
`
);
const initFn = (ctx) => {
  const event = ctx.request.event;

  return {
    body: new FormData(event.target, event.submitter),
    credentials: "same-origin"
  };
};
const obj = templateFn(initFn);
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);

在我看来，这看起来真的很有希望，而且这样的功能可以帮助许多人创建一个很酷的网站。

结论

今年，我们本可以做得更多，增加功能，改进错误等，但我认为，到 2025 年，希望这一切会变得更好。

以下是结果。我认为已经做了很少的工作，但结果就是这样。你的情况怎么样？读起来会很有趣。

CLIS.CC

Cample.js

Cample.js

高血压性脉动蛋白

Data table:

结论