编程

HTML Web 组件

500 2024-01-11 04:08:00

我想“Web 组件”中的“组件”一词让很多人感到疑惑 —— 至少对于曾经的我。

“Web 组件”像是类似于 “React 组件”。JSX 有一个 <MyComponent> 组件,而 web 有 <my-component> 组件。 

但是,当你尝试以构建 React 组件的方式构建 web 组件时,很容易感到沮丧并放弃,因为 web 组件的工作方式与 React 组件不同——我放弃过几次。

React 组件的粒度不是 web 组件的粒度。它们的设计优先考虑不同的功能和使用形式。如果你试着像使用另一种一样使用它们,你会与它们的天然颗粒度的方向作斗争。

Web 组件有自己的颗粒度,它更倾向于增强而非替换。我说这个是什么意思?

典型的 React 组件可能如下所示

<UserAvatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
/>

你可以以类似的方式编写 web 组件,比如

<user-avatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
></user-avatar>

但 web 组件(在浏览器中)的独特功能是,它们可以在 JavaScript 之前进行渲染。React 组件无法做到这一点。

web 组件的这一特性鼓励了可组合性的设计。相比于空  “shell 组件” 获取数据并(独占式使用 JavaScript)渲染其全部内容,web 组件鼓励使用 HTML 编写核心内容,然后将其封装在一个自定义元素中,从而通过附加功能增强其内容。

<user-avatar>
  <img src="https://example.com/path/to/img.jpg" alt="..." />
</user-avatar>

这种特定的组件化风格就是 Jeremy 所说的 “HTML Web 组件”:

如果你的自定义元素为空,那么它不是 HTM web 组件。不过你使用自定义元素来扩展现有的标签,它就是一个 HTML web 组件。

React 鼓励了一种替代的心态:“忘记了浏览器可以做什么;改为在 React 组件中做所有事情,即使你正在重新发明轮子。”

HTML web 组件鼓励增强的心态。

“HTML web 组件"这一术语,与 “JavaScript web 组件”形成对比,后者是一个空元素,其功能和内容完全依赖于 JavaScript。

根据我前面的例子,这将是一个 JavaScript web 组件:

<user-avatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
></user-avatar>

它完全依赖于 JavaScript 的存在,对于没有 JavaScript 的最终用户来说毫无意义。

而这将是一个 HTML web 组件:

<user-avatar>
  <img src="https://example.com/path/to/img.jpg" alt="..." />
</user-avatar>

它在没有 JavaScript 的情况下具有意义和内容,然后通过它的存在而得到增强。

这种扩展/增强而非替代的想法很有趣。

在 Web 上,从长远来看,增强技术获胜

增强方法在 web 上效果最好,因为1)网络的粒度鼓励增强以提高弹性,2)这确实是迭代更改像 web 这样大的东西的最佳方式。

最终,所有与 web 相邻的框架的最佳想法都被纳入到平台中,以增强现有技术的方式工作,而不是大规模取代它。

XHTML 想取代 HTML4,但 HTML5 想增强它。HTML5 赢了。

网络库想要取代 XMLHttpRequest,他们的最佳想法最终被移植到了 fetch 标准中——如今,fetch 标准不仅仅存在于浏览器中!

Sass 和 jQuery 的最佳想法被移植到浏览器中。

Typescript 最好的想法是使用浏览器,但在某种程度上可以增强而不是取代现有的内容。

对于 web 组件,您甚至可以说 React 的组件模型正在移植到浏览器中。但这是以一种有效的方式来增强网络的工作方式,而不是取代它。

我的结论是:如果你想延长寿命,选择增强和增强的技术方法,而不是替换。web 的颗粒度沿该方向排列。