Web组件简介：它们是什么以及它们如何工作_极简慕枫

可重复使用的代码是现代网页设计的基石。有了每个前端框架和Sass库，您可以找到任何问题的解决方案。

但可重复使用的动态元素仍然是一项正在进行中的工作，它们令人难以置信。这些元素称为Web组件，它们依赖于等待W3C最终确定的规范。

没有多少开发人员知道Web组件如何工作，因为他们没有得到太多的宣传。因此，在本指南中，我将介绍Web组件的详细信息，说明它们如何工作，它们的作用以及它们可能从根本上改变前端编码的未来的原因。上海网站设计

那么什么是Web组件？

Web组件是通过可重用代码创建的DOM元素。每个组件都旨在节省开发人员在构建在许多页面上使用类似元素的网站时的时间。

这些功能仍处于试验阶段，但计划在不久的某个时候由W3C采用。

Web组件背后的想法是创建动态的界面元素，而无需编写自定义JavaScript代码或构建自己的库。

例如，如果您想将地图嵌入到页面中，则可以添加一个标签。 这会自动将Google Maps嵌入代码拉入您的网页 - 但仅限于支持这些功能的浏览器。

在主站点上，您会发现许多预先编码的元素可以嵌入到一顶帽子中。这些都需要安装，您的浏览器需要支持许多支持Web组件的技术。

如果您浏览Web组件介绍指南，它会解释组件是基于四种独特的W3C技术构建的：

• 自定义元素 - 将新的HTML元素添加到DOM中所需

• Shadow DOM - 关于如何创建由HTML标记封装的唯一DOM的规则

• HTML导入 - 这些允许您导入HTML代码并在其他页面中重用您的组件

• HTML模板 - 编写可重用代码并声明其外观的必要条件

这些功能中的每一个都是独立的，并在W3C网站上有自己的规格。但是这些规范结合在一起，形成了Web组件的理想主义概念。

最难理解的部分是组件如何在任何地方复制代码。这一切都来自HTML导入，这仍然是一项正在进行的工作。

但是，一旦完成这些功能，您应该能够创建任何您想要的HTML标记，并将其重新用作Web组件。您甚至可以与其他人共享此代码以创建开源组件。可能性几乎是无穷无尽的！

最终，这里的目标是降低复杂性并使开发更简单。前端开发人员只想解决问题并让他们的网站正常运行。编码可以很有趣，但它始终是达到目的的手段。

Web组件可以解决基本问题，并为开发人员提供更快速的解决方案。

什么是聚合物？

由于构建Web组件需要大量原始代码，因此开发人员希望使该过程更容易。这可以通过像Polymer这样的框架来完成，这是一个用于WC开发的开源工具。

基本上，Polymer是一个基于Web组件API编写的框架。它是一个抽象层，因此您可以使用更少的代码更快地编写组件。

它是为数不多的WC库之一，由谷歌Chrome开发团队维护。所以这可能是长期存在的，更不用说它已经拥有相当大的用户群。

信不信由聚合物已经在一些Google产品中使用，例如新的Google协作平台。这似乎是一个奇怪的选择，因为Polymer没有那么多的浏览器支持。

但是，您可以使用polyfill 增加支持。您实际上可以在主站点上找到官方polyfill的列表，列出GitHub仓库中的资源和代码片段。

如果您使用聚合物和Web组件polyfills，您可以获得对所有四种W3C技术的大型浏览器支持。你不会找到像IE6这样的传统浏览器的大量支持，但这些是当前稳定的浏览器：

• 谷歌浏览器

• 火狐

• 边缘

• Safari 7+

• IE11

• 移动Chrome（Android）

• 移动Safari（iOS 7+）

像Opera这样的小型浏览器可能不支持所有内容。但是这个列表足够完整，您可以开始学习Polymer并查看今天的结果。

聚合物与反应

最近这场辩论爆发了这篇文章以及其他人的许多反应。

争论的焦点是，Facebook的React库基本上是Web组件的强大替代品。它使用自己的shadow DOM并依赖React组件来创建更快的接口。

考虑到有这么多开发人员正在学习React，它很快成为绑定和自定义页面元素的事实上的选择。

Web组件和React都可以帮助您实现相同的目标：为动态网站创建可重用的元素。

但是，为什么组件会是更好的选择有很多原因。要学习React，你需要进入npm，Gulp / Grunt，Babel，也许是JSX和其他一些技术。这不是一个容易的框架。

Web Components背后的理念正是关于易用性，尤其是Polymer。拿起它然后开始建造。

我认为所有严肃的前端开发者都应该学习两者。React无疑是对JS社区的一个主要影响，而Web Components仍然在向前推进。

如果您只创建较小的站点而没有太多的用户交互，那么Web Components / Polymer是更好的途径。

但这是一场激烈的辩论，主要归结为个人观点。有一个很好的Stack问题涵盖了这个主题，如果你被夹在这两个库中，我绝对建议阅读它。

如果有疑问，当您刚接触开发时，我推荐Polymer over React。它有一个较小的学习曲线，你会很快看到你的劳动成果。

未来与超越

在撰写本文时，对Web组件中使用的API和技术几乎没有本机支持。一般来说，他们在Chrome中比其他地方有更多的支持，但还有很长的路要走。

但是，如果您愿意学习Polymer并深入了解polyfills，您实际上可以在所有主流浏览器中运行Web组件。对于愿意突破界限并使用最新技术的前端开发人员来说，这是一个好消息。

由于Polymer是一个谷歌项目，因此它将在未来几年内存在。如果您愿意深入研究组件，那么Polymer是必不可少的工具。

现场的例子就在这里。

如果您想要处于前端开发的最前沿，那么花一些时间来使用Web组件。您将学习很多关于可重用代码以及如何创建有价值的组件，这些组件最终可以节省您的时间，可能在许多不同的项目上。

 上海网站设计