Tại sao tất cả các trang web đều được xây dựng với sự kết hợp của cấu trúc, kiểu và hành vi
Một sự tương tự phổ biến được sử dụng để mô tả phát triển trang web đầu cuối là nó giống như một chiếc ghế 3 chân. Ba chân này, còn được gọi là 3 lớp phát triển web, là Cấu trúc, Kiểu và Hành vi.
Ba lớp phát triển web
- Cấu trúc hoặc lớp nội dung
- Cấu trúc hoặc lớp nội dung của trang web là mã HTML cơ bản của trang đó. Giống như khung của một ngôi nhà tạo ra một nền tảng vững chắc mà phần còn lại của ngôi nhà được xây dựng, do đó, một nền tảng vững chắc của HTML tạo ra một nền tảng mà trên đó một trang web có thể được tạo ra. Cấu trúc HTML có thể bao gồm văn bản hoặc hình ảnh và bao gồm các siêu liên kết mà khách truy cập sẽ sử dụng để điều hướng xung quanh trang web đó.
- Lớp phong cách hoặc bản trình bày
- Lớp kiểu hoặc bản trình bày quy định cách một tài liệu HTML có cấu trúc sẽ trông như thế nào đối với khách truy cập của trang web. Lớp này được định nghĩa bởi CSS (Cascading Style Sheets). Những tệp này chứa các kiểu cho biết cách hiển thị tài liệu trong trình duyệt web. Trên Web ngày nay, lớp kiểu cũng có thể bao gồm Truy vấn phương tiện có thể thay đổi hiển thị của trang web dựa trên các kích thước và thiết bị màn hình khác nhau.
- Hành vi
- Lớp hành vi là lớp của trang Web có thể phản hồi các hành động của người dùng khác nhau hoặc thực hiện thay đổi cho một trang dựa trên một tập hợp các điều kiện. Đối với hầu hết các trang Web, mức độ hành vi sẽ là các tương tác JavaScript trên trang.
Tại sao bạn nên tách lớp?
Khi bạn đang tạo một trang web, nó là mong muốn để giữ cho các lớp như tách ra càng tốt. Cấu trúc nên được tâm sự với HTML, kiểu trực quan của bạn đối với CSS và hành vi đối với bất kỳ tập lệnh nào mà trang web sử dụng.
Một số lợi ích của việc tách lớp là:
- Tài nguyên được chia sẻ
- Khi bạn viết một tệp CSS hoặc tệp JavaScript bên ngoài, bạn có thể sử dụng tệp đó bằng bất kỳ trang nào trên trang web của mình. Nếu bạn cần thực hiện thay đổi đối với tệp đó, có lẽ để cập nhật một số kiểu chữ trên trang web, mọi trang sử dụng biểu định kiểu đó sẽ nhận được thay đổi. Không cần phải chỉnh sửa từng trang của trang web riêng lẻ, mà cho trang web lớn hơn có thể là một cam kết mệt mỏi.
- Tải xuống nhanh hơn
- Khi tập lệnh hoặc biểu định kiểu đã được khách hàng của bạn tải xuống lần đầu tiên, nó được lưu trong bộ nhớ cache bởi trình duyệt web của họ. Bởi vì các tài nguyên được chia sẻ này hiện có trong bộ nhớ cache, các trang khác được yêu cầu trong trình duyệt tải nhanh hơn, giúp cải thiện tốc độ và hiệu suất tổng thể của trang.
- Nhóm nhiều người
- Nếu bạn có nhiều người cùng làm việc trên trang web cùng một lúc, bạn có thể sử dụng hệ thống để "đăng ký" và "kiểm tra" tệp để đảm bảo rằng mọi người trong nhóm đang làm việc với phiên bản mới nhất của những tệp này. Điều này khó thực hiện hơn nếu các kiểu và hành vi được đan xen với các tài liệu cấu trúc.
- SEO
- Trang web có khả năng tách kiểu và cấu trúc rõ ràng có khả năng hoạt động tốt hơn cho các công cụ tìm kiếm vì các trang web đó có thể thu thập dữ liệu nội dung đó hiệu quả hơn và hiểu trang mà không bị sa lầy với thông tin về hình ảnh hoặc hành vi.
- Trợ năng
- Các tệp định kiểu ngoài và tệp tập lệnh có thể dễ tiếp cận hơn với mọi người và với các trình duyệt. Bởi vì có sự tách biệt về phong cách và cấu trúc, phần mềm như trình đọc màn hình có thể dễ dàng xử lý nội dung từ lớp cấu trúc mà không bị sa lầy bởi các kiểu mà chúng không thể sử dụng được.
- Khả năng tương thích ngược
- Khi bạn có một trang web được thiết kế với các lớp phát triển, nó sẽ tương thích ngược hơn vì trình duyệt hoặc thiết bị không thể sử dụng các kiểu CSS nhất định hoặc có thể đã tắt JavaScript vẫn có thể xem HTML. Trang web của bạn sau đó có thể được tăng cường dần dần với các tính năng dành cho các trình duyệt hỗ trợ chúng.
HTML - Lớp cấu trúc
Lớp cấu trúc là nơi bạn lưu trữ tất cả nội dung mà khách hàng của bạn muốn đọc hoặc xem. Điều này sẽ được mã hóa theo các tiêu chuẩn tuân thủ HTML5 và nó có thể bao gồm văn bản và hình ảnh cũng như đa phương tiện (video, âm thanh, v.v.). Điều quan trọng là phải đảm bảo rằng mọi khía cạnh của nội dung trang web của bạn được thể hiện trong lớp cấu trúc. Điều này cho phép bất kỳ khách hàng nào đã tắt JavaScript hoặc không thể xem CSS để vẫn có quyền truy cập vào toàn bộ trang web, nếu không phải tất cả chức năng của trang web đó.
CSS - Lớp Kiểu
Bạn sẽ tạo tất cả các kiểu trực quan cho trang web của mình trong một bảng định kiểu bên ngoài. Bạn có thể sử dụng nhiều bảng định kiểu, nhưng hãy nhớ rằng mọi tệp CSS riêng biệt đều yêu cầu một yêu cầu HTTP để tìm nạp, ảnh hưởng đến hiệu suất trang web.
JavaScript - Lớp hành vi
JavaScript là ngôn ngữ được sử dụng phổ biến nhất cho lớp hành vi, nhưng như tôi đã đề cập trước đây, CGI và PHP cũng có thể tạo ra các hành vi trang Web. Điều đó đang được nói, khi hầu hết các nhà phát triển tham khảo lớp hành vi, họ có nghĩa là lớp đó được kích hoạt trực tiếp trong trình duyệt Web - vì vậy JavaScript gần như luôn là ngôn ngữ của sự lựa chọn. Bạn sử dụng lớp này để tương tác trực tiếp với DOM hoặc Mô hình đối tượng tài liệu. Việc viết HTML hợp lệ trong lớp nội dung cũng rất quan trọng đối với các tương tác DOM trong lớp hành vi.
Khi bạn xây dựng trong lớp hành vi, bạn nên sử dụng các tệp kịch bản bên ngoài giống như với CSS. Bạn nhận được tất cả những lợi thế tương tự của việc sử dụng một bảng định kiểu bên ngoài.