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():
1
2
3
4
5
|
$ ( document ) . ready ( function ( ) {
console . log ( "ready!" ) ;
} ) ;
|
Và thuần JavaScript thì có thể như sau:
1
2
3
4
5
|
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:
1
2
3
4
5
|
$ ( someElement ) . on ( 'click' , function ( ) {
// TODO event handler logic
} ) ;
|
Và khi không sử dụng jQuery:
1
2
3
4
5
|
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:
1
2
3
4
5
6
7
8
9
10
11
12
|
// 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:
1
2
3
4
5
6
7
8
9
10
11
12
|
// 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:
1
2
3
4
5
6
|
$ . get ( "ajax/test.html" , function ( data ) {
$ ( ".result" ) . html ( data ) ;
alert ( "Load was performed." ) ;
} ) ;
|
Và khi không sử dụng jQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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):
1
2
3
4
5
6
|
// 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:
1
2
3
4
5
6
|
// 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:
1
2
3
|
$ ( 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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:
1
2
3
4
5
6
|
// Hiding element
$ ( el ) . hide ( ) ;
// Showing element
$ ( el ) . show ( ) ;
|
Không jQuery:
1
2
3
4
5
6
|
// 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:
1
2
3
|
$ ( "#container" ) . append ( "<p>more content</p>" ) ;
|
Với JavaScript cũng không quá mát công:
1
2
3
|
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 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!
- Tăng tốc mysql
- Ứng dụng mobile để marketing và phân phối rượu vang
- Xây dựng một RestFul API đơn giản với python và Flask
- Tất tần tật về promise và ASYNC/AWAIT
- Bỏ lỡ cơ hội có thể tăng doanh số bán hàng lên đến 4 lần
- Hướng dẫn đăng bài viết, tăng SEO, tạo tags, upload hình và file trên Joomla 3.x
- Tại sao lại sử dụng giao tiếp Serial?
- Happy Life - Cuộc sống mạnh khỏe và hạnh phúc hơn
- iOS Design Guidelines (phần 1)
- Ứng dụng mô hình phần mềm SaaS trong môi trường mobility
- Q3/2013: Android chiếm 81% vẫn đứng ở số 1
- Python tiến bước trong bảng xếp hạng các ngôn ngữ lập trình phổ biến
DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứ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,...
Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…
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 >>