杭州网站设想:若何操纵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

留言