Làm thế nào để tạo yếu tố HTML riêng của bạn với các thành phần Web

Các thành phần Web đang và hào hứng đang được nói đến như là một "sắp tới thay đổi kiến tạo để phát triển web "với lời hứa vĩnh viễn định hình lại cảnh quan thiết kế web. Cầu thủ lớn đang di chuyển về phía trước để mang lại cho các thành phần web thành hiện thực. Cả Google và Mozilla đã từng bước triển khai hỗ trợ trình duyệt bản địa.
Các thành phần web bạn yêu cầu là gì? Tóm lại, các thành phần web cung cấp cho bạn một cách để tạo ra các yếu tố tùy chỉnh HTML của riêng bạn mà có thể làm bất cứ thứ gì bạn cần họ. Thay vì tải lên trang web của bạn với các đánh dấu chi tiết, kịch bản dài và mã lặp đi lặp lại, bạn quấn tất cả mọi thứ thành tốt đẹp, gọn gàng ít yếu tố tùy chỉnh HTML.
Hãy cùng thiet ke web tai Hai Phong tìm hiểu ngay sau đây:

Tìm hiểu về Web Components

Cách dễ nhất để hiểu làm thế nào các thành phần web cho phép tùy chỉnh các yếu tố HTML là lần đầu tiên nhìn vào một yếu tố hiện tại chúng ta đã biết từ HTML5: các<video> tag. Sử dụng các yếu tố này, bạn có thể đặt một video chỉ với một vài dòng mã, ví dụ:

Bạn chỉ có thể nhìn thấy một vài dòng HTML trên, nhưng đây là những gì các <video>yếu tố thực sự trông giống như đằng sau hậu trường:

Theo mặc định, trình duyệt ẩn tất cả các mã tiết, do đó bạn không cần phải nhìn thấy nó hay lo lắng về cách viết nó khi bạn muốn đặt một video. Bạn chỉ cần Whack trong của bạn <video> và <nguồn> thẻ và bạn đang lên và chạy. 

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

Tham dự một slideshow hình ảnh ví dụ. Thông thường bạn sẽ cần một vài vòng divs lồng mang tên lớp cụ thể để xử lý các gói slideshow, gói 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 trình diễn tổng thể cho những thứ như hiệu ứng trượt chuyển đổi thông qua một số nội tuyến jQuery / Javascript.

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

1 2 3 4

< slide-show chuyển = "fade" > < trượt src = "slideone.jpg" ngón tay cái = "slideone_thumb.jpg" caption = "Hãy nhìn vào hình ảnh này" > < trượt src = "slidetwo.jpg" ngón tay cái = "slidetwo_thumb.jpg" caption = "Nhìn vào hình ảnh này khác" > </ slide-show >

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

Tạo của bạn yếu tố HTML riêng

Nếu bạn muốn cung cấp một súc tích, dễ dàng tương tác với các phương pháp đặt nội dung mà nếu không sẽ là cồng kềnh và khó sử dụng, bạn có thể đi trước và tạo ra thành phần web của riêng bạn.

Thành phần Web cũng có thể dễ dàng chia sẻ, vì vậy các nhà phát triển có được trên tàu có một đặt cược tốt, bạn sẽ có thể chỉ cần lấy một thành phần web dựng sẵn cho các yêu cầu dự án phổ biến nhất. Đã được chúng ta đang thấy các thành phần tự do chia sẻ bật lên cho mọi thứ, từ   nhận dạng giọng nói .. 

để  xây dựng trình bày ..

 để  tạo mã QR .

Chúng ta hãy nhìn vào những gì đằng sau bức màn của các thành phần web.

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

Thành phần Web, như chúng tồn tại vào lúc này, được tạo thành từ bốn phần:

• Tùy chỉnh các yếu tố
• Bóng DOM
• Mẫu
• Nhập khẩu HTML

Tùy chỉnh các yếu tố

Yếu tố tùy chỉnh là chính xác những gì họ âm thanh như: các yếu tố có thể được đặt tên là bất cứ điều gì bạn chọn, và hoạt động trong 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, tôi thực sự có nghĩa là nó. Ví dụ, tôi trình bày <x-Gangnam-style> yếu tố:

Tùy chỉnh các yếu tố được khai báo, ở dạng đơn giản nhất của họ, như vậy:

1 2 3

< tố tên = "x-Gangnam-phong cách" > ... </ phần >

Khi bạn tạo ra một yếu tố tùy chỉnh, 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 hiện có, chẳng hạn như <nút> ví dụ, và cung cấp cho nó các chức năng sửa đổi hoặc trình bày bạn cần.

1 2 3

< tố tên = "tùy chỉnh nút" mở rộng = "nút" > ... </ phần >

Lưu ý : nó có giá trị chỉ ra rằng <element> thẻ đã phản đối vào năm 2013 vì biến chứng. Nó có thể làm cho sự quay trở lại, nhưng trong khi chờ đợi có những lựa chọn polyfill, mà chúng tôi sẽ nói về trong một thời điểm. Nhờ Addy Osmani  đã chỉ mà ra!

The Shadow DOM

The Shadow DOM thực sự là khía cạnh cốt lõi của cách các thành phần web làm việc.Trước đó, chúng ta nhìn vào HTML5 <video>  phần tử và cho thấy như thế nào, mặc dù chỉ nhìn thấy một vài dòng mã, trong thực tế có khá nhiều mã ẩn theo mặc định. Nơi đang ẩn này sống được gọi là "Shadow DOM".

Các nhà cung cấp trình duyệt đã được sử dụng DOM bóng này trong nhiều năm để thực hiện các yếu tố tự nhiên như đầu vào, âm thanh, video và như vậy. Thông qua các thành phần web nó có thể được sử dụng bởi bất kỳ nhà phát triển.

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

Một trong những điều thú vị nhất về làm việc với Shadow DOM là mỗi trường hợp là thế giới nhỏ bé của riêng mình tự kiềm chế. Vì vậy, nếu bạn có phong cách và các kịch bản bên trong các yếu tố họ sẽ không vô tình bị rò rỉ ra ngoài và thực hiện bất cứ điều gì khác trên trang. 

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

Nếu bạn muốn xem những gì DOM bóng trông giống như, thật dễ dàng. Hãy chắc chắn rằng bạn đang chạy một ngày cho việc cài đặt của Chrome, mở Công cụ Dev, nhấp vào biểu tượng bánh răng để mở các thiết lập và kiểm tra các hộp có nhãn Hiện user agent bóng DOM :

Sau đó, khi bạn kiểm tra bất kỳ phần tử với một cái bóng DOM bạn sẽ thấy mã đầy đủ của nó. Hãy thử nó ra bằng cách kiểm tra <x-Gangnam-style> yếu tố có và không có bóng DOM 

Đối với một tóm tắt đầy đủ về DOM bóng kiểm tra:  Giới thiệu Shadow DOM

Mẫu

Chúng ta đã thảo luận cách thức tùy chỉnh các yếu tố cho phép chỉ là thông tin thích hợp để tập trung vào trong khi tất cả các mã còn lại bị che khuất trong DOM bóng. Một mẫu trong một thành phần web là những gì giữ tất cả các yếu tố presentational các mã còn lại.

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

Ví dụ, hãy nhìn vào các mã đã tạo ra <x-Gangnam-style> thành phần web. Nó mở<template> thẻ là dòng 4 và kết thúc của nó </ template> thẻ là trên đườ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 tạo ra các vị trí và hình ảnh động, và HTML đặt mỗi hình ảnh có liên quan. 

Nhập khẩu HTML

Nhập khẩu HTML cho phép bạn chụp 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 của bạn. Thành phần Web được định nghĩa trong một tập tin HTML khi thiet ke website bên ngoài, do tập tin cần được nhập khẩu để cho một yếu tố tùy chỉnh để làm việc. Nhập khẩu HTML xử lý này thông qua một <link> thẻ, bạn sẽ làm quen với nhập khẩu từ các tập tin CSS bên ngoài.

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

1	< link rel = "nhập khẩu" href = "/components/x-Gangnam-style.html" >

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

Các khả năng được cung cấp bởi các thành phần web làm cho ý tưởng đầu lặn đầu tiên vào sử dụng chúng rất hấp dẫn, tuy nhiên tại thời điểm hỗ trợ trình duyệt vẫn chưa khả thi. Hiện trạng hỗ trợ như sau:

Hỗ trợ bản địa là trong quá trình đang được thực hiện cho Chrome, Opera và Firefox, nhưng vẫn chưa hoàn thành. IE và Safari chưa thực hiện kế hoạch của họ được biết đến, tuy nhiên nó nghĩ rằng với đa số  các trình duyệt sẽ hỗ trợ các thành phần web cuối cùng các trình duyệt khác có thể sẽ làm theo phù hợp.

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 những polyfills có sẵn. Các tin tốt là hai trong số những giải pháp phổ biến nhất được tạo ra bởi Google và Mozilla, vì vậy chúng tôi có thể mong đợi để xem một số nhất quán với cách hỗ trợ bản địa cuối cùng sẽ hoạt động.

Polymer của Google

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

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

Khi tạo ra các yếu tố tùy chỉnh với Polymer, thay vì sử dụng các định dạng  <tên nguyên tố = "..."> bạn sử dụng  <tên polymer phần tử = "..."> .

Polymer mô tả chính nó như là trong "xem trước phát triển" chứ không phải là hoàn toàn sản xuất sẵn sàng, tuy nhiên họ cũng nói 

... Mặc dù nhãn nhiều người đã có sự thành công bằng cách sử dụng polymer trong sản xuất.

Hỗ trợ trình duyệt

• Chrome Android
• Chrome
• Canary
• Firefox
• IE 10 +
• Safari 6 +
• Điện thoại di động Safari

Nếu bạn cần để phục vụ cho IE9, được ước tính nắm giữ khoảng  1,9%  đến  5,11%  thị phần, tiếc là bạn không gặp may với polymer. Tuy nhiên, bạn vẫn có thể đi với Mozilla X-Download để thay thế.

X-Tags bởi Mozilla

X-Tags là một thư viện JavaScript được viết bởi Mozilla rằng, hiện nay, có một lợi thế hơn Polymer trong đó hỗ trợ trình duyệt của nó là rộng hơn đạt. Nếu đó là một chính xem xét cho bạn X-khóa có thể được sở thích của bạn.

Hỗ trợ trình duyệt

• Firefox 5 + máy tính để bàn và điện thoại di động
• Chrome 4 +
• Chrome Android 2.1 +
• Safari 4 + máy tính để bàn và điện thoại di động
• IE9 +
• Opera 11 + máy tính để bàn và điện thoại di động

Hỗ trợ IE8

Ngay bây giờ, nếu bạn cần hỗ trợ IE8 sau đó tiếc là các thành phần web không có khả năng được cho bạn là polyfills có sẵn hỗ trợ IE9 +. Ước tính người dùng IE8 là vào 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 khác nhau, bạn sẽ phải thực hiện cuộc gọi phán quyết về cách xa trở lại hỗ trợ trình duyệt của bạn sẽ kéo dài.

Ember.js và AngularJS Linh kiện

Một cách có thể bạn có thể chuẩn bị cho mình để chuyển sang sử dụng các thành phần web là làm việc với Ember.js hoặc AngularJS  cho thời gian được. Cả hai đều có hệ thống riêng của họ tạo ra thành phần và cả hai hứa sẽ chuyển tiếp vào sử dụng mã thành phần web bản địa khi nó trở nên hoàn toàn có sẵn.
Thiết kế web Hải Phòng sưu tầm.
Xem thêm: thiết kế web ở Cần Thơ.