Sự khác biệt khi sử dụng JQuery và Javascript thuần.

: Blogs; Blogs công nghệ

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.

Một số ví dụ giữa việc sử dụng jQuery và sử dụng 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');

// Lấy theo ID

$ ( '#myElement' ) ;

// Lấy theo Class

$ ( '.myElement' ) ;

// Lấy theo tag

$ ( 'div' ) ;

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');

// Lấy theo ID

document . querySelector ( '#myElement' ) ;

// Lấy theo Class

document . querySelectorAll ( '.myElement' ) ;

// Lấy theo tag

document . querySelectorAll ( 'div' ) ;

Sự kiện

Sử dụng jQuery

$(document).ready(function() {
    console.log('I am handsome!');
});

$ ( document ) . ready ( function ( ) {

console . log ( 'I am handsome!' ) ;

} ) ;

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

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

$ ( '#myElement' ) . on ( 'click' , function ( ) {

console . log ( 'I am handsome!' ) ;

} ) ;

Sử dụng Javascript thuần

document.addEventListener('DOMContentLoaded', function () {
    console.log('I am handsome!');
});

document . addEventListener ( 'DOMContentLoaded' , function ( ) {

console . log ( 'I am handsome!' ) ;

} ) ;

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

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

document . querySelector ( '#myElement' ) . addEventListener ( 'click' , function ( ) {

console . log ( 'I am handsome!' ) ;

} ) ;

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();

// Ẩn 1 phần tử

$ ( '.myElement' ) . hide ( ) ;

// Hiện 1 phần tử

$ ( '.myElement' ) . show ( ) ;

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';

// Ẩn 1 phần tử

document . querySelectorAll ( '.myElement' ) . style . display = 'none' ;

// Hiện 1 phần tử

document . querySelectorAll ( '.myElement' ) . style . display = 'block' ;

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();

$ ( '.myElement' ) . fadeIn ( ) ;

$ ( '.myElement' ) . fadeOut ( ) ;

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'));

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' ) ) ;

Đố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);

$ ( '.myElement' ) . fadeIn ( 'slow' ) ;

$ ( '.myElement' ) . fadeIn ( 'fast' ) ;

$ ( '.myElement' ) . fadeIn ( 500 ) ;

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." );
});

$ . get ( 'ajax/test.html' , function ( data ) {

$ ( '.myElement' ) . html ( data ) ;

alert ( "Load was performed." ) ;

} ) ;

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);
        }
    }
};

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 ) ;

}

} ;

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

// 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

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.

Viblo

Có thể bạn quan tâm:

DVMS chuyên:

* Viết ứng dụng cho smartphone và máy tính bảng: iPhone, iPad , Android, Tablet, Windows Phone, Blackberry, Uber app, Grab app, mạng xã hội, vận tải thông minh, thực tế ảo, game mobile,...
* Viết ứng dụng tìm và đặt xe, các hệ thống theo mô hình kinh tế chia sẻ, uber for x, ứng dụng giúp việc,...
* Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
* Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup, ...

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>