GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 03/01/2018 | 00:00 GMT+7

Bắt đầu với Polymer

Thành phần Web cung cấp một cách tốt để tạo, sử dụng và chia sẻ các thành phần tùy chỉnh cho web. Polymer là một thư viện nhẹ cho phép ta tận dụng những yếu tố này ngay bây giờ. Polymer đơn giản hóa việc triển khai Thành phần Web và thêm một số tính năng hữu ích lên trên.

Polymer được tạo thành từ hai phần chính:

  • Thư viện Polymer , cung cấp một tập hợp các tính năng giúp tạo, sử dụng và chia sẻ các Thành phần Web dễ dàng hơn
  • Bộ công cụ Polymer cung cấp một bộ sưu tập bổ sung các công cụ, thành phần và mẫu để giúp dễ dàng hơn trong việc xây dựng các ứng dụng đầy đủ bằng các Thành phần Web

Trong bài viết này, ta sẽ xem xét việc tạo một thành phần web tùy chỉnh đơn giản bằng cách sử dụng Thư viện Polymer và Polymer CLI .

Ta sẽ bắt đầu bằng cách tạo lại phần tử <my-title> đã được tạo trong phần giới thiệu này thành phần tử tùy chỉnh

Ta sẽ sử dụng thư viện Polymer 2 cho bài viết này. Với một số thay đổi, các hướng dẫn này có thể được áp dụng cho Polymer 3 khi nó đã được phát hành.

Yêu cầu

Bạn cần có cài đặt sau để cài đặt và sử dụng Polymer:

  • npm - Node và trình quản lý gói nút, được yêu cầu để cài đặt Polymer CLI
  • bower - Bắt buộc để quản lý các phụ thuộc của giao diện user

Polymer CLI

Polymer CLI là một công cụ dòng lệnh hỗ trợ nhiều khía cạnh của việc phát triển ứng dụng dựa trên Polymer. Một số lệnh nó cung cấp như sau:

  • polyme init - Tạo bảng điện tử cho các ứng dụng và phần tử
  • polymer phục vụ - Server phát triển để phát triển trực tiếp
  • polyme lint - vải polyme cụ thể
  • thử nghiệm polyme - Người chạy thử nghiệm
  • xây dựng polyme - Xây dựng ứng dụng sẵn sàng production

Ta sẽ sử dụng server tạo và phát triển bảng soạn sẵn trong bài viết này.

Cài đặt CLI

Polymer CLI có thể được cài đặt bằng lệnh sau:

$ npm install -g polymer-cli

Để xác nhận công cụ đã được cài đặt thành công và xem danh sách tất cả các lệnh có sẵn, hãy sử dụng:

$ polymer --help

Bắt đầu dự án phần tử polyme

Tạo một folder mới và chuyển vào đó:

$ mkdir my-title
$ cd my-title

Sử dụng Polymer CLI để khởi tạo một dự án phần tử. Điều này sẽ bắt đầu quá trình tạo phần tử Polymer.

$ polymer init

Lệnh này sẽ yêu cầu một số cấu hình. Ta sẽ sử dụng các cài đặt sau:

  • Chọn tùy chọn đầu tiên, polyme-2-phần tử , để tạo phần tử tùy chỉnh
  • Ta có thể sử dụng tên mặc định của my-title cho phần tử
  • Để trống phần mô tả
  • Polymer CLI sẽ tự động cài đặt các phụ thuộc bower cho dự án

Cấu trúc folder đã tạo

Điều này sẽ tạo ra một cấu trúc folder như sau:

/bower.json         // List of front-end dependencies
/bower_components/  // The bower dependencies are saved here
/demo/              // Demo folder containing a working example of our component
/index.html         // Starting point (re-directs to demo/index.html)
/my-title.html      // Web component definition
/polymer.json       // Polymer settings
/README.md          // Automatically generated Readme
/test/              // Tests for the component

Polymer CLI thực hiện hầu hết các công việc nặng nhọc để tạo ra một thành phần tùy chỉnh. Như ta sẽ tìm hiểu, cấu trúc file này đã bao gồm cài đặt cơ bản mà ta cần cho Thành phần Web cũng như các polyfills cần thiết.

Phần tử đã tạo

Ta có thể xem phần tử Polymer đã được tạo bằng cách mở ./my-title.html :

my-title.html
<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="my-title">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>
  </template>

  <script>
    class MyTitle extends Polymer.Element {
      static get is() { return 'my-title'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-title'
          }
        };
      }
    }

    window.customElements.define(MyTitle.is, MyTitle);
  </script>
</dom-module>

Thành phần được tạo này hơi giống với những gì ta sẽ xây dựng như một Thành phần Web root . Nhưng có một số khác biệt chính ở đây:

  • Ta đang sử dụng nhập HTML thay vì nhập ES6. (Trong polymer 3.0, Nhập ES6 sẽ thay thế nhập HTML)
  • Polymer tự động tạo Shadow DOM cho <template> được cung cấp. Điều này giúp cô lập phần tử.
  • Lớp mở rộng từ Polymer.Element thay vì HTMLElement . Polymer.Element bổ sung chức năng mới cho các Thành phần Web, chẳng hạn như liên kết dữ liệu.

Xem phần tử đang hoạt động

Để demo thành phần tùy chỉnh, ta có thể sử dụng lệnh sau:

$ polymer serve --open

Lệnh này sẽ phục vụ trang demo trên server phát triển local .

Tùy chỉnh phần tử của ta

Cuối cùng, ta có thể tùy chỉnh phần tử để trông giống với phần tử được tạo trong bài viết phần tử tùy chỉnh thành phần web .

Đối với điều này, trước tiên ta cần thêm các kiểu:

<style>
  :host {
    display: block;
  }

  h1 {
    font-size: 2.5rem;
    color: hotpink;
    font-family: monospace;
    text-align: center;
    text-decoration: pink solid underline;
    text-decoration-skip: ink;
  }
</style>

Sau đó, ta có thể đặt giá trị văn bản:

<h1>Hello Alligator!</h1>

Đó là nó! Bây giờ ta có một phần tử gần như giống hệt nhau. Phần tử này được dùng trong ứng dụng Polymer bằng cách sử dụng nhập html.

Kết luận

Như bạn thấy , Polymer làm cho quá trình tạo các Thành phần Web đơn giản hơn nhiều so với cách khác. Ngoài ra, Polymer còn bổ sung các tính năng bổ sung cho các Thành phần Web vốn đã rất hữu ích.

Cuối cùng, vì Polymer CLI xử lý quá trình xây dựng, ta sẽ không phải xử lý thủ công các polyfills và các mối quan tâm về hỗ trợ trình duyệt khác khi nói đến việc phân phối ứng dụng.

Tags:

Các tin liên quan