用X-TAG构建自定义的Web组件

钥匙要点

Microsoft支持的JavaScript库
• X-TAG提供了一个紧凑的，功能丰富的接口，用于快速Web组件开发，主要关注自定义元素API。
> X-TAG最初是一个Mozilla项目，但现在是一个Microsoft支持的项目，类似于Google支持聚合物框架。 使用XTAG.REGISTER（）方法，使用X-TAG创建自定义元素是完全由JavaScript驱动的。此过程涉及定义自定义元素的生命周期，访问者，方法和事件。
• > 与聚合物相比，
X-TAG提供了更简单的API用于实现自定义元素，这是旨在保持其设置轻巧灵活的开发人员的合适选择。但是，它没有提供聚合物具有的复杂功能。
• >
在Google和Mozilla的Web组件解决方案之后，现在轮到Microsoft通过公开发布X-TAG库进入此空间了。官方网站将其定义如下：

> X-TAG是一个由Microsoft支持的开源，JavaScript库，它包装了W3C标准Web组件API家族，以提供一个紧凑的，功能丰富的界面，用于快速组件开发。 X-TAG为所有Web组件API（自定义元素，阴影DOM，模板和HTML Imports）提供功能挂钩，但它仅需要自定义元素支持才能操作。在没有本机自定义元素支持的情况下，X-TAG使用一组与Google聚合物框架共享的多填充。

>换句话说，X-TAG是Microsoft对Google的聚合物是什么。他们俩唯一常见的是基础多填充，它可以支持非支撑浏览器中的Web组件。

x-tag与聚合物有何不同？ 聚合物将所有四种Web组件技术组合在一起，即HTML导入，自定义元素，Shadow DOM和HTML模板中的单个软件包。它为开发人员提供了易于使用的API，用于构建自定义Web组件。另一方面，X-TAG仅提供自定义元素API来构建自定义Web组件。当然，您还可以与X-Tag库一起使用其他Web组件API。

> Mozilla项目不是X-Tag吗？

是的，但是现在不再是。经过一番挖掘，我设法发现X-Tag项目的原始开发人员Daniel Buchner曾在Mozilla创建图书馆时在Mozilla工作。但是从那以后，他搬到了微软并继续该项目。此外，他是前莫济式的帮助，是图书馆的唯一贡献者。因此，它现在是一个由前莫油创立的Microsoft支持的项目。

>

开始使用X-Tag

开始

>在本文中，我们将使用X-TAG库构建自定义元素，以使用以下标记嵌入Google Map Street视图：

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span>></span></span></span>

自定义元素将具有两个属性，即纬度和经度，以指定位置的坐标。由于这些属性是可选的，因此我们还将为每个属性分配每个属性，以防开发人员未能在标记中定义它们。

。

让我们首先在我们的文档的中包括x-tag javaScript库。

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

>在文档的中包括x-tag库很重要。这样就可以在渲染引擎遇到我们将在内使用的自定义元素标记之前完全下载和解析。

定义自定义元素

与聚合物不同，用X-TAG创建自定义元素的过程完全由JavaScript驱动。 X-TAG库提供了许多有用的方法，回调和属性，以定义我们元素的自定义行为。一个用于创建具有X标签的自定义元素的典型骨架，如下所示：

register（） - 这是库中最重要的方法。它接受自定义元素的名称为第一个参数，然后是对象定义。顾名思义，这负责在DOM。

内容 - 通常，自定义元素可能需要一些其他标记来进行结构或演示。这接受HTML字符串或多行注字符串，将标记注入DOM。

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

>生命周期 - 这包含有用的回调方法，旨在针对自定义元素的生命周期中的不同阶段。

• 配件 - 这为访问对象属性，设置器和getters提供了一个常见的接口，并将它们与相应的HTML属性链接在一起。当属性链接到getter/setter时，它们的状态始终保持同步。
>
• 方法 - 自定义元素可能需要一些自己的独特方法来提供所需的功能。只需将方法对象添加到顶级XTAG.REGISTER（）定义对象，然后在其中包含所有用户定义的方法。
>事件 - 这是负责将事件附加到自定义元素的原因。该对象的键是您希望附加到自定义元素（例如TAP，focus等）的事件的名称。
• >
• 基本思想是使用iframe嵌入Google地图，并以以下格式指定SRC URL：
获得API_KEY，请按照此处描述的步骤操作。拥有api_key后，我们将在生命周期对象的创建回调方法中创建一个iframe，并以上述格式指定SRC属性。
• >

  <span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span></span></span></span>

>

>上面的代码有效，但我们需要摆脱iframe.src中的硬编码坐标值，而是直接从自定义元素属性来源。为此，我们将利用登录对象，其中属性名称构成密钥。我们通过声明属性来将它们与HTML属性链接：{}。

然后，我们可以在指定SRC URL时直接使用这些变量：

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

应用修饰触摸

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

造型自定义元素类似于造型任何其他HTML标签。类，ID和属性选择器与自定义元素一起按预期工作。例如，我们将在新创建的自定义元素中添加一个盒子阴影和边界 - 拉迪乌斯。

>

使用自定义元素现在很简单，就像在

中包括以下标记：：

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><api_key>></api_key></span>&location=<span><span><latitude>></latitude></span>,<span><span><longitude>></longitude></span></span></span></span></span>

最终结果在下面的Codepen中可见：

>

>请参阅codepen上的sitepoint（@sitepoint）的pen x-tag

<span>// Insert your API key here
</span><span>var API_KEY = <api_key>;
</api_key></span>
xtag<span>.register('google-map', {
</span>  <span>lifecycle: {
</span>    <span>created: function() { 
</span>      <span>var iframe = document.createElement('iframe');
</span>      iframe<span>.width = 600;
</span>      iframe<span>.height = 600;
</span>      iframe<span>.frameBorder = 0;
</span>      iframe<span>.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + 
</span>                    <span>API_KEY + '&location=40.7553231,35.3434';
</span>      <span>this.appendChild(iframe);
</span>    <span>}
</span>  <span>}
</span><span>});</span>

自定义元素。

>尽管浏览器对Web组件的支持有点粗略，但是我们使用X-TAG库与Polyfill的演示应该在包括IE9及以上在内的所有现代浏览器上使用。最终想法 与聚合物相比，X-TAG提供了更简单的API来理解和实现自定义元素，这主要是由于聚合物缺乏复杂的功能。如果您打算保持设置轻巧和灵活，并且对其他Web组件API没有好的用例，那么X-TAG肯定是该工作的合适候选人。 经常询问的问题（常见问题解答）有关使用x-tag 构建自定义Web组件的问题

什么是x-tag，为什么在Web开发中很重要？

x-tag是一个小的JavaScript库，可以简化自定义，可重复使用的HTML元素的创建。它是Web组件套件的一部分，其中还包括阴影DOM，HTML模板和自定义元素。 X-TAG在Web开发中很重要，因为它允许开发人员创建自己的HTML元素，封装其代码并保持其代码库清洁和可维护。它还促进了代码重用，它可以大大加快开发过程。

> x-tag与其他Web组件库有何不同？

x-tag是独一无二的，它的简单性和易于使用。与其他图书馆不同，X-Tag不需要任何构建步骤或转介，而且足迹很小。它还具有简单，直观的API，可以轻松定义自定义元素及其行为。此外，X-TAG与所有现代浏览器兼容，可以与其他库和框架一起使用。

>我可以与其他JavaScript库或框架一起使用X-TAG？它不会施加任何限制或特定的架构模式，因此您可以轻松地将其集成到现有项目中。无论您是使用jQuery，React，Angular还是Vue.js，都可以使用X-TAG创建可以在您的应用程序中重复使用的自定义元素。

>如何使用X-定义自定义元素标签？

用X-TAG定义自定义元素很简单。您只需调用XTAG.REGISTER函数，以自定义元素的名称和定义其行为的对象传递。该对象可以包括生命周期方法，登录器和事件处理程序。这是一个基本示例：

XTAG.REGISTER（'my-element'，{

> lifeCycle：{ create：function：function（）{ this.textContent ='hello，world！'' ;
}
}
}）;

> x-tag中的生命周期方法是什么？生命周期方法是在自定义元素生活的不同阶段被调用的特殊方法。 X-TAG支持四种生命周期方法：创建，插入，删除和属性。这些方法允许您在创建元素，添加到DOM，从DOM中删除或其中一个属性更改时执行特定的操作。
>
如何使用X-TAG处理事件？ >
X-TAG提供了一种处理自定义元素事件的简单方法。注册元素时，您可以在事件对象中定义事件处理程序。例如，要处理单击事件，您将执行类似的操作：

xtag.register（'my-element'，{

evest：{ 🎜> console.log（'element clicked！'）;

}

}

}）;

我可以使用x-tag创建shadow dom元素？

是的，x-tag支持阴影元素的创建。这使您可以封装元素的样式和标记，使其与文档的其余部分分开。要创建阴影根，您可以在元素创建的生命周期方法内使用this.createshadowroot（）方法。

我如何样式我的自定义元素？

您只需样式的自定义元素像其他任何HTML元素一样，使用CSS。如果您的元素使用Shadow dom，则可以在阴影根内包含一个

>我可以使用X-tag创建自定义表单元素吗？

是的，是的，x-tag可以是用于创建自定义表单元素。但是，请记住，默认情况下，自定义表单元素不会参与表单提交或约束验证。您将需要为这些功能提供自己的逻辑。

> x-tag是否仍维护和支持？

> > > > > > > >>

X-TAG无法积极维护X-TAG。最后一个版本是在2017年。但是，图书馆稳定，仍然可以在项目中使用。如果您遇到任何问题或需要新功能，则可能需要自己实现它们或考虑使用其他库。

以上是用X-TAG构建自定义的Web组件的详细内容。更多信息请关注PHP中文网其他相关文章！