Unobtrusive JavaScript là một phong cách viết mã JavaScript cho phần frontend của trang web để tạo ra một trải nghiệm người dùng tốt. Để làm được điều này, lập trình viên cần biết và áp dụng Unobtrusive JavaScript như một thói quen quan trọng mỗi khi viết mã JavaScript cho ứng dụng của mình.
Khái niệm Unobtrusive JavaScript
Người dùng thường coi trang web là bao gồm ba phần: nội dung và cấu trúc, giao diện và định dạng, cùng với hành vi. Các chuyên gia phát triển web đã khuyến nghị phân tách các phần này. HTML được sử dụng để xây dựng cấu trúc và hiển thị nội dung, trong khi CSS dùng để tạo giao diện và định dạng. Hành vi và tương tác của người dùng với trang web được xử lý bằng cách sử dụng Unobtrusive JavaScript.
Cài đặt Unobtrusive JavaScript
Để minh họa kỹ thuật này, chúng ta sẽ sử dụng ví dụ về việc mở một tab trình duyệt mới và hiển thị nội dung từ một liên kết bên ngoài khi người dùng nhấp vào liên kết đó trên trang web của chúng ta.
Cách làm bất tiện nhất
Một cách để làm điều này là bằng cách thêm mã JavaScript trực tiếp vào thuộc tính href của thẻ <a>. Tuy nhiên, cách làm này đã tạo ra nhiều bất tiện và phản đối từ người dùng và các lập trình viên web.
Nếu mã JavaScript bị vô hiệu hóa trên trang web của người dùng, liên kết trên sẽ không hoạt động. Đồng thời, việc bảo trì trang web cũng trở nên khó khăn vì phải sửa đổi tất cả các liên kết đã sử dụng cách làm cũ.
Cách tốt hơn
Một cách khác để làm điều này là thay vì thêm mã JavaScript trực tiếp vào thuộc tính href, chúng ta sẽ thêm mã JavaScript vào thuộc tính onclick:
Mặc dù cách làm này vẫn là một ác mộng đối với việc bảo trì mã, nó vẫn hoạt động khi trình duyệt người dùng không hỗ trợ hoàn toàn hoặc một phần mã JavaScript. Nếu mã JavaScript không hoạt động, thay vì mở một tab mới, người dùng sẽ truy cập trực tiếp đến liên kết trong tab hiện tại.
Unobtrusive JavaScript
Một cách làm tốt hơn so với cách làm trên là sử dụng kỹ thuật Unobtrusive JavaScript. Bằng cách này, chúng ta sẽ thêm thuộc tính class vào các thẻ <a> tương ứng và xử lý chúng bằng mã JavaScript:
Bài viết W3C
Bài viết Wikipedia
Tiếp theo, chúng ta sẽ viết mã JavaScript cho các phần tử có class new_window. Đoạn mã JavaScript này có thể được đặt trong tài liệu HTML hoặc một file JavaScript riêng:
// Chọn tất cả các phần tử có class new_window
var anchors = document.getElementsByClassName('new_window');
// Lặp qua các phần tử và thêm hành động cho thuộc tính onclick
for(var i=0; i < anchors.length; i++){
anchors[i].onclick = function(){
// Mở liên kết trong tab trình duyệt mới
window.open(this.href);
return false;
}
}Trong đoạn mã JavaScript này, từ this đại diện cho phần tử HTML mà người dùng đang tương tác, cụ thể là các thẻ <a> dùng để chuyển hướng đến các trang bên ngoài.
Lợi ích của Unobtrusive JavaScript
Có nhiều lý do mà lập trình viên web quyết định sử dụng Unobtrusive JavaScript. Từ cách triển khai như trên, chúng ta có thể dễ dàng bảo trì mã và cập nhật các tính năng mới. Tuy nhiên, lợi ích của kỹ thuật này không chỉ dành riêng cho lập trình viên mà còn hướng đến người dùng.
Khi một người dùng truy cập trang web của bạn, không thể đảm bảo rằng thiết bị, trình duyệt hoặc kết nối của họ đủ tốt để trải nghiệm tốt nhất. Một số trình duyệt cũ có thể không thực thi mã JavaScript do không hỗ trợ phương thức getElementsByClassName, dẫn đến việc vô hiệu hoá đoạn mã JavaScript. Để triển khai Unobtrusive JavaScript đầy đủ, chúng ta nên tùy chỉnh đoạn mã JavaScript để tương thích với các trình duyệt cũ hơn hoặc sử dụng thư viện jQuery để dễ dàng hơn.
Đối với vấn đề kết nối internet, đặt mã JavaScript ở cuối trang HTML để tải trước mã HTML và CSS.
Một trường hợp phổ biến khác là một số thiết bị hỗ trợ người khiếm thị không thực thi hoặc không hỗ trợ đầy đủ cú pháp JavaScript. Vì vậy, việc ưu tiên tải nội dung đầy đủ là rất quan trọng.
Kết luận
Unobtrusive JavaScript giúp nhiều người dùng truy cập nội dung trang web của bạn dễ dàng hơn, tạo lợi ích cho tất cả mọi bên: chính bạn, người sở hữu trang web và khách hàng của bạn. Đây thực sự là một giải pháp đôi bên đều có lợi. Vì vậy, hãy cố gắng sử dụng Unobtrusive JavaScript một cách hợp lý và hiệu quả để tạo ra những ứng dụng chất lượng.
Tài liệu tham khảo
[1] What is Unobtrusive JavaScript and Why it’s Important?
[2] Unobtrusive JavaScript
[3] The principles of unobtrusive JavaScript
Được chỉnh sửa bởi: Dnulib
