分類
數字趨勢

什么是基于组件的体系结构,为什么重要?

Web组件使您可以创建自定义HTML元素。您会发现现代前端JavaScript框架中使用最频繁的Web组件。但是“ Web组件”实际上是W3C Web标准,不需要有用的框架。

什么是Web组件?

Web组件的工作方式类似于Lego for HTML。它们是有助于使HTML更有用和可重用的技术的集合。有关更多背景信息,请查看W3 Web组件规范Web组件上Mozilla开发人员网络页面

这些技术是:

  • 自定义元素
  • HTML模板
  • 影子DOM
  • ES模块

让我们依次看看这些。

自定义元素

自定义元素是JavaScript使功能更强大的特殊HTML元素。它们最适合用于显示始终最新的数据而无需回调。您也可以根据需要命名。

HTML模板

模板是HTML的可重用块。它们非常适合放在多个位置或在多个页面上显示的项目,例如页眉,页脚和菜单。

影子DOM

DOM是将您在浏览器中看到的内容绑定到HTML代码的粘合剂。Shadow DOM是DOM的一部分,可让您将标记,样式和功能分开。

通过使用影子DOM,每个自定义元素都可以获取自己的DOM。这样做可以防止样式和JavaScript函数修改您不希望受到影响的元素。

ES模块

这些是使Web组件正常工作的特殊JavaScript库。

Web组件的主要优点之一是您可以在任何地方重复使用自定义HTML。因为Web组件是纯HTML和JavaScript,所以它们与原始JavaScript应用程序以及框架兼容。您可以在webcomponents.org上了解更多信息

具有框架的Web组件

开始使用Web组件的最简单方法是使用框架。在Web组件出现之前,Angular.js提供了类似的功能,称为指令。在组件成为标准之前,他们做了很多与组件相同的工作。

既然组件是一个标准,那么就可以在Web组件概念上构建其他框架。它们使使用Web组件变得更容易,更简化,并且使使用低级JavaScript的许多复杂性抽象化。

Vue

Vue.js是一个流行的基于组件的前端框架,在开发人员中非常受欢迎。 Vue易于学习且易于编程。该框架还使向基本HTML网站添加简单组件变得容易。

相关:什么是Vue.js?

反应

React是已经在商业上广泛采用的前端框架。该框架在开发人员中也很受欢迎。 React通过将HTML,CSS和JavaScript放在一个脚本中来简化Web开发而闻名。

要了解更多信息,请查看我们的教程汇总,以学习React制作Web应用程序

没有框架的Web组件

您可以使用纯JavaScript编写Web组件。但是这样做很难,特别是对于初学者。不过,您可以将轻量级库添加到现有代码中。它们为您提供了现代JavaScript的便捷操作,而没有整个框架的高昂开销。

聚合物

Polymer是Google对Web组件运动的贡献。它是轻量级库的集合,这些库使创建自定义元素比使用普通JavaScript更加容易。它具有用于创建自定义元素和模板的库。

Polymer具有用于Polyfill的库,以确保与旧版浏览器兼容。材质设计组件的早期版本也将材质设计添加到纯HTML中。

另一个选择是Slim.js,这是一个多合一的库,可轻松添加到简单的网站中。它简化了自定义元素的创建过程,并提供对影子DOM的直接访问。

模版

最后但并非最不重要的一点是出色的模板,它为您提供了两全其美的优势。它类似于React,并提供了许多相同的功能。但是,它为您提供了框架级别的功能,而无需将您锁定在重型框架中。

模具还可以预编译您的组件,从而使它们更轻巧。相反,像React这样的框架会将整个框架加载到浏览器中,并即时编译组件。到Stencil组件进入浏览器时,它们只是原始的JavaScript和HTML,没有多余的负担。

Web组件和Web设计

使用组件的主要障碍之一是缺少设计框架,例如Bootstrap 。从技术上讲,您可以将Bootstrap与基于组件的网站一起使用。还有一个React的Bootstrap端口。但是,如果您要使用Stencil或Vue之类的组件,则可能会对组件和框架之间缺乏兼容性感到不满意。

传统网页设计框架

好消息是,有几个设计框架可供选择。 Vaadin提供了一些漂亮的成分。对于企业风格,有OpenUI5 。就像已经提到的,Google的Polymer也提供Material UI组件。

坏消息是,您在任何这些框架中都找不到与Bootstrap相同的体验。而且它们缺少您在大多数设计框架中看到的许多元素,例如字体。

什么是基于组件的设计框架方法?

诸如Web组件之类的不同技术应采用不同的方法。速球是最好的方法。对于设计师来说,它更容易使用,但是它可以为开发人员提供坚实而干净的基础。 Tachyons以移动为先,并提供一致的设计,既细腻又能产生漂亮的效果。

短剑将CSS类分解为最小的用途。例如,这是使用按钮创建按钮的方式:

 <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>

在大多数设计框架中,将为链接提供一个按钮类,为另一个按钮提供圆角。在Tachyons中,您可以动态选择填充,边框,颜色等。所有缩写起初看起来似乎都很复杂,但是它们遵循易于学习的一致命名模式。

最小的类是一种不适用于传统网站的方法,因为它会阻塞您的HTML类。但是对于基于组件的体系结构,您可能会在整个应用程序中一遍又一遍地使用相同的按钮。这意味着您只需为整个网站创建一次该按钮。

组件思考

另一个障碍是让您的大脑将齿轮从传统的网站布局更改为基于组件的结构。有两种技术可以帮助您学习思考组件。

原子方法

将网页视为一种有机体。英雄部分,价格指南和用户评论等部分就像有机体的细胞一样。无论您是否重复使用这些组件,您都可以安全地将它们移动到它们自己的组件。

按钮,标题和引号就像原子。原子是最小的部分。当没有必要进一步分解组件时,这就是一个原子。这些通常是您将在整个项目中以及项目之间反复使用的组件。

干法

或者,您也可以忘记所有这些有机物,细胞和原子的废话,然后将其保持干燥。 DRY代表“不要重复自己”。

任何事物,无论大小,都可以成为组件。因此,只需照常编写HTML。当您找到要重用的内容(例如画廊或页脚)时,请将其分解为自己的组件。

您是否应该在下一个项目中使用Web组件?

要考虑的主要点是您的团队和Web标准。

所有主要的浏览器都采用了Web组件。 CanIUse对自定义组件的采用率为93%,对模板的使用率为95% ,因此可以安全使用。并且有一些不支持Web组件的散装填充器。这意味着合规性不是问题。

如果您的团队没有框架或JavaScript经验,那么他们可能很难采用这种新技术。但是如果是这样的话,他们可能会很难采用任何新技术。如果你一个人,那就去吧!建立自己的技能总是一个好主意。

采用Web组件最困难的部分是设计框架的缺乏和学习组件方面的思考。但是我们都涵盖了这两个方面。 Web组件自2014年以来一直存在,因此它们不是一项新技术。但是它们是一种更好的技术。