Ngày không jQuery

Trước khi đến với bài viết mời bà con cô bác thưởng thức tuyệt phẩm Ngày không em

Như mọi người đã biết, jQuery là một thư viện javascript rất phổ biến, nó phổ biến đến mức một số bạn bè mình quen viết jQuery mà không biết gì về javascript.

Có thể nói jQuery giống như một cô nàng hiểu tâm lý và rất biết chiều chuộng khách, khách cần gì là có đó ngay, đi từ A tới Z luôn.
Tuy nhiên cái gì cũng có hai mặt của nó, những mặt chưa được mình sẽ nói ở cuối bài. Bài viết này cũng không nhằm mục đích khuyên các bạn chia tay với cô nàng jQuery, nhưng hãy thử một ngày xa nàng xem sao, biết đâu bạn nhận ra rằng cuộc sống độc thân tuyệt vời biết bao.

Một số ví dụ no-jQuery

1. Lắng nghe sự kiện

Nhiều developer có thói quen bao toàn bộ code js bởi $(document).ready():

$( document ).ready(function() {
    console.log( "ready!" );
});

Và thuần JavaScript thì có thể như sau:

document.addEventListener('DOMContentLoaded', function () {
    console.log( "ready!" );
});

Với một sự kiện click thì sao? Người dùng jQuery sẽ code như sau:

$(someElement).on('click', function() {
    // TODO event handler logic
});

Và khi không sử dụng jQuery:

someElement.addEventListener('click', function() {
    // TODO event handler logic
});

Cũng không đến nỗi tồi ha.

2. Select các phần tử

Để select các phần tử, jQuery cho phép code rất ngắn gọn:

// By ID
$('#myElement');
// By Class name
$('.myElement');
// By tag name
$('div');
// Children
$('#myParent').children();
// Complex selecting
$('article#first p.summary');

Với JavaScript thì sẽ dài dòng như chút:

// By ID
document.querySelector('#myElement');
// By Class name
document.querySelectorAll('.myElement');
// By tag name
document.querySelectorAll('div');
// Children
document.querySelector('#myElement').children;
// Complex selecting
document.querySelectorAll('article#first p.summary');

3. Sử dụng AJAX

Sử dụng jQuery quá nhanh gọn:

$.get( "ajax/test.html", function( data ) {
    $( ".result" ).html( data );
    alert( "Load was performed." );
});

Và khi không sử dụng jQuery:

var request = new XMLHttpRequest();
request.open('GET', 'ajax/test.html', true);
request.onload = function (e) {
    if (request.readyState === 4) {
        // Check if the get was successful.
        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};

4. Thêm bớt class

jQuery cung cấp 2 phương thức thêm class (addClass), bớt class (removeClass) và vì rất biết cách chiều chuộng nên bonus thêm đảo class (toogleClass):

// Adding a class
$('#foo').addClass('bold');
// Removing a class
$('#foo').removeClass('bold');

Ta phải làm thủ cộng khá nhiều với JavaScript thuần:

// Adding a class
document.getElementById('foo').className += 'bold';
// Removing a class
document.getElementById('foo').className = document.getElementById('foo').className.replace(/^bold$/, ');

5. Hiệu ứng fadeIn

Đây là một trong những bí kíp khiến người dùng vừa gặp đã kết nổ đĩa, đặc biệt là những anh em trai tơ, thích mới lạ, lung linh:

$(el).fadeIn();

Chỉ 1 dòng code ngắn ngủi cũng đủ làm thỏa mãn "nhu cầu chính đáng" của các zai.

Nếu tự sướng ở nhà bằng JavaScript thì thế này đây:

function fadeIn(el) {
  el.style.opacity = 0;
  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}
fadeIn(el);

Cũng sướng như mất thời gian hơn xíu.

6. Ẩn hiện phần tử

Có jQuery:

// Hiding element
$(el).hide();
// Showing element
$(el).show();

Không jQuery:

// Hiding element
el.style.display = 'none';
// Showing element
el.style.display = 'block';

7. Điều khiển DOM

Hãy thử với việc chèn thẻ

vào phần tử #container:

$("#container").append("<p>more content</p>");

Với JavaScript cũng không quá mát công:

document.getElementById("container").innerHTML += "<p>more content</p>";

Ngon nhưng mà nó "dễ dãi quá", có vấn đề gì không nhỉ?

Có đó...

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

Như mình đã đề cập ở đầu bài viết, mình biết khá nhiều người sử dụng jQuery nhưng không biết về JavaScript. Điều gì đã xảy ra?
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.
Hãy lưu ý vấn đề này.

2. Phải import thư viện

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 1 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.
Có thẻ đây không phải là vấn đề lớn lắm. Hãy tiếp tục với các vấn đề sau.

3. 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

=> Chậm hơn gần 50 lần luôn, đáng để suy nghĩ đây.

Ngoài ra, còn có hẳn 1 website để giúp bạn tìm kiếm những đoạn code thay thế jQuery. Nếu cần bạn có thể truy cập: youmightnotneedjquery.com.

Mình xin khẳng định lại là bài viết này không có ý định khuyên bạn từ bỏ jQuery, cũng không phủ định sự tuyệt vời của jQuery. Chỉ đơn giản là bổ sung thêm chút thông tin để giúp lựa chọn của các bạn thêm chính xác.

Happy coding!