Thông tin javascript của các thành phần web

Trong bài viết này, chúng ta sẽ đi sâu vào các Thành phần Web và xem lý do tại sao các Nhà phát triển Front End lại bắt buộc phải sử dụng nó

Giới thiệu

thành phần web. org định nghĩa chúng là

Các thành phần web là một tập hợp các API nền tảng web cho phép bạn tạo các thẻ HTML được đóng gói, tùy chỉnh, có thể tái sử dụng mới để sử dụng trong các trang web và ứng dụng web

Vì vậy, tóm lại, Thành phần web giống như một hộp cung cấp một số chức năng, có dữ liệu được mã hóa, nghĩa là bất kỳ mã css và js nào được áp dụng cho thành phần web đều được tách biệt hoàn toàn khỏi các thành phần khác nên mọi thay đổi/kiểu dáng sẽ không ảnh hưởng đến các thành phần khác

Các Thành phần Web dường như giải quyết một trong những vấn đề lớn nhất mà các lập trình viên phải đối mặt khi xây dựng các ứng dụng giao diện người dùng và đó là nguyên tắc DRY. DRY là viết tắt của 'Đừng lặp lại chính mình' là một nguyên tắc cơ bản của phát triển phần mềm nhằm mục đích giảm sự lặp lại thông qua đóng gói và trừu tượng hóa và với các thành phần web, chúng tôi có khả năng thực hiện các đánh dấu của mình tuân theo nguyên tắc. Bây giờ chúng ta có thể tạo các yếu tố đánh dấu tùy chỉnh của riêng mình mà trước đây đã được viết với rất nhiều phức tạp

Có sẵn nhiều khung giao diện người dùng khác nhau như React, Angular và Vue nhưng các thành phần Web tùy chỉnh mở ra cơ hội cho rất nhiều khả năng. Một loạt các thư viện cũng đã được phát triển giúp chúng tôi xây dựng các Thành phần Web một cách dễ dàng hơn nhưng chúng tôi sẽ đi vào vấn đề đó ngay lập tức

Đầu tiên chúng ta hãy tìm hiểu về kiến ​​trúc của các Thành phần Web

Kiến trúc thành phần web

Các Trụ cột của Olympus hoặc có vẻ như vậy

Các Thành phần Web bao gồm bốn trụ cột

1- Yếu tố tùy chỉnh

2- Bóng DOM

3- Các phần tử HTML

4- Nhập khẩu

Có một cái khác được gọi là decorator , tuy nhiên hiện tại decorator không thực sự có thông số kỹ thuật phù hợp, dẫn đến chỉ có bốn trụ cột của mô hình thành phần web

Các bước để tạo Thành phần Web

Cách tiếp cận cơ bản để triển khai một thành phần web nên tuân theo quy trình như sau

1 - Tạo một lớp hoặc một hàm để chỉ định chức năng của Thành phần Web

2 - Đăng ký Thành phần tùy chỉnh mới của bạn

3 - Nếu được yêu cầu, hãy đính kèm một DOM bóng vào thành phần tùy chỉnh bằng Element. Phương thức đính kèmShadow[]. Thêm các phần tử con, trình xử lý sự kiện, v.v. , đến DOM bóng bằng cách sử dụng các phương thức DOM thông thường

4 - If required, define an HTML template using and . Again use regular DOM methods to clone the template and attach it to your shadow DOM.

bây giờ chúng ta đã đề cập đến các chi tiết chính bao gồm trong Thành phần web, hãy đi sâu vào mã bằng cách sử dụng 4 trụ cột

1- Yếu tố tùy chỉnh

Tạo các phần tử tùy chỉnh là một trong những tính năng chính của Thành phần web vì nó giúp chúng tôi đóng gói chức năng tùy chỉnh của mình vào một phần tử thay vì nhập các phần tử html dài lồng nhau

Lý do chính để tạo phần tử tùy chỉnh là ít mã hơn theo quan điểm của nhà phát triển, tạo thư viện thẻ ngữ nghĩa hơn, giảm số lượng thẻ div, v.v. Khi một thành phần web được phát triển, nó có thể được sử dụng bởi bất kỳ ứng dụng nào

Có hai loại yếu tố tùy chỉnh

i - Các yếu tố tùy chỉnh tự trị

ii - Các yếu tố tích hợp tùy chỉnh

Hãy đi qua từng cái một

i - Các yếu tố tùy chỉnh tự trị

Các phần tử này chỉ là các phần tử Độc lập không yêu cầu kế thừa bởi các phần tử Html tiêu chuẩn. Để sử dụng chúng, chúng ta chỉ cần viết chúng như các phần tử html bình thường sẽ được viết

, hoặc document.createElement["user-info"]

Bây giờ hãy xem điều này đang hoạt động để hiểu ý chính của nó

Để bắt đầu, trước tiên, chúng tôi đã xác định một lớp có tên là HelloComponent cho thành phần tùy chỉnh của chúng tôi và mở rộng nó bằng HTMLElements. Autonomous Custom Elements sẽ luôn mở rộng HTMLElements

Trong đoạn mã trên, chúng tôi đã mở rộng các Phần tử HTML nhưng tại sao?

phần tử HTML

HTMLElements về cơ bản là một phần tử của cây DOM, chẳng hạn như BODY, TABLE và FORM, v.v. Nó chứa tất cả các thuộc tính, thuộc tính, trình xử lý sự kiện, v.v. Nó cung cấp chức năng dành riêng cho HTML không có trong giao diện Phần tử cơ bản

Khi mọi nội dung được tạo, nó sẽ được đính kèm với HTMLElements

Người xây dựng

Tiếp theo, chúng tôi đã cung cấp một hàm tạo bên trong lớp cũng gọi phương thức super. Phương thức super[] sẽ luôn được gọi đầu tiên để chuỗi Nguyên mẫu phù hợp được thiết lập. Bên dưới bên trong hàm tạo là nơi chúng tôi xác định tất cả các chức năng sẽ được sử dụng khi khởi tạo nó

Cuối cùng, trong dòng cuối cùng, chúng tôi đã gọi CustomElement

Phần tử tùy chỉnh

CustomElement là bộ điều khiển cho các phần tử HTML và một đối tượng của nó. Nó được sử dụng để đăng ký các Phần tử tùy chỉnh vào DOM. Để đăng ký một phần tử, chỉ cần gọi CustomElement. định nghĩa[ ]. Nó lấy tham số

• Tên. Tên tham số lấy tên của Phần tử tùy chỉnh mới. Tên phần tử tùy chỉnh phải chứa dấu gạch nối [-]
• Người xây dựng. Hàm tạo của Phần tử tùy chỉnh mới sẽ được chèn vào đây
• Tùy chọn. Nó là một tham số tùy chọn lấy tên trong chuỗi của phần tử tích hợp sẽ được mở rộng bởi Phần tử tùy chỉnh. Điều này được sử dụng để tạo các phần tử tích hợp tùy chỉnh

ii — Các yếu tố tích hợp tùy chỉnh

Các phần tử này kế thừa từ các phần tử html tích hợp. Để viết chúng, chúng ta phải cung cấp tên của phần tử mà chúng mở rộng và viết chúng dưới dạng các phần tử html bình thường nhưng với tên của phần tử tùy chỉnh trong thuộc tính 'is'

this.setAttribute['complete', val];

0, hoặc

this.setAttribute['complete', val];

1

Sự khác biệt duy nhất giữa phần tử đầu tiên và phần tử này là nó mở rộng một giao diện khác thay vì HTMLElements

Các yếu tố tích hợp tùy chỉnh

Trong đoạn mã trên, bạn có thể thấy rằng chúng tôi hiện đang mở rộng HTMLUListElement thay vì HTML Elements, điều này làm cho nó có các thuộc tính tích hợp sẵn. Tiếp theo, sau đó chúng tôi tạo nó bằng phần tử tạo nhưng lần này, chúng tôi sử dụng một đối tượng tùy chọn chứa phần tử ul mà nó phải mở rộng

Móc vòng đời là gì?

Từ thời điểm một phần tử được tạo cho đến khi nó bị hủy, rất nhiều thứ đã xảy ra và Tương tự như vậy, khi chúng ta nói về các phần tử html

• Chúng được tạo và chèn vào DOM
• Chúng được kích hoạt khi các sự kiện được kích hoạt
• Chúng bị loại bỏ hoặc bị phá hủy

Chúng được gọi là các sự kiện Vòng đời và hầu như mọi ngôn ngữ lập trình đều có vòng đời. chúng ta có thể nối vào những thứ này bằng cách sử dụng các chức năng Gọi lại được gọi là Phản ứng phần tử tùy chỉnh

Một lợi thế lớn của điều này là các Thành phần Web có hỗ trợ trình duyệt riêng giúp chúng tôi không phải viết mã dài. chúng ta có thể sử dụng móc vòng đời để khiến mọi thứ xảy ra tại một thời điểm nhất định

Móc vòng đời có sẵn

Sau đây là các móc vòng đời có sẵn để sử dụng

• người xây dựng[]
• kết nốiCallback[]
• ngắt kết nốiCallback[]
• thuộc tínhChangedCallback[tên, giá trị cũ, giá trị mới]
• thông quaCallback[]

Tất cả móc vòng đời có sẵn

• Người xây dựng. Trình xây dựng là chức năng đầu tiên được gọi khi Phần tử tùy chỉnh của chúng tôi được tạo
• đã kết nốiGọi lại. Cuộc gọi lại này được gọi ngay khi phần tử tùy chỉnh của chúng tôi được tạo và nối vào DOM
• ngắt kết nốiGọi lại. Cuộc gọi lại này được gọi bất cứ khi nào phần tử của chúng tôi bị ngắt kết nối khỏi cây DOM, sự kiện này được kích hoạt. Chúng tôi cũng có thể sử dụng cuộc gọi lại này để dọn sạch mã và giải phóng một số tài nguyên khi phần tử bị xóa. Điều này bao gồm hủy đăng ký các sự kiện DOM. Việc giải phóng các tài nguyên không được thu gom rác tự động là rất quan trọng vì nếu chúng ta không giải phóng các tài nguyên không sử dụng [bộ nhớ không còn được ứng dụng yêu cầu], nó có thể bị rò rỉ bộ nhớ
• thuộc tínhChangedCallback. Cuộc gọi lại này được gọi mỗi khi các thuộc tính Phần tử tùy chỉnh của chúng tôi được thêm, thay đổi hoặc xóa khỏi DOM. Ví dụ: xóa trường nhập và đặt tên được gán, v.v.
• thông quaGọi lại. Cuộc gọi lại này được gọi mỗi khi Phần tử tùy chỉnh của chúng tôi được chuyển sang một tài liệu mới

Ví dụ về móc vòng đời

Trong đoạn mã trên, chúng tôi đã thiết lập các sự kiện cho tất cả các móc vòng đời. Bạn có thể quan sát trong bảng điều khiển rằng khi chúng tôi thêm, xóa và thay đổi các thuộc tính, các móc vòng đời khác nhau sẽ được kích hoạt. Chúng tôi cũng đã tạo kiểu cho nó một chút nhưng ở đây tất cả các kiểu đều là toàn cầu và không chỉ gói gọn trong Phần tử tùy chỉnh đó. Đây là nơi bóng DOM xuất hiện

2- Bóng DOM

Phần chính của Thành phần Web là đóng gói. Chúng tôi muốn tách cấu trúc, mã và kiểu đánh dấu html của mình khỏi mã khác trong tệp và tránh chúng xung đột với nhau. Hiện tại, chúng tôi chỉ mới tạo Phần tử tùy chỉnh của mình và css của nó là toàn cầu, điều đó có nghĩa là chúng cũng được áp dụng cho các phần tử khác. Vì vậy, những gì chúng ta cần là gói gọn tất cả các kiểu và chức năng bên trong phần tử của chúng ta để mọi kiểu chúng ta thêm vào không ảnh hưởng đến phần tử bên ngoài và các phần tử bên ngoài cũng không ảnh hưởng đến phần tử bên trong. Điều này có thể thực hiện được với Shadow DOM API

Shadow DOM cho phép các cây DOM ẩn được gắn vào các phần tử trong cây DOM thông thường — cây DOM bóng này bắt đầu bằng một gốc bóng, bên dưới có thể được gắn vào bất kỳ phần tử nào bạn muốn, giống như DOM bình thường

Có một số thuật ngữ Shadow DOM cần lưu ý

• Máy chủ bóng tối. Nút DOM thông thường mà DOM bóng được gắn vào
• bóng cây. Cây DOM bên trong DOM bóng tối
• ranh giới bóng tối. nơi DOM bóng tối kết thúc và DOM thông thường bắt đầu
• Rễ bóng tối. Nút gốc của cây bóng tối

Cấu trúc cây Shadow DOM

hãy triển khai bóng DOM

Trong ví dụ này, chúng tôi đã tạo một thanh tiến trình nhỏ. Vì vậy, để bắt đầu, chúng ta đã tạo Shadow DOM bằng phương thức AttachShadow. Những gì phương thức attachmentShadow làm là nó gắn bóng DOM vào phần tử mà nó được gọi và phương thức này lấy một đối tượng tham số đầu vào có khóa của chế độ và giá trị có thể là mở hoặc đóng

Nếu bạn chọn đóng đầu vào, thì DOM bóng sẽ không thể truy cập được từ javascript bên ngoài xuyên suốt trang Trong trường hợp nếu bạn nhập mở, nó có thể được truy cập trên toàn trang

Tiếp theo, chúng tôi viết thuộc tính Phần tử tùy chỉnh của riêng mình 'hoàn thành' sẽ theo dõi thanh tiến trình. Chúng tôi cũng đã tạo getter và setters cho thuộc tính này

get complete[] {
   return this._complete;
}
  
set complete[val] {
   this.setAttribute['complete', val];
}

thuộc tính này sẽ hoạt động như một thuộc tính cho Phần tử tùy chỉnh của chúng tôi, vì vậy, để đặt thuộc tính trong Phần tử tùy chỉnh, chỉ cần gọi phương thức

this.setAttribute['complete', val];

0 nhận tên và giá trị thuộc tính trong tham số thứ hai

this.setAttribute['complete', val];

Tương tự, chúng ta cũng có thể sử dụng

this.setAttribute['complete', val];

1 để lấy giá trị thuộc tính

Chúng tôi có thể xác định các kiểu nội tuyến của mình và nối chúng vào DOM bóng tối. Cuối cùng, chúng tôi đã đăng ký Phần tử tùy chỉnh của mình như vậy

window.customElements.define['progress-bar', MyProgressBar];

và trong tệp html, đã thêm một chút tập lệnh để hiển thị nó trong thời gian thực. Kiểu dáng ở đây là nội bộ nhưng bằng mọi cách chúng ta có thể tạo một biểu định kiểu dáng bên ngoài và chỉ cần thêm liên kết vào DOM bóng tối

Vì vậy, đây chỉ là một minh chứng nhỏ về các thành phần web, chúng tôi đã cố gắng hoàn thiện bề mặt, còn rất nhiều điều có thể được thực hiện với nó

3- Các phần tử HTML

Có một số phần tử HTML tích hợp sẵn mà chúng ta có thể sử dụng để giảm cấu trúc lặp lại Html của mình. Mẫu là một đối với họ. Đây là một mẫu dựng sẵn có thể được sử dụng

  
My paragraph

4- Nhập khẩu

Nhập khẩu cho phép bạn sử dụng các gói với Thành phần Web. Nó cũng có thể sử dụng được mà không cần Thành phần Web. Bạn có thể tải bất kỳ loại tài nguyên nào, từ biểu định kiểu, tập lệnh và phông chữ web, v.v. Để nhập, hãy sử dụng thẻ liên kết với thuộc tính rel và đặt nó bằng nhập và href của bạn sẽ chứa đường dẫn tài nguyên của bạn

Đó là tổng hợp khá nhiều mọi thứ về Thành phần Web. Hiện tại, có một số thư viện cũng giúp chúng tôi tạo các Thành phần Web cho chúng tôi

Thư viện sử dụng Thành phần Web

Các thư viện Thành phần Web hàng đầu được sử dụng

• Các phần tử HTML thông minh. Công ty TNHH jQWidget. đã phát hành Các phần tử HTML thông minh vào năm 2018. Smart HTML Elements là thư viện Vanilla JS và ES6 hiện đại và khung giao diện người dùng thế hệ tiếp theo. Các Thành phần web sẵn sàng cho doanh nghiệp bao gồm các tính năng trợ năng và khá dễ dàng Tích hợp với Angular, ReactJS, Vue. js, Bootstrap, Meteor và bất kỳ framework nào khác
• giống lai. Nó là một thư viện giao diện người dùng để tạo các Thành phần Web, nó sử dụng các đối tượng và hàm đơn giản, và nó không bao gồm các lớp và `cú pháp này. Nó không hỗ trợ vòng đời toàn cầu cho các thuộc tính và hỗ trợ thành phần thay vì thừa kế. Nó hỗ trợ cách tiếp cận chức năng và khai báo mạnh mẽ
• LitElements. Nó là một lớp cơ sở đơn giản được sử dụng để tạo các Thành phần Web nhanh và nhẹ bằng lit-html. Nó kết xuất phần tử thành bóng DOM bằng cách sử dụng lit-html của nó và quản lý các thuộc tính và thuộc tính bằng cách thêm API
• polyme. Nó được sử dụng bởi các dịch vụ và trang web của Google. Nó có một cách đơn giản để tạo các yếu tố tùy chỉnh, luôn ràng buộc dữ liệu một chiều và hai chiều với các sự kiện cử chỉ như một tính năng

Phần kết luận

Trong bài viết này, chúng tôi đã đi sâu vào nguồn gốc của Thành phần Web và thảo luận chi tiết từng chút khái niệm sẽ cho phép bạn bắt đầu xây dựng Thành phần Web của riêng mình trong nháy mắt và chắc chắn sẽ giúp bạn tiến lên phía trước. Tạm biệt bạn bè

Ghi chú từ JavaScript bằng tiếng Anh thuần túy

Chúng tôi đã ra mắt ba ấn phẩm mới. Thể hiện tình yêu dành cho các ấn phẩm mới của chúng tôi bằng cách theo dõi chúng. AI bằng tiếng Anh thuần túy, UX bằng tiếng Anh thuần túy, Python bằng tiếng Anh thuần túy — cảm ơn bạn và hãy tiếp tục học hỏi

Chúng tôi cũng luôn quan tâm đến việc giúp quảng bá nội dung chất lượng. Nếu bạn có một bài viết mà bạn muốn gửi cho bất kỳ ấn phẩm nào của chúng tôi, hãy gửi email cho chúng tôi theo địa chỉ submits@plainenglish. io bằng tên người dùng Phương tiện của bạn và chúng tôi sẽ thêm bạn làm nhà văn. Ngoài ra, hãy cho chúng tôi biết bạn muốn thêm ấn phẩm nào vào

Thành phần Web trong JavaScript là gì?

4 Thành phần Web là gì?

Làm cách nào để tạo Thành phần Web trong JavaScript?

Thành phần trang web là gì?