el-tag组件拖动_使用X-Tag构建自定义Web组件

最新推荐文章于 2024-07-29 17:20:31 发布

culi3182

最新推荐文章于 2024-07-29 17:20:31 发布

阅读量754

点赞数

文章标签： java vue javascript css js ViewUI

原文链接：https://www.sitepoint.com/building-custom-web-components-with-x-tag/

版权

本文介绍了微软的X-Tag库，它是如何简化Web组件开发的，与Google的Polymer的异同。通过示例展示了如何使用X-Tag创建自定义元素，以及如何应用样式和处理事件。

摘要由CSDN通过智能技术生成

el-tag组件拖动

After Google and Mozilla‘s solutions for web components, it is now Microsoft’s turn to enter this space with their public release of the X-Tag library. The official website defines it as follows:

继Google和Mozilla针对Web组件的解决方案之后，现在该轮到Microsoft公开发布X-Tag库进入这一领域了。官方网站将其定义如下：

X-Tag is a Microsoft supported, open source, JavaScript library that wraps the W3C standard Web Components family of APIs to provide a compact, feature-rich interface for rapid component development. While X-Tag offers feature hooks for all Web Component APIs (Custom Elements, Shadow DOM, Templates, and HTML Imports), it only requires Custom Element support to operate. In the absence of native Custom Element support, X-Tag uses a set of polyfills shared with Google’s Polymer framework.

X-Tag是Microsoft支持的开放源代码JavaScript库，该库包装了W3C标准Web组件 API家族，以提供紧凑，功能丰富的界面来快速进行组件开发。虽然X-Tag为所有Web组件API(自定义元素，Shadow DOM，模板和HTML导入)提供功能挂钩，但仅需要自定义元素支持才能运行。在没有本地Custom Element支持的情况下，X-Tag使用了一组与Google的Polymer框架共享的polyfill 。

In other words, X-Tag is to Microsoft what Polymer is to Google. The only thing common to both of them is the underlying polyfill that enables support for web components in non-supporting browsers.

换句话说， X-Tag对Microsoft而言就像Polymer对Google一样 。两者唯一的共同点是底层的polyfill，它可以在不支持的浏览器中支持Web组件。

X-Tag与聚合物有何不同？ (How is X-Tag Different than Polymer?)

Polymer combines all four web component technologies, namely, HTML Imports, Custom Elements, Shadow DOM and HTML Templates into a single package. It provides the developer with an easy-to-use API for building custom web components. On the other hand, X-Tag only provides the Custom Element API to build custom web components. Of course, you could also still use other web component APIs in conjunction with the X-Tag library.

Polymer将所有四个Web组件技术(即HTML导入，自定义元素， Shadow DOM和HTML模板)组合到一个包中。它为开发人员提供了用于构建自定义Web组件的易于使用的API。另一方面，X-Tag仅提供定制元素API来构建定制Web组件。当然，您还可以将其他Web组件API与X-Tag库结合使用。

X-Tag不是Mozilla项目吗？ (Isn’t X-Tag, a Mozilla Project?)

Yes it was, but it now no longer is. After some digging, I managed to find out that the original developer of the X-Tag project, Daniel Buchner, used to work at Mozilla when he created the library. But since then, he has moved to Microsoft and continued the project. Moreover, he was the sole contributor to the library with help from an ex-Mozillian. Hence, it is now a Microsoft-backed project founded by an ex-Mozillian.

是的，但是现在不再是。经过一番挖掘之后，我设法发现 X-Tag项目的原始开发者Daniel Buchner在创建Mozilla库时曾经在Mozilla工作。但是从那以后，他搬到了Microsoft并继续该项目。此外，在前莫兹利人的帮助下，他是该图书馆的唯一撰稿人。因此，它现在是由前Mozillian建立的Microsoft支持的项目。

X-Tag入门 (Getting Started with X-Tag)

In this article, we will build a custom element using the X-Tag library to embed a Google map street view using the following markup:

在本文中，我们将使用X-Tag库构建自定义元素，以使用以下标记嵌入Google地图街景视图：

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

The <google-map> custom element will have two attributes, latitude and longitude, to specify the coordinates of a location. Since these attributes are optional, we will also assign default values for each one of them in case the developer fails to define them in the markup.

<google-map>自定义元素将具有两个属性latitude和longitude ，用于指定位置的坐标。由于这些属性是可选的，因此如果开发人员无法在标记中定义它们，我们还将为它们中的每一个分配默认值。

Let’s start by including the X-Tag JavaScript library in the <head> of our document.

首先，在文档的<head>中包含X-Tag JavaScript库。

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

It is important to include the X-Tag library in the <head> of the document. This is so that it is downloaded and parsed completely before the rendering engine encounters the custom element markup that we will use inside the <body>.

在文档的<head>中包含X-Tag库很重要。这样一来，便可以在渲染引擎遇到自定义元素标记(在我们将在<body>内部使用)之前完全下载并解析它。

定义自定义元素 (Defining the Custom Element)

Unlike Polymer, the process of creating a custom element with X-Tag is completely JavaScript-driven. The X-Tag library provides a bunch of useful methods, callbacks, and properties to define custom behavior for our element. A typical skeleton for creating a custom element with X-Tag looks like the following:

与Polymer不同，使用X-Tag创建自定义元素的过程完全由JavaScript驱动。 X-Tag库提供了许多有用的方法，回调和属性，以定义元素的自定义行为。使用X-Tag创建自定义元素的典型骨架如下所示：

xtag.register('google-map', {

  content: '',

  lifecycle: {
    created  : function(){ 
      /* Called when the custom element is created */ 
    },
    inserted : function(){ 
      /* Called when the custom element is inserted into the DOM */ 
    },
    removed  : function(){ 
      /* Called when the custom element is removed from the DOM */ 
    },
    attributeChanged: function(attrName, oldValue, newValue){
      /* Called when the attribute of the custom element is changed */
    }
  },

  accessors : {},
  methods   : {},
  events    : {}
});

register() – This is the most important method in the library. It accepts the name of the custom element as the first argument followed by the object definition. As the name suggests, this is responsible for registering the custom element in the DOM.
register() –这是库中最重要的方法。它接受自定义元素的名称作为第一个参数，后跟对象定义。顾名思义，这负责在DOM中注册自定义元素。
content – Quite often, the custom element might need some additional markup for structure or presentation. This accepts an HTML string or a multiline comment string to inject the markup into the DOM.
content –通常，自定义元素可能需要一些额外的标记来进行结构或表示。这接受HTML字符串或多行注释字符串，以将标记注入DOM。
lifecycle – This contains useful callback methods, designed to target different stages in the lifecycle of the custom element.
lifecycle –包含有用的回调方法，旨在针对自定义元素生命周期的不同阶段。
accessors – This provides a common interface to access object attributes, setters, and getters, and link them with the corresponding HTML attributes. When attributes are linked to a getter/setter, their states always remain in sync.
accessors –提供访问对象属性，设置器和获取器的通用接口，并将它们与相应HTML属性链接。当属性链接到获取器/设置器时，它们的状态始终保持同步。
methods – The custom element will likely need some of their own, unique methods to provide the desired functionality. Just add a methods object to the top-level xtag.register() definition object and include all the user-defined methods within it.
methods –自定义元素可能需要一些自己独特的方法来提供所需的功能。只需将methods对象添加到顶级xtag.register()定义对象中，并在其中包含所有用户定义的方法。
events – This is responsible for attaching events to the custom element. The keys of this object are the names of the events that you wish to attach to the custom element like tap, focus etc.
events –这负责将事件附加到自定义元素。该对象的键是您希望附加到自定义元素(例如tap ， focus等)的事件的名称。

The basic idea is to embed the google map using an iframe and specify the src url in the following format:

基本思想是使用iframe嵌入Google地图，并以以下格式指定src网址：

https://www.google.com/maps/embed/v1/streetview?key=<API_KEY>&location=<LATITUDE>,<LONGITUDE>

To get the API_KEY, follow the steps described here. Once you have the API_KEY, we will create an iframe inside the created callback method of the lifecycle object and specify the src property in the above format.

要获取API_KEY ，请遵循此处描述的步骤。获得API_KEY ，我们将在生命周期对象的已created回调方法内创建iframe ，并以上述格式指定src属性。

// Insert your API key here
var API_KEY = <API_KEY>;

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

The above code works but we need to get rid of the hard coded coordinate values in the iframe.src and instead source the values directly from the custom element attributes. To do this, we will make use of the accessors object, with the attribute names forming the keys. We link them with the HTML attributes by declaring attributes: {}.

上面的代码有效，但是我们需要摆脱iframe.src中的硬编码坐标值，而是直接从自定义元素属性中获取值。为此，我们将使用accessors对象，属性名称构成键。我们通过声明attributes: {}将它们与HTML属性链接。

accessors: {
  latitude: {
    attribute: {},
    set: function(value) {
      this.xtag.data.latitude = value;
    },
    get: function() {
      return this.getAttribute('latitude') || "40.7553231"; // Default value
    }
  },
  longitude: {
    attribute: {},
    set: function(value) {
      this.xtag.data.longitude = value;
    },            
    get: function() {
      return this.getAttribute('longitude') || "-73.9752458"; // Default value
    }
  }
}

We can then use these variables directly while specifying the src url:

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

iframe.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + 
             API_KEY+'&location=' + 
             this.latitude+',' + 
             this.longitude;

应用画龙点睛 (Applying Finishing Touches)

Styling a custom element is similar to styling any other HTML tag. Classes, IDs, and attribute selectors work as expected with custom elements. For instance, we’ll add a box-shadow and border-radius to our newly created <google-map> custom element.

设置自定义元素的样式类似于设置任何其他HTML标记的样式。类，ID和属性选择器可与自定义元素一起正常使用。例如，我们将box-shadow和border-radius到我们新创建的<google-map>自定义元素中。

google-map { 
  display: inline-block;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 
              0 1px 5px 0 rgba(0, 0, 0, 0.12), 
              0 3px 1px -2px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-radius: .25em;
}

Using the custom element is now as simple as including the following markup in the <body>:

现在，使用custom元素就像在<body>包含以下标记一样简单：

<!-- Use the custom element -->
<google-map latitude="40.7553231" longitude="-73.9752458"></google-map>

The end result is visible in the CodePen below:

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

See the Pen X-Tag custom element by SitePoint (@SitePoint) on CodePen.

参见Pen X-Tag 自定义元素通过SitePoint( @SitePoint上) CodePen 。

Although browser support for web components is a bit sketchy, our demo using the X-Tag library with the polyfill should work on all modern browsers including IE9 and above.

尽管浏览器对Web组件的支持有些粗略，但是我们的X-Tag库与polyfill结合使用的演示应该可以在包括IE9及更高版本的所有现代浏览器上使用。

最后的想法 (Final Thoughts)

In comparison to Polymer, X-Tag provides a much simpler API to understand and implement custom elements, mostly due to the lack of complex features that Polymer has. If you intend to keep your setup light and flexible, and you don’t have a good use case for the other web component APIs, then X-Tag certainly appears to be the right candidate for the job.

与Polymer相比，X-Tag提供了更简单的API来理解和实现自定义元素，这主要是由于缺少Polymer具有的复杂功能。如果您打算保持设置的轻巧灵活，并且没有其他Web组件API的好用例，那么X-Tag无疑是最合适的选择。