Sự khác biệt khi sử dụng jQuery và JavaScript thuần

Như mọi người đã biết, jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more – Viết ít hơn, làm nhiều hơn. jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax.

Trong bài viết này, mình sẽ chi ra sự khác biệt khi sử dụng jQuery và JavaScript thuần.

Một số ví dụ giữa việc sử dụng jQuery và JavaScript thuần

Select 1 phần tử Sử dụng jQuery

// Lấy theo ID
$('#myElement');
// Lấy theo Class
$('.myElement');
// Lấy theo tag
$('div');
Code language: JavaScript (javascript)

và một số hàm khác như closest(), find(), children(), parent(),… Sử dụng Javascript thuần

// Lấy theo ID
document.querySelector('#myElement');
// Lấy theo Class
document.querySelectorAll('.myElement');
// Lấy theo tag
document.querySelectorAll('div');
Code language: JavaScript (javascript)

Sự kiện Sử dụng jQuery

$(document).ready(function() {
    console.log('I am handsome!');
});
Code language: JavaScript (javascript)

hay đối với sự kiện click

$('#myElement').on('click', function() {
    console.log('I am handsome!');
});
Code language: JavaScript (javascript)

Sử dụng Javascript thuần

document.addEventListener('DOMContentLoaded', function () {
    console.log('I am handsome!');
});
Code language: JavaScript (javascript)

hay đối với sự kiện click

document.querySelector('#myElement').addEventListener('click', function() {
    console.log('I am handsome!');
});
Code language: JavaScript (javascript)

Xử lý ẩn hay hiện Sử dụng jQuery

// Ẩn 1 phần tử
$('.myElement').hide();
// Hiện 1 phần tử
$('.myElement').show();
Code language: JavaScript (javascript)

Sử dụng Javascript thuần

// Ẩn 1 phần tử
document.querySelectorAll('.myElement').style.display = 'none';
// Hiện 1 phần tử
document.querySelectorAll('.myElement').style.display = 'block';
Code language: JavaScript (javascript)

Như chúng ta thấy, đối với các sự kiện đơn giản thì việc sử dụng jQuery hay Javascript thuần cũng không khác nhau nhiều. Nhưng đối với một vài trường hợp sau đây, jQuery có thể giúp chúng ta tối ưu code hơn rất nhiều.

Hiệu ứng fade in, fade out Sử dụng jQuery

$('.myElement').fadeIn();
$('.myElement').fadeOut();
Code language: JavaScript (javascript)

Sử dụng Javascript thuần

function fadeIn(element) {
  element.style.opacity = 0;
  var last = +new Date();
  var tick = function() {
    element.style.opacity = +element.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    if (+element.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}
fadeIn(document.querySelector('#myElement'));
Code language: JavaScript (javascript)

Đối với việc fade in, fade out một đối tượng, jQuery chỉ cần sử dụng một dòng code để thực thi, trong khi đó Javascript thuần phải cần viết một hàm dài hơn rất nhiều. Ngoài ra chúng ta có thể dễ dàng thiết lập tốc độ cho các hiệu ứng khi sử dụng jQuery như sau

$('.myElement').fadeIn('slow');
$('.myElement').fadeIn('fast');
$('.myElement').fadeIn(500);
Code language: JavaScript (javascript)

hay đối với một thứ rất được nhiều người sử dụng là AJAX AJAX Sử dụng jQuery

$.get( 'ajax/test.html', function( data ) {
    $('.myElement').html( data );
    alert( "Load was performed." );
});
Code language: JavaScript (javascript)

Sử dụng Javascript thuần

var request = new XMLHttpRequest();
request.open('GET', 'ajax/test.html', true);
request.onload = function (e) {
    if (request.readyState === 4) {
        alert( "Load was performed." );
        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};
Code language: JavaScript (javascript)

Trên đây là các ví dụ để cho thấy các lợi ích mà jQuery mang lại, nhưng bên cạnh đó luôn tồn tại các “điểm trừ” của nó, và phần tiếp theo mình sẽ nói về một số nhược điểm khi sử dụng jQuery.

Các nhược điểm của jQuery

Ảnh hưởng đến việc nhận thức

Điều này dễ thấy khi chúng ta bắt đầu sử dụng một framework khi chưa nắm rõ bản chất, quá trình thực thi của nó. Framework cung cấp cho chúng ta các phương thức để lập trình một cách dễ dàng thì jQuery cũng vậy.

Một trình tự đúng sẽ là: Javascript > Web API > jQuery. Nhưng nhiều người tiếp xúc ngay với jQuery và không hiểu về bản chất các vấn dề đằng sau nó. Điều này sẽ không tốt cho sự phát triển về mặt chuyên môn.

Phải import thư viện khi sử dụng

Bạn không thể chỉ lấy một phần jQuery cho những gì bạn cần. Bạn buộc phải import toàn bộ thư viện với kích thước tối thiểu khoảng gần 300KB hoặc sử dụng thư viện đã minified có kích thước khoảng 30KB. Bạn nghĩ đây có phải là vấn đề lớn không.

Hãy thử tưởng tượng, trong một ngày đẹp trời website của bạn đón nhận 1 triệu request, lượng tải jQuery sẽ tương đương 30GB. Đó là còn chưa kể bạn có thể sẽ sử dụng thêm hàng tá các plugin đi kèm. Sẽ có bạn thay thế bằng việc sử dụng CDN nhưng điều đó chỉ giảm tải cho server chứ không giúp tốc độ tải trang nhanh hơn.

Tốc độ xử lý

Về bản chất, jQuery viết các hàm xử lý bao ngoài JavaScript để thân thiện hơn với người dùng, việc này đương nhiên sẽ làm cho tốc độ xử lý chậm hơn. Hãy thử một vài test để xem chậm hơn thế nào:

// jQuery 2.0
var c = $("#comments .comment"); // 4,649 ms
// jQuery 2.0
var c = $(".comment"); // 3,437 ms
// native querySelectorAll
var c = document.querySelectorAll("#comments .comment"); // 1,362 ms
// native querySelectorAll
var c = document.querySelectorAll(".comment"); // 1,168 ms
// native getElementById / getElementsByClassName
var n = document.getElementById("comments");
var c = n.getElementsByClassName("comment"); //107 ms
// native getElementsByClassName
var c = document.getElementsByClassName("comment"); //75 ms
Code language: JavaScript (javascript)

Kết luận

Bài viết đã đưa ra các ưu điểm cũng như khuyết điểm của thư viện jQuery. Hi vọng các bạn khi sử dụng JavaScript có thể tuỳ mục đích của mình mà lựa chọn thư viện JavaScript phù hợp.

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.