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

Posted on by adminChuyên mục:Kiến thức Internet
Web Component hiện đang được nhắc đến như thể một ” ý tưởng làm đổi khác việc tăng trưởng web ” hứa hẹn làm biến hóa việc tăng trưởng web đã sống sót lâu nay. Những người có nghĩa vụ và trách nhiệm đang thao tác để mang Web Component vào trong thực tiễn. Cả Google và Mozilla đã từ từ tương hỗ .
Web Component là gì ? Một cách ngắn gọn, Web Component cung ứng cho bạn một cách để tạo những thành phần HTML tùy biến của riêng bạn mà hoàn toàn có thể làm bất kể điều gì bạn cần. Thay vì tải những website của bạn với mã lưu lại dài dòng, script dài và code lặp đi lặp lại, thì bạn đặt tổng thể mọi thứ bên trong thành phần HTML tùy 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ẻ . 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ử 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ẻ và của bạn và bạn đã hoàn tất.

Trước đó, chỉ nhà cung ứng trình duyệt mới hoàn toàn có thể tạo ra những thành phần theo cách này. Nhưng hãy tưởng tượng rằng nếu bạn hoàn toàn có thể sử dụng cách tương tự như này cùng với những 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ó những tên lớp đơn cử để giải quyết và 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 những tùy chọn toàn diện và tổng thể cho slideshow như hiệu ứng chuyển tiếp trải qua 1 số ít jQuery / JavaScript .
Nếu bạn hoàn toàn có thể bỏ lỡ toàn bộ những thứ đó và thay vào đó bạn chỉ cần sử dụng :

1
 
 transition =" fade ">

2
 
 src =" slideone.jpg " thumb =" slideone_thumb. jpg " caption =" Look at this image ">

3
 
 src =" slidetwo.jpg " thumb =" slidetwo_thumb. jpg " caption =" Look at this other image ">

4
 










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 phân phối một sự súc tích, thuận tiện tương tác với những phương pháp 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 hoàn toàn có thể thuận tiện được san sẻ, do đó, với vai trò là những nhà tăng trưởng bạn sẽ hoàn toàn có thể chỉ cần lấy một Web Component dựng sẵn cho những nhu yếu thường thì nhất của dự án Bất Động Sản. Chúng ta đang thấy những Web Component được san 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 những Web Component .


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


Web Component, như ở thời gian 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ử :


Demo – di chuột qua cái thanhCác thành phần được định nghĩa, trong hình thức đơn thuần nhất của chúng, giống như thế này :








1




 name =" x-gangnam-style "
>










2




...









3












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ư , và tạo cho nó tính năng hoặc kiểu dáng đã được thay đổi mà bạn cần.








1




 name =" custom-button " extends =" button ">









2




...









3












Lưu ý: điều đáng nói là thẻ  đã 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ử  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 ứng trình duyệt đã sử dụng Shadow DOM này trong nhiều năm để setup những thành phần như input, audio, video và vân vân. Thông qua Web Component nó hoàn toàn có thể được sử dụng bởi bất kể nhà tăng trưởng 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ử .


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

trái lại, CSS và JavaScript ở những nơi khác trên website sẽ không có tính năng lên những thành phần website của bạn, ngoại trừ hook mà bạn hoàn toàn có thể đặc biệt quan trọng tạo ra để cho phép CSS bên ngoài định phong thái. Tất cả những điều đó có nghĩa là không cần lo ngại về khoảng trống tên ID và những 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ử  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 vừa đủ về Shadow DOM hãy xem : Giới thiệu về Shadow DOM


Template


Chúng ta đã khái quát cách thành phần tùy biến được cho phép chỉ những thông tin thiết yếu để tập trung chuyên sâu vào trong khi tổng thể những 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ổng thể những thành phần trình diễn 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ẻ  đượ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 . Thẻ mở  của nó là ở dòng thứ 4 và thẻ đóng 


 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ẻ , 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  bạn sẽ phải nhập tập tin HTML định nghĩa nó, như sau:








1




 rel =" import " href =" / components / x-gangnam-style.html ">









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


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

Chrome, Opera, Firefox đang trong quy trình thiết lập tương hỗ nhưng vẫn chưa hoàn tất. IE và Safari vẫn chưa thực thi kế hoạch của họ, tuy nhiên những trình duyệt chính sẽ tương hỗ thành phần web .

Ngay giờ đây, nếu bạn muốn khởi đầu thao tác với những thành phần web, bạn sẽ cần phải sử dụng một trong những polyfill có sẵn. Tin tốt là hai trong số những giải pháp thông dụng nhất được tạo ra bởi Google và Mozilla, do đó, tất cả chúng ta hoàn toàn có thể đặt kỳ vọng thấy một số ít tính đồng điệu với hai sự tương hỗ ở đầu cuối sẽ hoạt động giải trí 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 giờ đây là trình duyệt được sử dụng thoáng đãng nhất, và bạn hoàn toàn có thể giả định xem xét sẽ được đưa ra trong quy trình tăng trưởng 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 khá đầy đủ với những thành phần web dựng sẵn. Nó gồm có ” Polymer Core elements ” có công dụng xu thế, và những ” Paper elements ” là xu thế phong cách 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  bạn sử dụng .


Polymer diễn đạt chính nó như là đang trong ” developer preview ” chứ không phải là mẫu sản phẩm triển khai xong, 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 ship hàng cho IE9, ước tính khoảng chừng 1,9 % đến 5,11 % thị trường, tiếc là nó không gặp may với Polymer. Tuy nhiên, thay vào đó bạn hoàn toà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 giờ đây, nếu bạn cần tương hỗ IE8 thì tiếc là Web Component có vẻ như không tương hỗ vì polyfill chỉ tương hỗ IE9 +. Ước tính rằng người dùng IE8 khoảng chừng 2,1 % đến 3.82 %, nhưng tất yếu 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 thi một quyết định hành động tương hỗ trình duyệt của bạn nên lê dài như thế nào .


Ember.js và AngularJS Components


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


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 kỳ vọng bạn thú vị với hướng dẫn về Web Component là gì và tại sao bạn nên chăm sóc đến nó ! Có rất nhiều thứ để tìm hiểu và khám phá, nhưng với những kim chỉ nan cơ bản đã được khái quát, chúng tôi sẽ có nhiều hướng dẫn thực sự thiết kế 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 ?

	
	

				

						
							
						

					

					

			admin