NỘI DUNG BÀI VIẾT
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
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():
$(document).ready(function() {
console.log('Ready')
})
// hoặc
$(function () {
console.log('Ready')
})
Code language: JavaScript (javascript)Với vanilla JS, bạn có thể dùng window.onload.
window.onload = function () {
console.log('Ready!')
}
Code language: JavaScript (javascript)Đ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
// Chọn bằng ID
$('#myElement')
// Chọn bằng CSS class
$('.myElement')
// Chọn bằng tên thẻ
$('div')
// Phức tạp hơn
$('article#first p.summary')
Code language: JavaScript (javascript)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+:
// Chọn bằng ID
document.getElementById('myElement')
document.querySelector('#myElement')
// Chọn bằng CSS class
document.getElementsByClassName('myElement')
document.querySelectorAll('.myElement')
// By tag name
document.getElementsByTagName('div')
document.querySelectorAll('div')
// Phức tạp hơn
document.querySelectorAll('article#first p.summary')
Code language: JavaScript (javascript)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.
$(someElement).on('click', function(e) {
// TODO event handler logic
})
Code language: JavaScript (javascript)Với vanilla JS, chúng ta phải dùng phương thức addEventListener dài dòng hơn.
someElement.addEventListener('click', function(e) {
// TODO event handler logic
})
Code language: JavaScript (javascript)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.
someElement.addEventListener('click', function(e) {
// TODO event handler logic
}, { once: true });
Code language: JavaScript (javascript)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.
function getDataFromApi() {
const defer = $.Deferred()
MyApiService.call({
onSuccess(result) {
defer.resolve(result)
},
onError(err) {
defer.reject(err)
}
})
return defer.promise()
}
Code language: JavaScript (javascript)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.
function getDataFromApi() {
return new Promise((resolve, reject) => {
MyApiService.call({
onSuccess: resolve,
onError: reject
})
})
}
Code language: JavaScript (javascript)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().
$.get('ajax/test.html', function(data) {
$('.result').html(data)
alert('Load was performed.')
})
Code language: JavaScript (javascript)Với vanilla JS, bạn có thể dùng API mới: fetch
fetch('ajax/test.html')
.then(function(data) {
$('.result').html(data)
alert('Load was performed.')
})
.catch(function(err) {
console.error(err)
})
Code language: JavaScript (javascript)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.
const $foo = $('#foo')
$foo.addClass('bold')
$foo.hasClass('bold') // true
$foo.toggleClass('bold') // $foo.hasClass('bold') === false
$foo.removeClass('bold')
Code language: PHP (php)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.
// <div id="foo" class="text"></div>
const foo = document.getElementById('foo')
foo.classList.add('bold', 'italic') // class="text bold italic"
foo.classList.contains('bold') // true
foo.classList.toggle('bold') // class="text italic"
foo.classList.replace('text', 'new-text') // class="new-text italic"
foo.classList.remove('new-text') // class="italic"
Code language: JavaScript (javascript)Xem thêm về classList.
Animation
jQuery hỗ trợ các hiệu ứng fadeIn/fadeOut/slideUp/slideDown… theo mặc định.
$(el).fadeIn()
Code language: JavaScript (javascript)Với sự hỗ trợ của CSS animation, chúng ta có thể đạt được hiệu quả tương tự.
@keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
.fadeIn {
animation: fadeIn ease-in 1s;
}
Code language: CSS (css)document.getElementById('el').classList.add('fadeIn')
Code language: JavaScript (javascript)Bạn cũng có thể dùng sẵn thư viện animate.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ùng velocity.js, anime.js, Popmotion hay GreenSock. 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:
// Hiding element
$(el).hide()
// Showing element
$(el).show()
Code language: JavaScript (javascript)Với JavaScript, điều này cũng chẳng khó khăn hơn là bao:
// Hiding element
el.style.display = 'none'
// Showing element
el.style.display = 'block'
Code language: JavaScript (javascript)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ử <p> vào #container:
$('#container').append('<p>more content</p>')
Code language: JavaScript (javascript)Vanilla JS cũng có thể làm điều này một cách dễ dàng:
document.getElementById('container').innerHTML += '<p>more content</p>'
Code language: JavaScript (javascript)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, ultradom hay preact.
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: https://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óm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
