Polymer教程：自定义元素

Polymer是一个框架，允许使用标准HTML元素创建自定义元素。自定义Web元素提供以下功能-

它提供带有关联类的自定义元素名称。

当您更改自定义元素实例的状态时，它将请求生命周期回调。

如果您更改实例的属性，则将请求回调。

您可以使用ES6类定义自定义元素，并且该类可以与自定义元素相关联，如以下代码所示。

//ElementDemo class is extending the HTMLElement 
class ElementDemo extends HTMLElement { 
   // code here
};

//link the new class with an element name
window.customElements.define('element-demo', ElementDemo);

自定义元素可以用作标准元素，如下所示：

<element-demo></element-demo>

注：

自定义元素名称应以小写字母开头，并且名称之间应包含短划线。

自定义元素生命周期
定制元素生命周期提供了一组定制元素反应，这些反应负责元素生命周期的变化，并在下表中进行了定义。

No.	Reactions & Description
1	constructor 创建元素或定义先前创建的元素时，将调用此元素反应。
2	connectedCallback 当您向文档中添加元素时，该元素反应将被调用。
3	disconnectedCallback 从文档中删除元素时，将调用此元素反应。
4	attributeChangedCallback 每当您更改，追加，删除或替换文档中的元素时，都会调用此元素反应。

元素升级
在通过规范定义自定义元素之前，我们可以使用自定义元素，并且通过向该元素添加定义，该元素的任何现有实例都将升级为该自定义类。

自定义元素状态包含以下值：

未定制-有效的定制元素名称是内置元素或未知元素，它们不能成为定制元素。

未定义-元素可以具有有效的自定义元素名称，但无法定义。

custom-元素可以具有有效的自定义元素名称，可以对其进行定义和升级。

失败-尝试升级无效类的失败元素。

定义元素
可以通过创建扩展Polymer.Element的类并将其传递给customElements.define方法来定义自定义元素。该类包含的是getter方法，该方法返回自定义元素的HTML标签名称。例如：

//ElementDemo class is extending the Polymer.Element 
class ElementDemo extends Polymer.Element {
   static get is() { return 'element-demo'; }
   static get properties() {
      . . .
      . . .
   }
   constructor(){
      super();
      . . .
      . . .
   }
   . . .
   . . .
}

//Associate the new class with an element name
window.customElements.define(ElementDemo.is, ElementDemo);

// create an instance with createElement
var el1 = document.createElement('element-demo');

导入和API

可以通过指定以下三个HTML导入来定义Polymer元素-

polymer-element.html-它指定Polymer.Element基类。

legacy-element.html-它使用Polymer.LegacyElement基类扩展Polymer.Element并添加了1.x兼容的旧版API。它还通过定义传统的Polymer()工厂方法来创建混合元素。

polymer.html-它包含聚合物基类以及辅助元素，这些元素包含在1.x polymer.html中。

在主HTML文档中定义元素

您可以使用HTMLImports.whenReady()函数在主HTML文档中定义一个元素。

例子

下面的示例演示如何在主HTML文档中定义元素。创建一个index.html文件并添加以下代码。

<!doctype html>
<html lang = "en">
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "define-element.html">
   </head>
   
   <body>
      <define-element></define-element>
   </body>
</html>

现在创建一个名为define-element.html的自定义元素，并包含以下代码。

<dom-module id = "define-element">
   <template>
      <h2>Welcome to Web176教程网!</h2>
   </template>
   
   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })  
   </script>
</dom-module>

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出。

Welcome to Web176教程网!

定义旧元素

传统元素可用于使用Polymer函数注册元素，该函数采用新元素的原型。原型应包含，用于定义自定义元素的HTML标签名称。

例子

//registering an element
ElementDemo = Polymer ({
   is: 'element-demo',
   
   //it is a legecy callback, called when the element has been created
   created: function() {
     this.textContent = 'Hello World!!!';
   }
});

//'createElement' is used to create an instance
var myelement1 = document.createElement('element-demo');

//use the constructor create an instance
var myelement2 = new ElementDemo();

生命周期回调

生命周期回调用于完成Polymer.Element类的内置功能的任务。 Polymer使用就绪回调，当Polymer完成创建和初始化DOM元素时将调用该回调。

以下是Polymer.js中的旧式回调列表。

created-在设置属性值和初始化本地DOM之前创建元素时调用。

ready-在设置属性值并初始化本地DOM之后创建元素时调用。

附加-在将元素附加到文档之后被调用，并且可以在元素的整个生命周期中多次调用。

detached-在从文档分离元素之后调用它，并且可以在元素的整个生命周期中多次调用。

attributeChanged-当元素的属性发生更改并且包含与声明的属性不兼容的属性更改时调用。

声明属性

可以在元素上声明属性，以在数据系统中添加默认值和其他特定功能，并且可以将这些属性用于指定以下功能：

它指定属性类型和默认值。

当属性值发生变化时，它将调用观察器方法。

它指定只读状态以停止对属性值的意外更改。

它提供对双向数据绑定的支持，该双向数据绑定会在您更改属性值时触发一个事件。

它是一个计算的属性，它根据其他属性动态地计算一个值。

更改属性值时，它会更新并反映相应的属性值。

下表显示了属性对象支持的每个属性的键。

No.	Key & Description	Type
1	type 它从使用其类型的构造函数确定其属性类型的属性反序列化。	constructor (Boolean, Date, Number, String, Array or Object)
2	value 它指定属性的默认值，如果它是一个函数，则它将返回值用作属性的默认值。	boolean, number, string or function.
3	reflectToAttribute 如果此键设置为true，则它将在主机节点上设置相应的属性。如果将属性值设置为Boolean，则可以将其创建为标准HTML布尔属性。	boolean
4	readOnly 如果此键设置为true，则不能直接通过分配或数据绑定设置属性。	boolean
5	notify 您可以将属性用于双向数据绑定，如果此键设置为true，并且更改属性时，将触发属性名更改事件。	boolean
6	computed 您可以随时通过调用方法来计算参数的值，方法是将方法和值简化为方法名称和参数列表。	string
7	observer 当属性值更改时，调用方法名称，该名称由值简化。	string

属性反序列化

如果在属性对象中配置了属性，则根据指定的类型对与实例上的属性匹配的属性名称进行反序列化，并在元素实例上对属性名称进行反序列化。

如果在属性对象中没有定义其他属性选项，则可以直接将指定的类型设置为属性的值。否则，它将为属性配置对象中的类型键提供值。

配置布尔属性

可以通过将标记设置为False来配置Boolean属性，如果将其设置为true，则不能通过标记进行配置，因为带有或不带有值的属性均等于true。因此，它被称为Web平台中属性的标准行为。

可以通过以JSON格式传递它们来配置对象和数组属性，如下所示：

<element-demo player = '{ "name": "Sachin", "country": "India" }'></element-demo>

配置默认属性值

可以使用properties对象中的value字段配置默认属性，它可以是原始值，也可以是返回值的函数。

例子

以下示例描述了如何在properties对象中配置默认属性值。

<link rel = "import" href = "../../bower_components/polymer/polymer/element.html">

//it specifies the start of an element's local DOM
<dom-module id="polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>	
   </template>

   <script>
      //cusom element extending the Polymer.Element class
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String,
                  //displaying this value on screen
                  value: 'Welcome to Web176教程网!'
               },
               data: {
                  type: Object,
                  notify: true,
                  value: function() { return {}; }
               }
            }
         }
      }
      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

输出

运行上一个示例中所示的应用程序，然后导航到http://127.0.0.1:8000/。以下将是输出。

Welcome to Web176教程网!

只读属性

通过在属性对象中将readOnly标志设置为true，可以避免对生成的数据进行意外更改。元素使用约定_setProperty（value）的setter来更改属性值。

例子

以下示例描述了在属性对象中使用只读属性的情况。创建一个index.html文件，并在其中添加以下代码：

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

Now, create another file called my-element.html and include the following code.

<link rel = "import" href = "bower_components/polymer/polymer/element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop = "{{demoProp}}"></prop-element>
      <p>Present value: <span>{{demoProp}}</span></p>
   </template>

   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

接下来，再创建一个名为prop-element.html的文件，并添加以下代码。

//it specifies the start of an element's local DOM
<dom-module id="prop-element">
   <template>
      <button on-click="onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

输出

运行上一个示例中所示的应用程序，然后导航到http://127.0.0.1:8081/。以下将是输出。

单击按钮后，它将更改值，如以下屏幕截图所示。

将属性反映到属性

通过将属性配置对象中的属性上的reflectToAttribute设置为true，可以将HTML属性与属性值同步。

属性序列化

在将属性反映或绑定到属性时，可以将属性值序列化为属性，默认情况下，可以根据值的当前类型对值进行序列化。

字符串-无需序列化。

日期或数字-使用toString序列化值。

布尔值-将显示的非值属性设置为true或false。

数组或对象-使用JSON.stringify序列化值。

作者：terry，如若转载，请注明出处：https://www.web176.com/polymer/2281.html