Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Cách tạo các phần tử HTML cho chính bạn với Web Components

by
Length:MediumLanguages:
This post is part of a series called Strange and Unusual HTML.
Introducing the HTML5 “Menu” and “Menuitem” Elements
Meta Tags and SEO

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Web Component hiện đang được nhắc đến như là một "phát minh làm thay đổi việc phát triển web" hứa hẹn làm thay đổi việc phát triển web đã tồn tại lâu nay. Những người có trách nhiệm đang làm việc để mang Web Component vào thực tế. Cả Google và Mozilla đã dần dần hỗ trợ.

Web Component là gì? Một cách ngắn gọn, Web Component cung cấp cho bạn một cách để tạo các thành phần HTML tuỳ biến của riêng bạn mà có thể làm bất cứ điều gì bạn cần. Thay vì tải các trang web của bạn với mã đánh dấu dài dòng, script dài và code lặp đi lặp lại, thì bạn đặt tất cả mọi thứ bên trong phần tử HTML tuỳ biến.

Hiểu về Web Component

Cách dễ nhất để hiểu Web Component cho phép bạn tuỳ biến các phần tử HTML như thế nào là trước tiên nhìn vào một phần tử sẵn có mà chúng ta đã biết từ HTML5: thẻ <video>. Sử dụng phần tử này bạn có thể đặt một đoạn video chỉ với một vài dòng code, ví dụ:

Bạn có thể chỉ nhìn thấy một vài dòng HTML ở trên, nhưng đây là những gì mà phần tử <video> thực sự làm ở đằng sau nó:

Mặc định, trình duyệt ẩn tất cả những code dài dòng đó nên bạn không cần phải nhìn thấy nó hoặc lo lắng về cách viết nó khi bạn muốn đặt một video. Bạn chỉ cần thiết lập thẻ <video><source> của bạn và bạn đã hoàn tất.

Trước đó, chỉ nhà cung cấp trình duyệt mới có thể tạo ra các phần tử theo cách này. Nhưng hãy tưởng tượng rằng nếu bạn có thể sử dụng cách tương tự này cùng với các loại nội dung khác thì sao?

Lấy ví dụ về một slideshow. Thông thường, bạn sẽ cần một vài thẻ div lồng nhau có các tên lớp cụ thể để xử lý slideshow, bao mỗi slide và thêm chú thích và hình thu nhỏ. Bạn cũng sẽ cần phải thiết lập các tùy chọn tổng thể cho slideshow như hiệu ứng chuyển tiếp thông qua một số jQuery/JavaScript.

Nếu bạn có thể bỏ qua tất cả những thứ đó và thay vào đó bạn chỉ cần sử dụng:

Với các Web Component, đó chính xác là những gì bạn có thể làm.

Tạo ra các phần tử HTML của riêng bạn

Nếu bạn muốn cung cấp một sự súc tích, dễ dàng tương tác với các phương thức sắp xếp nội dung mà nếu không sẽ cồng kềnh và khó sử dụng thì bạn hãy tạo cho chính bạn một Web Component.

Web Component cũng có thể dễ dàng được chia sẻ, do đó, với vai trò là các nhà phát triển bạn sẽ có thể chỉ cần lấy một Web Component dựng sẵn cho các yêu cầu thông thường nhất của dự án. Chúng ta đang thấy các Web Component được chia sẻ tự do từ voice recognition..

đến presentation builders..

đến QR code generation.

Hãy nhìn vào những thứ ở đằng sau của các Web Component.

Điều gì tạo nên một Web Component

Web Component, như ở thời điểm hiện tại, được tạo thành từ bốn phần:

  • Các phần tử tuỳ biến
  • Shadow DOM
  • Template
  • HTML Import

Các phần tử tuỳ biến

Các phần tử tuỳ biến giống như tên gọi của chúng: các phần tử mà có thể được đặt tên là bất cứ điều gì mà bạn chọn, và hoạt động theo bất kỳ cách nào bạn muốn. Và khi tôi nói bất cứ điều gì bất cứ cách nào, thì ý tôi hoàn toàn là như vậy. Ví dụ, tôi biểu diễn phần tử <x-gangnam-style>:

Demo - di chuột qua cái thanh

Các phần tử được định nghĩa, trong hình thức đơn giản nhất của chúng, giống như thế này:

Khi bạn tạo một phần tử tuỳ biến bạn có thể làm điều đó hoàn toàn từ đầu, hoặc bạn có thể mở rộng một phần tử HTML, chẳng hạn như <button>, và tạo cho nó tính năng hoặc kiểu dáng đã được thay đổi mà bạn cần.

Lưu ý: điều đáng nói là thẻ <element> đã bị phản đối vào năm 2013 vì sự phức tạp của nó. Nó có thể quay trở lại, nhưng trong khi chờ đợi có các tùy chọn polyfill, chúng ta sẽ nói về chúng một lát nữa. Cảm ơn Addy Osmani đã chỉ ra điều đó!

Shadow DOM

Shadow DOM thật sự là khía cạnh chính của Web Component. Trước đó, chúng ta đã xem xét phần tử <video> của HTML5 và cho thấy cách nó hoạt động, dù chỉ nhìn thấy một vài dòng code, trong thực tế có khá nhiều code mặc định ẩn bên dưới. Nơi chứa code ẩn này được gọi là "Shadow DOM".

Nhà cung cấp trình duyệt đã sử dụng Shadow DOM này trong nhiều năm để cài đặt các phần tử như input, audio, video và vân vân. Thông qua Web Component nó có thể được sử dụng bởi bất kỳ nhà phát triển nào.

Ý tưởng chung là bạn lấy tất cả các code mà không thực sự cần phải được nhìn thấy trong quá trình sắp xếp mã đánh dấu và ẩn trong Shadow DOM để nó không được nhìn thấy. Điều này cho phép bạn chỉ phải đối phó với các thông tin cần thiết, ví dụ như chiều cao, chiều rộng và vị trí tập tin khi sử dụng phần tử <video>.

Một trong những điều thú vị nhất khi làm việc với Shadow DOM là mỗi trường hợp nó sở hữu một kho chứa riêng của nó. Vì vậy, nếu bạn có phong cách và các script bên trong phần tử thì chúng sẽ không rò rỉ ra bên ngoài và không tác động lên bất cứ thứ gì khác trên trang.

Ngược lại, CSS và JavaScript ở những nơi khác trên trang web sẽ không có tác dụng lên các thành phần trang web của bạn, ngoại trừ hook mà bạn có thể đặc biệt tạo ra để cho phép CSS bên ngoài định phong cách. Tất cả những điều đó có nghĩa là không cần lo lắng về không gian tên ID và các lớp của bạn để tránh xung đột.

Nếu bạn muốn xem Shadow DOM trông giống như thế nào, thì nó rất dễ dàng. Đảm bảo rằng bạn đang chạy phiên bản Chrome mới nhất, mở Dev Tools, nhấn vào biểu tượng bánh răng để mở cài đặt và tích vào hộp có nhãn Show user agent shadow DOM:

Sau đó, khi bạn kiểm tra bất kỳ phần tử với Shadow DOM bạn sẽ thấy code đầy đủ của nó. Thử phân tích phần tử <x-gangnam-style> với và không với Shadow DOM ở trong: http://html5-demos.appspot.com/gangnam

Để có một bảng tóm lược đầy đủ về Shadow DOM hãy xem: Giới thiệu về Shadow DOM

Template

Chúng ta đã khái quát cách phần tử tuỳ biến cho phép chỉ những thông tin cần thiết để tập trung vào trong khi tất cả các code còn lại bị che khuất trong Shadow DOM. Một template trong một Web Component là thứ nắm giữ tất cả các phần tử trình bày của code còn lại.

Giống như một phần code xác định thành phần web mà các thẻ <template>...</template> được đặt, và ở giữa những thẻ đó bất kỳ HTML và CSS mà các thành phần cần được bao gồm.

Ví dụ, hãy xem các code tạo ra thành phần trang web <x-gangnam-style>. Thẻ mở <template> của nó là ở dòng thứ 4 và thẻ đóng </template> của nó là ở dòng 201. Ở giữa các thẻ đó, bạn sẽ thấy tất cả các CSS chịu trách nhiệm cho việc sắp xếp và hiệu ứng động và HTML đặt từng hình ảnh liên quan.

HTML Import

HTML Import cho phép bạn lấy tất cả mọi thứ được mô tả ở trên và thực sự làm cho nó hoạt động trên trang web của bạn. Web Component được xác định bên trong tập tin HTML bên ngoài, do đó, tập tin cần phải được nhập để cho một phần tử tùy biến hoạt động. HTML Import xử lý điều này thông qua một thẻ <link>, bạn sẽ được làm quen với nhập các tập tin CSS bên ngoài.

Ví dụ: trước khi bạn có thể sử dụng thành phần web <x-gangnam-style> bạn sẽ phải nhập tập tin HTML định nghĩa nó, như sau:

Hỗ trợ trình duyệt và Polyfill

Khả năng được cung cấp bởi Web Component làm cho ý tưởng sử dụng chúng trở nên rất hấp dẫn, tuy nhiên tại thời điểm hiện tại trình duyệt hỗ trợ không được tốt lắm. Trạng thái hỗ trợ trông như thế này:

http://jonrimmer.github.io/are-we-componentized-yet/

Chrome, Opera, Firefox đang trong quá trình cài đặt hỗ trợ nhưng vẫn chưa hoàn tất. IE và Safari vẫn chưa thực hiện kế hoạch của họ, tuy nhiên các trình duyệt chính sẽ hỗ trợ thành phần web.

Ngay bây giờ, nếu bạn muốn bắt đầu làm việc với các thành phần web, bạn sẽ cần phải sử dụng một trong các polyfill có sẵn. Tin tốt là hai trong số các giải pháp phổ biến nhất được tạo ra bởi Google và Mozilla, do đó, chúng ta có thể đặt kỳ vọng thấy một số tính nhất quán với hai sự hỗ trợ cuối cùng sẽ hoạt động như thế nào.

Polymer bởi Google

Thật khó khi không dựa vào việc sử dụng Polymer vì Chrome bây giờ là trình duyệt được sử dụng rộng rãi nhất, và bạn có thể giả định xem xét sẽ được đưa ra trong quá trình phát triển thành phần sẽ được lập chỉ mục của Google như thế nào.

Polymer đi kèm với một thư viện đầy đủ với các thành phần web dựng sẵn. Nó bao gồm "Polymer Core elements" có chức năng định hướng, và các "Paper elements" là định hướng thiết kế.

Khi tạo ra các phần tử tuỳ biến với Polymer, thay vì sử dụng định dạng <element name="..."> bạn sử dụng <polymer-element name="..." >.

Polymer mô tả chính nó như là đang trong "developer preview" chứ không phải là sản phẩm hoàn thiện, tuy nhiên nó cũng nói rằng

.. .tuy vậy nhiều người đã sử dụng thành công Polymer trong sản phẩm của họ.

Trình duyệt hỗ trợ

  • Chrome Android
  • Chrome
  • Canary
  • Firefox
  • IE 10+
  • Safari 6+
  • Mobile Safari

Nếu bạn cần phục vụ cho IE9, ước tính khoảng 1,9% đến 5,11% thị phần, tiếc là nó không gặp may với Polymer. Tuy nhiên, thay vào đó bạn có thể sử dụng X-Tags của Mozilla.

X-Tags của Mozilla

X-Tags là một thư viện JavaScript được tạo ra bởi Mozilla, hiện nay, có một lợi thế hơn so với Polymer trong đó nó hỗ trợ trình duyệt rộng rãi hơn. Nếu đó là một lựa chọn chính cho bạn thì X-Tags có thể là một lựa chọn.

Trình duyệt hỗ trợ

  • Firefox 5+ desktop & mobile
  • Chrome 4+
  • Chrome Android 2.1+
  • Safari 4+ desktop & mobile
  • IE9+
  • Opera 11+ desktop & mobile

Hỗ trợ IE8

Ngay bây giờ, nếu bạn cần hỗ trợ IE8 thì tiếc là Web Component có vẻ không hỗ trợ vì polyfill chỉ hỗ trợ IE9+. Ước tính rằng người dùng IE8 khoảng 2,1% đến 3.82%, nhưng tất nhiên nếu số liệu thống kê của riêng bạn nói một cách khác nhau bạn sẽ phải thực hiện một quyết định hỗ trợ trình duyệt của bạn nên kéo dài như thế nào.

Ember.js và AngularJS Components

Một trong những cách khả thi bạn có thể chuẩn bị cho mình để chuyển đổi sang sử dụng thành phần web là làm việc với Ember.js hoặc AngularJS tại thời điểm hiện tại. Cả hai đều có hệ thống tạo thành phần riêng của chúng và cả hai đều hứa hẹn sẽ chuyển đổi sang sử dụng mã Web Component gốc khi nó được cài đặt đầy đủ.

Các thành phần được cộng đồng tạo ra

Tìm hiểu thêm

Kết luận

Tôi hy vọng bạn thích thú với hướng dẫn về Web Component là gì và tại sao bạn nên quan tâm đến nó! Có rất nhiều thứ để tìm hiểu, nhưng với những lý thuyết cơ bản đã được khái quát, chúng tôi sẽ có nhiều hướng dẫn thực sự xây dựng Web Component tùy biến. Bạn nghĩ sao? Trong những trường hợp nào bạn thấy nên sử dụng chúng?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.