Ngày không jQuery
jQuery
12
Javascript
200
Male avatar

Cận viết ngày 12/07/2016

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!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

Cận

4 bài viết.
23 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
31 12
Mình sưu tầm được của một anh share trên FB về quy trình phát triển phần mềm bất hủ, không sách nào nói đến nhưng thực tế nó vậy: 1. Đầu tiên là t...
Cận viết hơn 1 năm trước
31 12
Male avatar
6 5
Tôi khuyên mọi người nên sử dụng một phiên bản nào đó của Linux, lý do? Đơn giản là tôi thấy đa phần người Việt không mua bản quyền Windows,Việt Na...
Cận viết hơn 1 năm trước
6 5
Male avatar
1 3
Thiết lập Builder Pattern: public class Person {  private String name;  private int age;  private List languages;    public static class Bui...
Cận viết hơn 1 năm trước
1 3
Bài viết liên quan
White
16 9
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
16 9
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
23 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!