杭州网站设计:如何使用Web组件创建自己的HTML元素

2019.08.02 mf_web

178

Web组件目前正兴奋地被称为即将到来的“ 网络开发的构造转变 ”,承诺永久地重塑网页设计前景。大型企业正在向前发展,将网络组件变为现实。Google和Mozilla都已逐步推出原生浏览器支持。

你问的网页组件是什么?杭州网站设计简而言之,Web组件为您提供了一种创建自己的自定义HTML元素的方法,这些元素可以执行您需要的任何内容。您可以将所有内容整理成漂亮,整洁的小型自定义HTML元素,而不是使用详细标记,长脚本和重复代码来加载您的网站。

了解Web组件

了解Web组件如何允许自定义HTML元素的最简单方法是首先查看我们已经从HTML5中了解的现有元素:<video>标记。使用此元素,您只需几行代码即可放置视频,例如:

您可能只看到上面的几行HTML,但这里是<video>元素在幕后的真实情况:

默认情况下,浏览器隐藏所有详细的代码,因此您不需要查看它或担心在您想要放置视频时编写它。你只重击在你<video>和<source>标签,你是启动和运行。 

以前,只有浏览器供应商才能以这种方式创建元素。但想象一下,如果您可以将自己的相同方法用于其他类型的内容吗? 

以图片幻灯片为例。通常,您需要几轮带有特定类名称的嵌套div来处理幻灯片包装,包装每张幻灯片以及添加标题和缩略图。您还需要通过一些内联jQuery / JavaScript为幻灯片转换效果设置任何整体幻灯片选项。

如果你可以跳过所有这些而只是使用:

1
2
3
4
<slide-show transition="fade">
<slide src="slideone.jpg" thumb="slideone_thumb.jpg" caption="Look at this image">
<slide src="slidetwo.jpg" thumb="slidetwo_thumb.jpg" caption="Look at this other image">
</slide-show>

使用Web组件,这正是您可以做的。 

创建自己的HTML元素

如果您想提供一种简洁,易于与放置内容的方法进行交互,否则这些内容会变得臃肿和笨拙,您可以继续创建自己的Web组件。

Web组件也可以轻松共享,因此当开发人员加入时,您可以轻松获取最常见项目要求的预构建Web组件。我们已经看到自由共享的组件从   语音识别中弹出来。 

以  展示建设者 ..

让我们来看看Web组件幕后的内容。

是什么使Web组件

目前存在的Web组件由四部分组成:

  • 自定义元素

  • 影子DOM

  • 模板

  • HTML导入

自定义元素

自定义元素正是它们听起来的样子:可以命名为您选择的任何元素,并以您想要的任何方式操作。当我以任何方式说什么时,我的意思是。例如,我提出了<x-gangnam-style>元素:

现场演示 - 将鼠标悬停在栏上

自定义元素以最简单的形式声明,如下所示:

1
2
3
<element name="x-gangnam-style">
...
</element>

创建自定义元素时,可以从头开始完成,也可以扩展现有的HTML元素(<button>例如),并为其提供所需的修改功能或演示文稿。

1
2
3
<element name="custom-button" extends="button">
...
</element>

注意:值得指出的是,由于并发症,该<element>标签在2013年已被弃用。它可能会产生回报,但与此同时还有polyfill选项,我们将在稍后讨论。感谢Addy Osmani  指出这一点!

暗影DOM

Shadow DOM实际上是Web组件工作方式的核心方面。之前,我们查看了HTML5 <video> 元素,并展示了尽管只看到几行代码,但实际上默认隐藏了相当多的代码。隐藏代码所在的地方称为“Shadow DOM”。

浏览器供应商多年来一直使用这个shadow DOM来本地实现输入,音频,视频等元素。通过Web组件,任何开发人员现在都可以使用它。

一般的想法是你在标记放置期间获取所有不需要看到的代码,并在Shadow DOM中隐藏它,这样它就不会妨碍它。这使您只需处理相关信息,例如使用<video>元素时的高度,宽度和源文件位置。

使用Shadow DOM最酷的事情之一就是每个实例都是它自己的小自包含世界。因此,如果您在元素中包含样式和脚本,则它们不会意外泄漏并影响页面上的任何其他内容。 

相反,页面上其他地方的CSS和JavaScript不会影响您的Web组件,除了您可能专门创建的样式挂钩以允许外部CSS定位。所有这一切都意味着不再担心命名空间的ID和类名以避免冲突。

如果你想看看影子DOM的样子,那很简单。确保您正在运行Chrome的最新安装,打开开发工具,单击齿轮图标以打开设置,然后选中标记为显示用户代理阴影DOM的框:

然后,当您使用shadow DOM检查任何元素时,您将看到其完整代码。通过检查<x-gangnam-style>带有和不带有阴影DOM 的元素来试试:http:  //html5-demos.appspot.com/gangnam

对于影子DOM的完整纲要,请查看:  Shadow DOM简介

模板

我们已经介绍了自定义元素如何只关注相关信息,而所有剩余代码都在shadow DOM中被隐藏。Web组件中的模板包含剩余代码的所有表示元素。

作为定义标记<template>...</template>放置的Web组件的代码的一部分,在这些标记之间包含组件所需的任何HTML和CSS。

例如,查看创建<x-gangnam-style>Web组件的代码。它的开始<template>标记位于第4行,其结束</template>标记位于第201行。在这些标记之间,您将看到负责创建定位和动画的所有CSS,以及放置所涉及的每个图像的HTML。 

HTML导入

HTML导入允许您采用上述所有内容并实际使其在您的页面上运行。Web组件在外部HTML文件中定义,因此需要导入该文件才能使自定义元素起作用。HTML导入通过<link>标记来处理,您可以通过标记导入外部CSS文件。

例如,在使用<x-gangnam-style>Web组件之前,您必须导入定义它的HTML文件,如下所示:

1
<link rel="import" href="/components/x-gangnam-style.html">

浏览器支持和Polyfill

潜在客户首先使用它们的想法非常吸引人,但目前浏览器支持还不可行。目前的支持状态如下:

http://jonrimmer.github.io/are-we-componentized-yet/

原生支持正在为Chrome,Opera和Firefox实施,但尚未完成。IE和Safari还没有公布他们的计划,但是考虑到大多数  浏览器最终将支持Web组件,其他浏览器可能会效仿。

现在,如果您想开始使用Web组件,则需要使用其中一个可用的polyfill。好消息是两个最流行的解决方案是由Google和Mozilla创建的,因此我们可以期待看到与本机支持最终运营方式的一致性。

Google的聚合物

很难不倾向于使用Polymer,  因为Chrome现在是使用最广泛的浏览器,您可能会考虑在开发过程中考虑如何将Google组件代码编入索引。

Polymer附带了一个完整的预构建Web组件库。它包括功能导向的“ 聚合物核心元素 ”和面向设计的“ 纸元素”。

使用Polymer创建自定义元素时,而不是使用<element name="...">您使用  的格式  <polymer-element name="...">。

聚合物将自己描述为处于“开发者预览”状态,而不是绝对生产就绪,但他们也说 

...尽管标签很多人已经在生产中使用聚合物取得了成功。

浏览器支持

  • Chrome Android

  • 加纳利

  • 火狐

  • IE 10+

  • Safari 6+

  • 移动Safari

如果你需要迎合IE9,估计它占据了  1.9%  到  5.11%  的市场份额,不幸的是你对Polymer来说运气不好。但是,您仍然可以使用Mozilla的X-Tags。

Mozilla的X-Tags

X-Tags是由Mozilla创建的JavaScript库,目前,它比Polymer更具优势,因为它的浏览器支持范围更广。如果这是您的主要考虑因素,X-Tags可能是您的首选。

浏览器支持

  • Firefox 5+桌面和移动

  • Chrome 4+

  • Chrome Android 2.1+

  • Safari 4+桌面和移动设备

  • IE9 +

  • Opera 11+桌面和移动设备

IE8支持

现在,如果您需要支持IE8,那么遗憾的是,Web组件可能不适合您,因为可用的polyfill支持IE9 +。估计IE8用户大约在2.1%  到3.82%之间,但当然如果你自己的统计数据有所不同,那么你必须对你的浏览器支持应该延伸多久做出判断。

Ember.js和AngularJS组件

您可以准备过渡到使用Web组件的一种可能方法是暂时使用Ember.js或AngularJS  。两者都有自己的组件创建系统,并且都承诺在完全可用时转换为利用本机Web组件代码。

结论

杭州网站设计我希望您喜欢阅读这些Web组件的概述以及您应该关注的原因!还有很多内容可以深入研究,但是考虑到这些基础知识,我们有很多机会可以获得有关实际构建自定义Web组件的教程。你怎么看?在什么情况下你会看到自己使用它们?

最新案例

联系电话 400-6065-301

微信咨询 寒总监