NỘI DUNG BÀI VIẾT
- Kiểm tra khi trang được tải xong
- Chọn elements
- Lắng nghe sự kiện
- Promise
- Gửi AJAX requests
- Thao tác trên thuộc tínhclasscủa một element
- Animation
- Ẩn/hiện elements
- Thao tác với DOM
- Kết luận
jQuery đã lỗi thời chưa?
Liệu jQuery đã lỗi thời chưa nhỉ, nên thay thế nó bằng cái khác không?
jQuery là một trong những framework được yêu thích và sử dụng bởi phần lớn lập trình viên front-end. jQuery cung cấp hàm và phương thức giúp đơn giản hóa tác vụ thường gặp trong quá trình viết web. Giờ đây, khi các trình duyệt ngày càng được phát triển và hỗ trợ nhiều tính năng hơn, chúng ta có thể thay thế những tác vụ của jQuery bằng các phương thức mặc định.
Điều này đem đến nhiều lợi ích như:
- Không phụ thuộc vào jQuery, đồng thời người dùng không cần phải download thêm thư viện
- Được trình duyệt tối ưu, có khả năng tăng hiệu suất [dù chỉ là chút xíu]
- Về mặt lâu dài, sử dụng phương thức mặc định của trình duyệt đảm bảo tính tương thích trong ứng dụng, đặc biệt hữu ích phải bảo trì những ứng dụng cũ.
Chính vì thế, mình sẽ giới thiệu cho các bạn một số cách thay thế jQuery bằng JavaScript thuần, hay còn gọi là vanilla JS.
Kiểm tra khi trang được tải xong
Tổng hợp 200+ tài liệu, sách, bài thực hành, video hướng dẫn lập trình từ cơ bản đến nâng cao
Một trang web không thể thao tác an toàn trừ khi document đã sẵn sàng [ready]: các tập tin JS, CSS hay hình ảnh được tải hết, cấu trúc DOM được xây dựng xong. Chính vì vậy, các lập trình viên được khuyến khích đặt toàn bộ code bên trong hàm $[document].ready[] :
Với vanilla JS, bạn có thể dùng window.onload .
Điểm khác biệt giữa window.onload và sự kiện DOMContentLoaded là DOMContentLoaded không chờ đợi các tài nguyên khác như JS, CSS hay hình ảnh được tải, mà sự kiện này được kích hoạt ngay khi cấu trúc DOM được xây dựng xong.
Xem thêm về onload ở MDN.
Hoặc bạn cũng có thể dùng thư viện domready .
Chọn elements
jQuery giúp chúng ta chọn các element trong cây DOM rất dễ dàng
Với vanilla JS, bạn có thể dùng những phương thức sau, hỗ trợ bởi tất cả trình duyệt kể cả IE8+:
Bạn cần lưu ý sự khác nhau giữa document.querySelector[] và document.querySelectorAll[] . querySelectorAll[] sẽ trả về một danh sách NodeList các element phù hợp với điều kiện tìm kiếm, trong khi querySelector chỉ trả về một element duy nhất. Do đó, document.querySelector['div'] sẽ trả về thẻ DIV đầu tiên được tìm thấy, chứ không phải tất cả thẻ DIV trong trang.
Lắng nghe sự kiện
Xử lý sự kiện là một phần rất quan trọng trong JavaScript, và với jQuery bạn có thể lắng nghe sự kiện bằng phương thức .on .
Với vanilla JS, chúng ta phải dùng phương thức addEventListener dài dòng hơn.
Nếu bạn muốn sự kiện chỉ được xử lý một lần, giống như phương thức .one[] của jQuery.
Promise
Bản thân jQuery có đính kèm một lớp Deferred, giúp bạn thực hiện các thao tác bất đồng bộ mà không phải lâm vào callback-hell.
Mặc dù trông có vẻ giống Promise, nhưng Deferred có nhiều phương thức hỗ trợ hơn, chẳng hạn như .always[] , .pipe[] , progress[]
Với vanilla JS, hầu hết các trình duyệt đều đã hỗ trợ Promise theo mặc định.
Gửi AJAX requests
Hầu hết các bạn cũng đều biết, AJAX giúp chúng ta tương tác với server một cách bất đồng bộ. jQuery hỗ trợ gửi AJAX requests bằng $.ajax[] cùng với với các phương thức hỗ trợ như .get[] hay .post[] .
Với vanilla JS, bạn có thể dùng API mới: fetch
Xem thêm về Fetch API.
Thao tác trên thuộc tính class của một element
jQuery có các phương thức addClass[] , hasClass[] , removeClass[] và toggleClass[] để thao tác trên thuộc tính class của một element.
Không cần jQuery, chúng ta vẫn có thể làm điều này dễ dàng với thuộc tính classList của element.
Xem thêm vềclassList.
Animation
jQuery hỗ trợ các hiệu ứng fadeIn/fadeOut/slideUp/slideDown theo mặc định.
Với sự hỗ trợ của CSS animation, chúng ta có thể đạt được hiệu quả tương tự.
Bạn cũng có thể dùng sẵn thư việnanimate.css, cung cấp sẵn các hiệu ứng thông dụng như fading, sliding, bouncing
Đối với các hiệu ứng animation phức tạp khác, bạn có thể dùngvelocity.js,anime.js,PopmotionhayGreenSock. Các thư viện này hứa hẹn đem đến hiệu suất tốt hơn cho $.animate[] .
Ẩn/hiện elements
Ẩn/hiện elements là một trong những tác vụ phổ biến, và jQuery làm điều này trong vòng một nốt nhạc:
Với JavaScript, điều này cũng chẳng khó khăn hơn là bao:
Thao tác với DOM
Thao tác với DOM rất dễ dàng khi sử dụng jQuery. Ví dụ khi bạn muốn chèn thêm một phần tử
vào #container :
more content
']Vanilla JS cũng có thể làm điều này một cách dễ dàng:
more content
'Tuy nhiên bạn cũng có thể nhận thấy cách làm trên hoàn toàn không ổn về lâu dài, vì bất tiện và khó bảo trì. Cách tốt hơn là sử dụng một thư viện virtual DOM nhỏ gọn, chẳng hạn nhưredom,ultradomhaypreact.
Tham khảo: Khoá học Online nền tảng lập trình cho người mới bắt đầu bằng ngôn ngữ JavaScript
Kết luận
jQuery đã lỗi thời chưa? Câu trả lời là hên xui. Nếu dự án của bạn đang dùng một thư viện ngoài phụ thuộc vào jQuery, chẳng hạn như FancyBox, và việc thay đổi có thể đòi hỏi nhiều thời gian để hoàn thành, thì câu trả lời là không nên. Nhưng nếu bạn chọn một thư viện mới thì nên ưu tiên những giải pháp không cần jQuery.
Tặng bạn một mẩu truyện vui lụm trên mạng.
Coi gì đó? Phim heo phải hông?- Hông phải đâu má! Chỉ là- Hmm
Nguồn: //ehkoo.com/bai-viet/co-the-ban-khong-can-jquery
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhómHọc lập trìnhđể thảo luận thêm về các vấn đề cùng quan tâm.
Chia sẻ
- Tweet
Bài viết liên quan
Xem thêm:
- Đệ quy cho người mới bắt đầu
- 10 thủ thuật thú vị và hữu dụng trong JavaScript
- Top 8 JS Framework không làm bạn thất vọng năm 2021