无需 JavaScript 框架的响应式 HTML 🔥
在现代 Web 开发领域，Vue 和 Angular 等 JavaScript 框架在有关响应式界面的讨论中占据主导地位。
然而，完全可以在不依赖这些庞大的框架的情况下创建响应式 HTML。
在本文中，我们将讨论如何使用这个项目来实现这一点。
好，我们开始吧！🏎
👀 使用框架有什么问题？
虽然像 Vue 和 Angular 这样的 JavaScript 框架提供了强大的工具，但它们也存在一些明显的缺点。一个主要问题是样板代码——开发者在实现实际功能之前，经常需要编写重复的设置代码。此外，框架还会强制使用自身的架构，这对于简单的项目来说可能过于复杂。而且，频繁的更新可能需要成本高昂的迁移，从而导致长期维护变得困难。
另一个令人担忧的问题是性能开销，因为框架会捆绑一些可能并不需要的大型运行时库。它们还会造成厂商锁定，使日后切换技术变得更加困难。许多项目最终只使用了框架功能的一小部分，却仍然要承担捆绑包体积和复杂性的代价。对于小型应用程序而言，像 HMPL.js 这样的轻量级替代方案通常可以在不增加不必要代码的情况下实现响应式设计。
✅ 解决方案
你可以直接将代码上传到服务器，然后从服务器加载生成的 HTML。这不仅可以减小源代码包的大小，还可以让你在不同的 Web 应用程序中重新设计组件。
但是，问题在于，我们当然可以使用 Next.js 或 Nuxt.js来实现这一点，但我们现在又要抱怨了，因为它们也使用了客户端组件，并且服务器端组件的数量很少，它们在大多数情况下只是元组件的初始包装器，因此，这种方法的使用方式可以略有不同。
🐜 使用 HMPL.js 模块
我们可能不需要在项目中集成一大堆软件包来创建一个漂亮的界面。一个普通的HTML页面和几个标签就足够了script。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
</head>
<body>
<main>
<template hmpl>
<div>
{{#request src="/api/header.html"}}
{{#indicator trigger="error"}}
<p class="indicator">Header loading error</p>
{{/indicator}}
{{/request}}
</div>
</template>
<div class="content"></div>
<template hmpl>
<div>
{{#request src="/api/footer.html"}}
{{#indicator trigger="error"}}
<p class="indicator">Footer loading error</p>
{{/indicator}}
{{/request}}
</div>
</template>
</main>
<script src="https://unpkg.com/json5/dist/index.min.js"></script>
<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<script src="https://unpkg.com/hmpl-dom/dist/hmpl-dom.min.js"></script>
</body>
</html>
在这里，我们从服务器端获取客户端所需的组件，并不关心服务器端会提供多少资源。原始组件包只有几千字节，接口也与我们用 Vue 编写的完全相同，一一对应。因此，如果您有这方面的资源需求，可以使用这种方法。
🖋️结论
JavaScript 框架虽然功能强大，但往往会给简单的应用程序带来不必要的复杂性、样板代码和性能开销。像 HMPL.js 这样的轻量级替代方案表明，无需大量依赖即可实现响应式设计，为许多用例提供了更高效的方法。通过仔细评估项目需求，开发人员可以在功能和简洁性之间找到合适的平衡点，避免过度设计，同时还能提供动态的用户体验。
非常感谢您阅读这篇文章❤️！
你还知道哪些其他流行的替代品？欢迎在评论区分享！
PS：也别忘了帮我给HMPL点赞哦！
文章来源：https://dev.to/anthonymax/reactive-html-without-javascript-frameworks-1anh