Polymer - Phần tử tùy chỉnh

Polymer là một khuôn khổ cho phép tạo các phần tử tùy chỉnh bằng cách sử dụng các phần tử HTML tiêu chuẩn. Các phần tử web tùy chỉnh cung cấp các tính năng sau:

  • Nó cung cấp tên phần tử tùy chỉnh với lớp liên kết.

  • Khi bạn thay đổi trạng thái của cá thể phần tử tùy chỉnh, nó sẽ yêu cầu gọi lại vòng đời.

  • Nếu bạn thay đổi các thuộc tính trên một cá thể, thì lệnh gọi lại sẽ được yêu cầu.

Bạn có thể xác định phần tử tùy chỉnh bằng cách sử dụng lớp ES6 và lớp có thể được liên kết với phần tử tùy chỉnh như được hiển thị trong đoạn mã sau.

//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);

Phần tử tùy chỉnh có thể được sử dụng làm phần tử tiêu chuẩn như hình dưới đây -

<element-demo></element-demo>

Note - Tên phần tử tùy chỉnh phải bắt đầu bằng chữ cái thường và có dấu gạch ngang giữa các tên.

Vòng đời phần tử tùy chỉnh

Vòng đời của phần tử tùy chỉnh cung cấp một tập hợp các phản ứng của phần tử tùy chỉnh chịu trách nhiệm cho sự thay đổi trong vòng đời của phần tử và được xác định trong bảng sau.

Sr.No. Phản ứng & Mô tả
1

constructor

Khi bạn tạo một phần tử hoặc xác định phần tử đã tạo trước đó, phản ứng phần tử này sẽ được gọi.
2

connectedCallback

Khi bạn thêm một phần tử vào tài liệu, phản ứng phần tử này sẽ được gọi.
3

disconnectedCallback

Khi bạn xóa một phần tử khỏi tài liệu, phản ứng phần tử này sẽ được gọi.
4

attributeChangedCallback

Bất cứ khi nào bạn thay đổi, nối thêm, xóa hoặc thay thế một phần tử khỏi tài liệu, phản ứng phần tử này sẽ được gọi.

Nâng cấp phần tử

Chúng tôi có thể sử dụng các phần tử tùy chỉnh trước khi xác định chúng theo đặc tả và bất kỳ trường hợp hiện có nào của một phần tử sẽ được nâng cấp lên lớp tùy chỉnh bằng cách thêm định nghĩa cho phần tử đó.

Trạng thái phần tử tùy chỉnh chứa các giá trị sau:

  • uncustomized - Tên phần tử tùy chỉnh hợp lệ là phần tử có sẵn hoặc phần tử không xác định, không thể trở thành phần tử tùy chỉnh.

  • undefined - Phần tử có thể có tên phần tử tùy chỉnh hợp lệ, nhưng nó không thể được xác định.

  • custom - Phần tử có thể có tên phần tử tùy chỉnh hợp lệ, có thể được xác định và nâng cấp.

  • failed - Đang cố gắng nâng cấp phần tử không thành công của một lớp không hợp lệ.

Xác định một phần tử

Một phần tử tùy chỉnh có thể được xác định bằng cách tạo một lớp mở rộng Polymer.Element và nó chuyển lớp đến phương thức customElements.define. Lớp chứa là phương thức getter trả về tên thẻ HTML của phần tử tùy chỉnh. Ví dụ -

//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');

Nhập khẩu và API

Các phần tử Polymer có thể được xác định bằng cách chỉ định ba nhập HTML sau:

  • polymer-element.html - Nó chỉ định lớp cơ sở Polymer.Element.

  • legacy-element.html- Nó mở rộng Polymer.Element bằng cách sử dụng lớp cơ sở Polymer.LegacyElement và thêm API kế thừa tương thích 1.x. Nó cũng tạo ra các phần tử lai bằng cách xác định phương thức nhà máy Polymer () kế thừa.

  • polymer.html - Nó bao gồm các lớp cơ bản Polymer cùng với các phần tử trợ giúp, được đưa vào 1.x polyme.html.

Xác định một phần tử trong tài liệu HTML chính

Bạn có thể xác định một phần tử trong tài liệu HTML chính bằng hàm HTMLImports.whenReady ().

Thí dụ

Ví dụ sau đây cho thấy cách xác định một phần tử trong tài liệu HTML chính. Tạo tệp index.html và thêm mã sau.

<!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>

Bây giờ, hãy tạo một phần tử tùy chỉnh được gọi là define-element.html và bao gồm đoạn mã sau.

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

Đầu ra

Để chạy ứng dụng, điều hướng đến thư mục dự án đã tạo và chạy lệnh sau.

polymer serve

Bây giờ hãy mở trình duyệt và điều hướng đến http://127.0.0.1:8081/. Sau đây sẽ là đầu ra.

Xác định một phần tử kế thừa

Phần tử kế thừa có thể được sử dụng để đăng ký một phần tử bằng cách sử dụng hàm Polymer, hàm này lấy nguyên mẫu cho một phần tử mới. Nguyên mẫu phải chứais xác định tên thẻ HTML cho một phần tử tùy chỉnh.

Thí dụ

//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();

Gọi lại vòng đời

Các lệnh gọi lại vòng đời được sử dụng để hoàn thành các nhiệm vụ cho các tính năng tích hợp của Polymer.Elementlớp học. Polymer sử dụng lệnh gọi lại sẵn sàng, sẽ được gọi khi Polymer hoàn thành việc tạo và khởi tạo các phần tử DOM.

Sau đây là danh sách các lệnh gọi lại kế thừa trong Polymer.js.

  • created - Nó được gọi khi bạn tạo một phần tử trước khi thiết lập các giá trị thuộc tính và khởi tạo DOM cục bộ.

  • ready - Nó được gọi khi bạn tạo một phần tử sau khi thiết lập các giá trị thuộc tính và khởi tạo DOM cục bộ.

  • attached - Nó được gọi sau khi đính kèm phần tử vào tài liệu và có thể được gọi nhiều hơn một lần trong suốt thời gian tồn tại của một phần tử.

  • detached - Nó được gọi sau khi tách phần tử khỏi tài liệu và có thể được gọi nhiều lần trong suốt thời gian tồn tại của một phần tử.

  • attributeChanged - Nó được gọi khi có những thay đổi trong thuộc tính của một phần tử và nó giữ những thay đổi thuộc tính không tương thích với thuộc tính đã khai báo.

Khai báo thuộc tính

Các thuộc tính có thể được khai báo trên một phần tử để thêm giá trị mặc định và các tính năng cụ thể khác trong hệ thống dữ liệu và chúng có thể được sử dụng để chỉ định các tính năng sau:

  • Nó chỉ định loại thuộc tính và giá trị mặc định.

  • Nó gọi phương thức quan sát, khi có những thay đổi trong giá trị thuộc tính.

  • Nó chỉ định trạng thái chỉ đọc để dừng các thay đổi không mong muốn đối với giá trị thuộc tính.

  • Nó cung cấp hỗ trợ cho liên kết dữ liệu hai chiều, kích hoạt một sự kiện khi bạn thay đổi các giá trị thuộc tính.

  • Nó là một thuộc tính được tính toán, tính toán một giá trị động tùy thuộc vào các thuộc tính khác.

  • Nó cập nhật và phản ánh giá trị thuộc tính tương ứng, khi bạn thay đổi các giá trị thuộc tính.

Bảng sau đây hiển thị các khóa cho từng thuộc tính, được hỗ trợ bởi đối tượng thuộc tính.

Sr.No. Khóa & Mô tả Kiểu
1

type

Nó giải mã từ một thuộc tính có kiểu thuộc tính được xác định bằng cách sử dụng hàm tạo của kiểu.

 hàm tạo (Boolean, Ngày, Số, Chuỗi, Mảng hoặc Đối tượng)
2

value

Nó chỉ định giá trị mặc định cho thuộc tính và nếu đó là một hàm, thì nó sẽ sử dụng giá trị trả về làm giá trị mặc định của thuộc tính.

 boolean, số, chuỗi hoặc hàm.
3

reflectToAttribute

Nếu khóa này đặt thành true, thì nó sẽ đặt thuộc tính tương ứng trên nút máy chủ. Thuộc tính có thể được tạo dưới dạng thuộc tính boolean HTML chuẩn, nếu bạn đặt giá trị thuộc tính là Boolean.

 boolean
4

readOnly

Bạn không thể đặt thuộc tính trực tiếp bằng cách gán hoặc liên kết dữ liệu, nếu khóa này được đặt thành true.

 boolean
5

notify

Bạn có thể sử dụng thuộc tính để liên kết dữ liệu hai chiều, nếu khóa này được đặt thành true và khi bạn thay đổi thuộc tính, sự kiện thay đổi tên thuộc tính sẽ được kích hoạt.

 boolean
6

computed

Bạn có thể tính toán giá trị của một đối số bất cứ khi nào nó thay đổi, bằng cách gọi phương thức và giá trị sẽ được đơn giản hóa dưới dạng tên phương thức và danh sách đối số.

 chuỗi
7

observer

Gọi tên phương thức, được đơn giản hóa bởi một giá trị, khi giá trị thuộc tính thay đổi.

 chuỗi

Hủy đăng ký thuộc tính

Hủy số liệu hóa tên thuộc tính khớp với một thuộc tính trên cá thể theo kiểu được chỉ định và cùng tên thuộc tính trên cá thể phần tử, nếu thuộc tính được định cấu hình trong đối tượng thuộc tính.

Bạn có thể đặt loại được chỉ định trực tiếp làm giá trị của thuộc tính, nếu không có tùy chọn thuộc tính nào khác được xác định trong đối tượng thuộc tính; nếu không, nó sẽ cung cấp giá trị cho khóa kiểu trong đối tượng cấu hình thuộc tính.

Cấu hình thuộc tính Boolean

Thuộc tính Boolean có thể được định cấu hình từ đánh dấu, bằng cách đặt nó thành false và nếu nó được đặt thành true, thì bạn không thể định cấu hình từ đánh dấu vì thuộc tính có hoặc không có giá trị được cân bằng thành true. Do đó, nó được biết đến như một hành vi tiêu chuẩn cho các thuộc tính trong nền tảng web.

Các thuộc tính đối tượng và mảng có thể được định cấu hình bằng cách chuyển chúng ở định dạng JSON dưới dạng:

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

Định cấu hình các giá trị thuộc tính mặc định

Thuộc tính mặc định có thể được cấu hình bằng cách sử dụng trường giá trị trong đối tượng thuộc tính và nó có thể là giá trị nguyên thủy hoặc một hàm trả về giá trị.

Thí dụ

Ví dụ sau mô tả cách định cấu hình các giá trị thuộc tính mặc định trong đối tượng thuộc tính.

<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 Tutorialspoint;!!!'
               },
               data: {
                  type: Object,
                  notify: true,
                  value: function() { return {}; }
               }
            }
         }
      }
      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

Đầu ra

Chạy ứng dụng như được hiển thị trong ví dụ trước và điều hướng đến http://127.0.0.1:8000/. Sau đây sẽ là đầu ra.

Thuộc tính chỉ đọc

Bạn có thể tránh những thay đổi không mong muốn trên dữ liệu được tạo bằng cách đặt cờ readOnly thành true, trong đối tượng thuộc tính. Phần tử sử dụng bộ thiết lập của quy ước _setProperty (giá trị), để thay đổi giá trị thuộc tính.

Thí dụ

Ví dụ sau mô tả việc sử dụng các thuộc tính chỉ đọc trong đối tượng thuộc tính. Tạo tệp index.html và thêm mã sau vào đó

<!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>

Bây giờ, hãy tạo một tệp khác có tên my-element.html và bao gồm đoạn mã sau.

<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>

Tiếp theo, tạo thêm một tệp có tên prop-element.html và thêm mã sau.

//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>

Đầu ra

Chạy ứng dụng như được hiển thị trong ví dụ trước và điều hướng đến http://127.0.0.1:8081/. Sau đây sẽ là đầu ra.

Sau khi nhấp vào nút, nó sẽ thay đổi giá trị như được hiển thị trong ảnh chụp màn hình sau.

Phản ánh thuộc tính thành thuộc tính

Thuộc tính HTML có thể được đồng bộ hóa với giá trị thuộc tính bằng cách đặt reflectToAttribute thành true trên một thuộc tính trong đối tượng cấu hình thuộc tính.

Serialization thuộc tính

Giá trị thuộc tính có thể được tuần tự hóa thành thuộc tính, trong khi phản ánh hoặc liên kết một thuộc tính với một thuộc tính và theo mặc định, các giá trị có thể được tuần tự hóa tùy thuộc vào loại hiện tại của giá trị.

  • String - Không cần tuần tự hóa.

  • Date or Number - Sử dụng toString để tuần tự hóa các giá trị.

  • Boolean - Đặt thuộc tính không có giá trị được hiển thị là true hoặc false.

  • Array or Object - Sử dụng JSON.stringify để tuần tự hóa giá trị.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved