时间戳

首页 > 解决方案 > 无需在 Javascript 中编写 HTML 的 Web 组件

javascript - 无需在 Javascript 中编写 HTML 的 Web 组件

问题描述

我一直在阅读并尝试了一些据我所知可用的 Web 组件实现，但我不喜欢它们为 Javascript/JSX/Typescript 中的组件编写 HTML 代码。

我经历的框架/实现：

Polymer：Polymer 1 和 2 感觉很好，因为他们使用 HTML 导入进行所有定义，并且将 HTML 和 JS 代码分开。但是，对于 Polymer 3，他们也将使用类似 React 的语法在 JS 中编写 HTML，这是我不喜欢的。

Vanilla Webcomponents：令人惊讶的是，即使是 vanilla Web 组件规范也像 React 在 JS 代码中包含 HTML：又是https://www.webcomponents.org/introduction，这是我不喜欢的。

Stencil：虽然这个工具看起来很有前途，但我仍然有同样的问题，我必须在 JS 中编写组件所需的 HTML，然后将其转换为 vanilla JS。

X-Tag：同样的问题，JS 中的 HTML。

有没有我们不在 Javascript 中编写 HTML 来使用 Web 组件的实现？

我背后的主要原因是关注点分离，我不能很好地适应它，因为传统上网络似乎很好地将骨架、样式和 DOM 主程序分离为 HTML、CSS 和 JS 文件，现在，我们将所有东西结合在一起，感觉对我来说很乱。

这也是我不喜欢 React 的主要原因之一，因为我们在 javascript 中编写 HTML-Like 语法。

标签： javascripthtmlcomponentsweb-component

解决方案

使用 vanilla Web Components，您可以决定将 HTML、Javascript 和 CSS 分成不同的文件。由你决定！

我开发了一些完整的应用程序，其中每个组件（自定义元素）都用 3 个文件定义：HTML、JS 和 CSS。

HTML 内容被放置在一个<template>元素中，并在创建自定义元素时被克隆以插入到自定义元素中。

HTML 文件可以在运行时通过 HTML Imports 或 withfetch()或XMLHttpRequestobject 导入。或者，它可以在构建时（自动）与 Javascript 和 CSS 合并，仅构成一个要下载的文件。

我不知道其他框架，但我认为其中一些框架也是可能的。

推荐阅读