Tại sao không nên sử dụng inline Javascript trong HTML ?

Ngo Que Lam

• 2 min read

1. Inline Javascript

Inline Javascript là khi bạn tích hợp mã HTML của mình trực tiếp với mã Javascript trong trang.

Ví dụ:

<form>
  <input type="button" value="Start machine" onclick="callSomeFunction()">
</form>

2. Tại sao không nên sử dụng inline Javascript ?

Khó khăn khi code/bảo trì

  • Nếu chỉ nhìn vào mã JavaScript ta sẽ không rõ là đang được xử lý phần nào của HTML.
  • Nếu cần thay đổi mã Js (ví dụ tên Hàm) ta cần tìm tới từng phần tử HTML gọi đến hàm đó để sửa đổi.
  • Trên một phần tử chỉ thêm được 1 kiểu sự kiện on-* (ví dụ chỉ 1 sự kiện onchange).

Clean code

  • Khi cần thêm sự kiện vào nhiều phần tử HTML (ví dụ nhiều hàng trong bảng) cùng một lúc sẽ phải thêm event (ví dụ onchange) cho từng phần tử HTML => lặp lại mã.
  • Khi tách biệt Js với HTML sẽ giữ cho HTML "sạch" Javascript, Js và HTML sẽ được xử lý ở mỗi file riêng biệt.
  • Có thể tái sử dụng code.

Kích thước tệp HTML

  • Khi sử dụng inline JavaScript, file HTML của sẽ nặng hơn, tức là một trang web có mã tương tự sẽ có kích thước kb lớn hơn rất nhiều so với mức cần thiết.

Bộ nhớ đệm

  • Phần lớn các trang web hiện nay là trang web động, thậm chí hiển thị tuỳ chỉnh theo hành vi người dùng nên các file HTML thường xuyên được thay đổi, điều đó dẫn tới khi mã HTML thay đổi thì mã Js và HTML trong Files Cached HTML sẽ không được áp dụng mà phải load lại từ đầu. Ngược lại nếu được tách riêng, Files Cached Js vẫn sẽ được tận dụng lại từ đó sẽ giảm thời gian duyệt web và tiết kiệm băng thông.

3. Ta nên viết javascript ở đâu ?

Việc tách biệt mã HTML và Js tương đối dễ dàng. Cách tốt nhất là tạo một file JavaScript riêng biệt và nhúng file này vào file HTML.

Kết nối javascript với HTML

  • Sử dụng thẻ <script src=""></script>. Thuộc tính src để đặt đường dẫn file js.
  • JavaScript tương tác với HTML thông qua các attribute như class, id.

Ta có thể viết JavaScript như sau:

  • File demo.js
$(document).ready(function () {
    $('.demo').click(function () {
        callSomeFunction();
    });
});
  • File demo.html
<html lang="en">

<head>
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js.js"></script>
</head>

<body>
    <input type="button" class="demo" value="Hello">
</body>

</html>

4. Kết luận

Qua các phần trên, ta đã thấy được lợi ích và việc tách biệt giữa HTML và JavaScript là cần thiết. Do đó, hãy đưa mã Js ra ngoài mã HTML để công việc bảo trì cũng như trải nghiệm người dùng được tốt hơn.

Tài liệu tham khảo
Why Inline CSS And JavaScript Code Is Such A Bad Thing
Why is using onClick() in HTML a bad practice?

Sign up for more like this.

Enter your email
Subscribe