Nếu có quan tâm và làm việc với javascript thì hẳn ai cũng đều nghe tới thuật ngữ `unobtrusive javascript`. Vậy thì thật sự thuật ngữ này muốn nói tới điều gì? Chúng ta hãy cùng khám phá …

Khái niệm

Unobtrusive JavaScript là một cách tiếp cận tổng quát về cách sử dụng Javascript trong trang web. Mặc dù thuật ngữ không định nghĩa một các chính thức nhưng các nguyên lý cơ bản của thuật ngữ này có thể hiểu gồm có:

  • Sự tách biệt hoàn toàn giữa cấu trúc phần từ trang web (hệ thống DOMs) với các chức năng, hiệu ứng của trang
  • Là mô hình tối ưu để tránh các vấn đề truyền thống khi lập trình Javascript (như sự không tương thích giữa các trình duyệt hay sự thiếu khả năng mở rộng)
  • Tăng cường sự hỗ trợ cho các trình duyệt, máy khách không hỗ trợ các tính năng Javascript nâng cao

(trích, dịch từ wiki)

Nói một cách ngắn gọn, Unobtrusive Javascript là một phương pháp học nhằm giảm sự phụ thuộc của một trang web vào các thành phần Javascript chứa trong nó, đảm bảo rằng trang web vẫn có thể hoạt động được mà không cần tới các tính năng của Javascript (như khi trình duyệt không hỗ trợ chạy Javascript).

Lợi ích – Mục đích

Đảm bảo trang web hoạt động tốt trên hầu hết các môi trường

Bạn không thể biết chính xác tất cả các loại trình duyệt, thiết bị hay tình trạng mạng nơi trang web được tải về, và vì thế bạn cần xác định các phương thức, hướng tiếp cận đem lại khả năng đáp ứng tốt nhất cho người dùng dù môi trường của họ có như thế nào.

Việc bảo trì code, mở rộng tính năng trở nên dễ dàng hơn

Do có sự tách biệt rõ ràng, chúng ta không bị rối khi muốn bảo trì hay thay đổi một chức năng nào đó. “Chia để trị” là một cách tiếp cận rất hiệu quả trong trường hợp này bởi nếu dồn tất cả các loại tính năng vào một chỗ mà không có sự phân chia, bạn có thể dễ dàng rơi vào tình trạng sau 😀

A young Asian programmer wearing business casual clothes starts sleeping on his desk during programming work at his room

Thời gian đáp ứng của trang web trở nên nhanh hơn

Với các phần tử HTML, CSS và Javascript được tách biệt, trang web có thể tải Javascript cuối cùng (sẽ giải thích kĩ hơn phần sau) và từ đó giảm xđộ trễ đáp ứng của trang web: chỉ cần tải HTML và CSS để đáp ứng trước thay vì phải thêm cả Javascript.

 

Một vài hướng hiện thực

Sử dụng các thư viện hỗ trợ nhiều loại trình duyệt, phiên bản trình duyệt cũng như có hỗ trợ các thiết bị di động. (ví dụ như Jquery)

Tải tập tin javascript sau cùng, khi các phần tử html đã tải xong để tăng tốc độ đáp ứng người dùng và cũng là để các tính năng bắt phần tử HTML của Javascript (nếu có) có thể hoạt động chính xác.

Trong việc lập trình, cố gắng không thêm các thuộc tính liên quan tới Javascript trực tiếp vào phần tử html như thông qua `onClick`, chèn `javascript:window.open` vào `href`, … Thay vào đó ta sử dụng các hàm độc lập như đoạn code jquery sau:

$("#test-alert-button").on("click", function() {
  alert("It works fantastically!");
})

Nếu có thể, hãy sử dụng các Javascript frameworks hoàn chỉnh như EmberJS, BackboneJS, AngularJS hay ReactJS, … Điều này giúp việc quản lí các chức năng, hiệu ứng của trang web trở nên có hệ thống, dễ dàng duy trì, mở rộng.

Kết luận

Obtrusive dịch ra có nghĩa là gây khó chịu, làm phiền nhiễu và Unobtrusive là một tính từ khẳng định không gây ra những cảm xúc tiêu cực đó. Unobtrusive Javascript chính là một thuật ngữ muốn nói tới những phương pháp lập trình để tránh được sự phụ thuộc, phiền nhiễu của Javascript vào một trang web bất kì. Ngày nay, đây là một trong những khái niệm cơ sở mà các lập trình viên Javascript cần phải hiểu và nắm rõ.

Nguồn tham khảo: