Thư Viện Câu Hỏi Phỏng Vấn

Bản chất vấn đề

Junior lập trình viên thường nhầm lẫn giữa việc lấy kích thước phần tử DOM thông qua thuộc tính CSS hay thông qua các phương thức đo lường nội tại của jQuery. Sự khác biệt cốt lõi nằm ở đơn vị trả về và cách tính toán các thành phần trong Box Model (Padding, Border).

Bản chất vấn đề

Khi thao tác với một tập hợp nhiều phần tử DOM (ví dụ: danh sách các hàng trong bảng), Junior thường viết vòng lặp $.each() kết hợp với câu lệnh điều kiện if để tìm kiếm phần tử thỏa mãn. Cách làm này làm giảm hiệu năng và mã nguồn trở nên cồng kềnh, không tận dụng được cơ chế Native Filtering của jQuery.

Bản chất vấn đề

Phương thức .load() của jQuery là một tiện ích ngắn gọn để tải dữ liệu HTML từ một URL và chèn nó vào một phần tử DOM được chọn. Mặc dù tiện lợi, việc lạm dụng phương thức này trong các ứng dụng web quy mô lớn có thể dẫn đến các vấn đề về bảo mật, khó khăn trong quản lý trạng thái và hiệu năng.

Bản chất vấn đề

Các hiệu ứng chuyển động như .fadeIn(), .fadeOut(), .slideToggle() trong jQuery thực hiện thay đổi thuộc tính CSS liên tục qua từng khung hình (Frames) sử dụng hàm setTimeout hoặc requestAnimationFrame. Khi áp dụng các hiệu ứng này đồng thời cho một số lượng lớn phần tử DOM (ví dụ: danh sách hàng trăm sản phẩm), trình duyệt sẽ gặp hiện tượng tụt khung hình (Jank/Lag) do tắc nghẽn luồng chính (Main Thread).

Bản chất vấn đề

Khi phát triển ứng dụng web, việc người dùng thực hiện các hành động liên tục như tìm kiếm thời gian thực (Live Search) hoặc bấm nút gửi form nhiều lần có thể tạo ra các yêu cầu AJAX dư thừa. Nếu không hủy bỏ các yêu cầu cũ, ứng dụng có thể gặp tình trạng Race Conditions, phản hồi cũ ghi đè lên phản hồi mới hoặc gây lãng phí tài nguyên mạng.

Bản chất vấn đề

Khi sử dụng phương thức .click() hoặc .on() trực tiếp trên một tập hợp các phần tử jQuery (ví dụ: $('.my-button').click(...)), jQuery sẽ tìm kiếm các phần tử có sẵn trong DOM tại thời điểm thực thi dòng lệnh đó và gắn Event Handler vào chúng. Đối với các phần tử được thêm vào DOM sau đó bằng AJAX hoặc thao tác DOM động, chúng chưa tồn tại tại thời điểm gắn sự kiện nên sẽ không nhận được Event Handler.

Bản chất vấn đề

Khi người dùng click liên tục vào nút gửi dữ liệu (Submit Button) trước khi phản hồi từ server trả về, ứng dụng có thể tạo ra nhiều yêu cầu AJAX đồng thời. Điều này dẫn đến việc tạo dữ liệu trùng lặp trong cơ sở dữ liệu hoặc gây quá tải hệ thống.

Bản chất vấn đề

Cả .data() và thuộc tính HTML data-* đều được sử dụng để lưu trữ dữ liệu gắn liền với phần tử DOM, tuy nhiên cách chúng quản lý bộ nhớ và đồng bộ dữ liệu hoàn toàn khác nhau.

Bản chất vấn đề

Chaining cho phép thực hiện liên tiếp nhiều phương thức trên cùng một đối tượng jQuery mà không cần gọi lại bộ chọn (Selector) nhiều lần, giúp code gọn gàng hơn.

Bản chất vấn đề

Khi một phần tử DOM bị xóa khỏi trang bằng cách gán trực tiếp chuỗi HTML vào phần tử cha (ví dụ: $('#container').html('')), các Event Handlers gắn trên các phần tử con bên trong có thể không được thu hồi đúng cách nếu chúng không được quản lý thông qua cơ chế của jQuery. Điều này dẫn đến hiện tượng rò rỉ bộ nhớ (Memory Leak) trong ứng dụng Single Page Application hoặc trang web chạy lâu dài.

Phân tích bản chất

Trước đây, lập trình viên thường dùng các thuộc tính tùy chỉnh trên HTML (như data-* hoặc tự chếattr('custom-id', 123)) để lưu trữ trạng thái dữ liệu. Cách này có nhược điểm là làm lộ dữ liệu ra DOM, khó quản lý kiểu dữ liệu phức tạp (chỉ lưu được chuỗi) và dễ gây xung đột.

Phân tích bản chất

• Phương thức .bind(): Đây là cách cũ để gắn sự kiện vào các phần tử khớp với selector tại thời điểm gọi phương thức. Dưới mui xe, nó gọi trực tiếp phương thức .addEventListener() của DOM (hoặc attachEvent cho IE cũ) lên từng phần tử được tìm thấy.
• Phương thức .on(): Được giới thiệu từ jQuery 1.7 nhằm thống nhất tất cả các API gắn sự kiện (.bind(), .live(), .delegate()). Nó không chỉ gắn sự kiện trực tiếp mà còn hỗ trợ mạnh mẽ cơ chế Event Delegation (ủy quyền sự kiện).

Lý do nên dùng .on()

1. Hiệu năng và Quản lý bộ nhớ: Với .on(), bạn có thể gắn sự kiện cho một phần tử cha (ví dụ: document hoặc một container) để lắng nghe sự kiện từ các phần tử con (kể cả các phần tử con được sinh ra sau đó trong tương lai). Điều này tránh việc phải lặp qua hàng ngàn phần tử để gắn sự kiện riêng lẻ.
2. Tính linh hoạt: Hỗ trợ gắn nhiều sự kiện cùng lúc với namespace (ví dụ: .on('click.myNamespace', handler)).
3. Đồng nhất API: Thay vì nhớ nhiều hàm khác nhau, .on() đáp ứng mọi nhu cầu từ gắn sự kiện trực tiếp đến ủy quyền.

Ví dụ minh họa

// Sử dụng .bind() - Không hỗ trợ phần tử sinh ra sau
$('#myButton').bind('click', function() {
    alert('Clicked');
});

// Sử dụng .on() với Event Delegation - Tối ưu cho phần tử động
$('#parentContainer').on('click', '.dynamicButton', function() {
    alert('Dynamic button clicked');
});

Lưu ý thực chiến

Ở cấp độ Junior, bạn cần từ bỏ thói quen sử dụng .bind() hay .click() trực tiếp cho các danh sách động (như bảng dữ liệu, danh sách sản phẩm load bằng AJAX). Hãy luôn dùng .on() kết hợp với selector con để đảm bảo hiệu năng và không bị sót sự kiện.

Phân tích bản chất

Khi phát triển ứng dụng web, thường có các nghiệp vụ yêu cầu gọi AJAX này xong mới lấy kết quả để gọi AJAX tiếp theo (ví dụ: Lấy thông tin User -> Dựa vào ID lấy danh sách đơn hàng -> Dựa vào mã đơn hàng lấy chi tiết thanh toán). Nếu dùng cách truyền thống lồng các hàm callback vào nhau, code sẽ trở thành Callback Hell (Pyramid of Doom), khó bảo trì và dễ sinh lỗi.

Phân tích bản chất

Cả hai phương thức đều dùng để xóa các phần tử HTML khỏi trang web, nhưng cách thức hoạt động và ảnh hưởng đến DOM cũng như bộ nhớ hoàn toàn khác nhau:

Phân tích bản chất

Khi bạn thực hiện thao tác thay đổi DOM (như .append(), .html(), .css()) bên trong một vòng lặp, trình duyệt phải liên tục thực hiện các quá trình Reflow (tính toán lại bố cục) và Repaint (vẽ lại giao diện) cho mỗi lần lặp. Thao tác này cực kỳ tốn chi phí phần cứng và làm đơ giao diện người dùng (UI Blocking).