Tin về Blockchain
Từ nay chẳng cần jQuery
jQuery là một trong những framework được yêu thích và sử dụng bởi phần lớn lập trình viên front-end. jQuery cung cấp hàm và phương thức giúp đơn giản hóa tác vụ thường gặp trong quá trình viết web. Giờ đây, khi các trình duyệt ngày càng được phát triển và hỗ trợ nhiều tính năng hơn, chúng ta có thể thay thế những tác vụ của jQuery bằng các phương thức mặc định.
Điều này đem đến nhiều lợi ích như:
- Không phụ thuộc vào jQuery, đồng thời người dùng không cần phải download thêm thư viện
- Được trình duyệt tối ưu, có khả năng tăng hiệu suất (dù chỉ là chút xíu)
- Về mặt lâu dài, sử dụng phương thức mặc định của trình duyệt đảm bảo tính tương thích trong ứng dụng, đặc biệt hữu ích phải bảo trì những ứng dụng cũ.
Chính vì thế, bài viết này sẽ giới thiệu cho các bạn một số cách thay thế jQuery bằng JavaScript thuần, hay còn gọi là “vanilla JS”.
Kiểm tra khi trang được tải xong
Một trang web không thể thao tác an toàn trừ khi document đã sẵn sàng (ready): các tập tin JS, CSS hay hình ảnh được tải hết, cấu trúc DOM được xây dựng xong. Chính vì vậy, các lập trình viên được khuyến khích đặt toàn bộ code bên trong hàm $(document).ready():
|
1
2
3
4
5
6
7
8
9
10
|
$ ( document ) . ready ( function ( ) {
console . log ( 'Ready' )
} )
// hoặc
$ ( function ( ) {
console . log ( 'Ready' )
} )
|
Với vanilla JS, bạn có thể dùng window.onload.
|
1
2
3
4
5
6
7
|
window . onload = function ( ) {
console . log ( 'Ready!' )
}
|
Điểm khác biệt giữa window.onload và sự kiện DOMContentLoaded là DOMContentLoaded không chờ đợi các tài nguyên khác như JS, CSS hay hình ảnh được tải, mà sự kiện này được kích hoạt ngay khi cấu trúc DOM được xây dựng xong.
Xem thêm về onload ở MDN.
Hoặc bạn cũng có thể dùng thư viện domready.
Chọn elements
jQuery giúp chúng ta chọn các element trong cây DOM rất dễ dàng
|
1
2
3
4
5
6
7
8
9
10
|
// Chọn bằng ID
$ ( '#myElement' )
// Chọn bằng CSS class
$ ( '.myElement' )
// Chọn bằng tên thẻ
$ ( 'div' )
// Phức tạp hơn
$ ( 'article#first p.summary' )
|
Với vanilla JS, bạn có thể dùng những phương thức sau, hỗ trợ bởi tất cả trình duyệt kể cả IE8+:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// Chọn bằng ID
document . getElementById ( 'myElement' )
document . querySelector ( '#myElement' )
// Chọn bằng CSS class
document . getElementsByClassName ( 'myElement' )
document . querySelectorAll ( '.myElement' )
// By tag name
document . getElementsByTagName ( 'div' )
document . querySelectorAll ( 'div' )
// Phức tạp hơn
document . querySelectorAll ( 'article#first p.summary' )
|
Bạn cần lưu ý sự khác nhau giữa document.querySelector() và document.querySelectorAll(). querySelectorAll() sẽ trả về một danh sách NodeList các element phù hợp với điều kiện tìm kiếm, trong khi querySelector chỉ trả về một element duy nhất. Do đó, document.querySelector('div') sẽ trả về thẻ DIV đầu tiên được tìm thấy, chứ không phải tất cả thẻ DIV trong trang.
Lắng nghe sự kiện
Xử lý sự kiện là một phần rất quan trọng trong JavaScript, và với jQuery bạn có thể lắng nghe sự kiện bằng phương thức .on.
|
1
2
3
4
5
6
7
|
$ ( someElement ) . on ( 'click' , function ( e ) {
// TODO event handler logic
} )
|
Với vanilla JS, chúng ta phải dùng phương thức addEventListener dài dòng hơn.
|
1
2
3
4
5
6
7
|
someElement . addEventListener ( 'click' , function ( e ) {
// TODO event handler logic
} )
|
Nếu bạn muốn sự kiện chỉ được xử lý một lần, giống như phương thức .one() của jQuery.
|
1
2
3
4
5
6
7
|
someElement . addEventListener ( 'click' , function ( e ) {
// TODO event handler logic
} , { once : true } ) ;
|
Promise
Bản thân jQuery có đính kèm một lớp Deferred, giúp bạn thực hiện các thao tác bất đồng bộ mà không phải lâm vào callback-hell.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function getDataFromApi ( ) {
const defer = $ . Deferred ( )
MyApiService . call ( {
onSuccess ( result ) {
defer . resolve ( result )
} ,
onError ( err ) {
defer . reject ( err )
}
} )
return defer . promise ( )
}
|
Mặc dù trông có vẻ giống Promise, nhưng Deferred có nhiều phương thức hỗ trợ hơn, chẳng hạn như .always(), .pipe(), progress()…
Với vanilla JS, hầu hết các trình duyệt đều đã hỗ trợ Promise theo mặc định.
|
1
2
3
4
5
6
7
8
9
10
|
function getDataFromApi ( ) {
return new Promise ( ( resolve , reject ) = > {
MyApiService . call ( {
onSuccess : resolve ,
onError : reject
} )
} )
}
|
Gửi AJAX requests
Hầu hết các bạn cũng đều biết, AJAX giúp chúng ta tương tác với server một cách bất đồng bộ. jQuery hỗ trợ gửi AJAX requests bằng $.ajax() cùng với với các phương thức hỗ trợ như .get() hay .post().
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$ . get ( 'ajax/test.html' , function ( data ) {
$ ( '.result' ) . html ( data )
alert ( 'Load was performed.' )
} )
Vớ i vanilla JS , bạ n có thể dù ng API mớ i : fetch
fetch ( 'ajax/test.html' )
. then ( function ( data ) {
$ ( '.result' ) . html ( data )
alert ( 'Load was performed.' )
} )
. catch ( function ( err ) {
console . error ( err )
} )
|
Xem thêm về Fetch API.
Thao tác trên thuộc tính class của một element
jQuery có các phương thức addClass(), hasClass(), removeClass() và toggleClass() để thao tác trên thuộc tính class của một element.
|
1
2
3
4
5
6
7
8
9
10
11
|
const $ foo = $ ( '#foo' )
$ foo . addClass ( 'bold' )
$ foo . hasClass ( 'bold' ) // true
$ foo . toggleClass ( 'bold' ) // $foo.hasClass('bold') === false
$ foo . removeClass ( 'bold' )
|
Không cần jQuery, chúng ta vẫn có thể làm điều này dễ dàng với thuộc tính classList của element.
|
1
2
3
4
5
6
7
8
9
|
// <div id="foo" class="text"></div>
const foo = document . getElementById ( 'foo' )
foo . classList . add ( 'bold' , 'italic' ) // class="text bold italic"
foo . classList . contains ( 'bold' ) // true
foo . classList . toggle ( 'bold' ) // class="text italic"
foo . classList . replace ( 'text' , 'new-text' ) // class="new-text italic"
foo . classList . remove ( 'new-text' ) // class="italic"
|
Xem thêm về classList.
Animation
jQuery hỗ trợ các hiệu ứng fadeIn/fadeOut/slideUp/slideDown… theo mặc định.
|
1
2
3
|
$ ( el ) . fadeIn ( )
|
Với sự hỗ trợ của CSS animation, chúng ta có thể đạt được hiệu quả tương tự.
|
1
2
3
4
5
6
7
8
9
10
|
@ keyframes fadeIn {
from { opacity : 0 ; }
to { opacity : 1 ; }
}
. fadeIn {
animation : fadeIn ease - in 1s ;
}
document . getElementById ( 'el' ) . classList . add ( 'fadeIn' )
|
Bạn cũng có thể dùng sẵn thư viện animate.css, cung cấp sẵn các hiệu ứng thông dụng như fading, sliding, bouncing…
Đối với các hiệu ứng animation phức tạp khác, bạn có thể dùng velocity.js, anime.js, Popmotion hay GreenSock. Các thư viện này hứa hẹn đem đến hiệu suất tốt hơn cho $.animate().
Ẩn/hiện elements
Ẩn/hiện elements là một trong những tác vụ phổ biến, và jQuery làm điều này trong vòng một nốt nhạc:
|
1
2
3
4
5
6
|
// Hiding element
$ ( el ) . hide ( )
// Showing element
$ ( el ) . show ( )
|
Với Javascript, điều này cũng chẳng khó khăn hơn là bao:
|
1
2
3
4
5
6
|
// Hiding element
el . style . display = 'none'
// Showing element
el . style . display = 'block'
|
Thao tác với DOM
Thao tác với DOM rất dễ dàng khi sử dụng jQuery. Ví dụ khi bạn muốn chèn thêm một phần tử <p> vào #container:
|
1
2
3
|
$ ( '#container' ) . append ( '<p>more content</p>' )
|
Vanilla JS cũng có thể làm điều này một cách dễ dàng:
|
1
2
3
|
document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>'
|
Tuy nhiên bạn cũng có thể nhận thấy cách làm trên hoàn toàn không ổn về lâu dài, vì bất tiện và khó bảo trì. Cách tốt hơn là sử dụng một thư viện virtual DOM nhỏ gọn, chẳng hạn như redom, ultradomhay preact.
Kết luận
Bạn có nên từ bỏ jQuery không? Câu trả lời là… hên xui. Nếu dự án của bạn đang dùng một thư viện ngoài phụ thuộc vào jQuery, chẳng hạn như FancyBox, và việc thay đổi có thể đòi hỏi nhiều thời gian để hoàn thành, thì câu trả lời là không nên. Nhưng nếu bạn chọn một thư viện mới thì nên ưu tiên những giải pháp không cần jQuery.
Có thể bạn chưa biết:
- B2B CLOUD ứng dụng được gì cho ngành nội thất?
- GT và DWT là gì? Nó khác nhau như thế nào?
- Chuỗi cung ứng tối ưu - Chi phí tối thiểu, hiệu quả tối đa
- B2B CLOUD ứng dụng được gì cho lĩnh vực quản lý nhân viên?
- Số nhận dạng tàu biển IMO
- Ảnh hưởng của chuỗi cung ứng lên hiệu quả tài chính
- Tài liệu về hệ thông tin địa lý (GIS – Geographic Information System)
- Giải thích các khiếm khuyết tàu biển chủ yếu
- Khiếu nại và kiện tụng người chuyên chở hàng không
- Bảo hiểm hàng hóa chuyên chở bằng đường biển
- Chiến lược tổng thể cho Logistics Việt Nam
- B2B CLOUD ứng dụng được gì cho việc quản lý cửa hàng?
- Các site tra cứu tàu hội viên của các Hội P&I quốc tế
- Để chạy được hệ thống SCatalog thì chúng tôi cần những gì?
- Vận đơn hàng không (Airwaybill-AWB)
- B2B CLOUD ứng dụng được gì cho lĩnh vực mua bán hàng?
- Một số chữ viết tắt tiếng Anh thường dùng trong Hàng hải
- Để sử dụng SGateway thì tôi cần có gì?
- Chuỗi cung ứng: Vũ khí chiến lược của Apple
- Dịch vụ chuỗi cung ứng tại Việt Nam: Giờ G sắp điểm
- B2B CLOUD ứng dụng được gì cho lĩnh vực hàng gia dụng, văn phòng phẩm, đồ uống...?
- Thuật ngữ hàng hải (Shipping Glossary) "A"
- Chính sách bán hàng như thế nào?
- B2B CLOUD ứng dụng được gì cho lĩnh vực thời trang, may mặc, giày dép...?
- B2B CLOUD ứng dụng được gì cho lĩnh vực vật liệu xây dựng, thiết bị gia đình?
- Các phương thức thuê tầu chuyên chở hàng hoá
- Cách cắt giảm chi phí chuỗi cung ứng
- B2B CLOUD ứng dụng được gì cho lĩnh vực trợ giúp và cứu hộ đường bộ?
- Chiến lược phân phối các nhà bán lẻ
- Cơ sở pháp lý của vận tải hàng không quốc tế
- B2B CLOUD ứng dụng được gì cho việc quảng cáo, PR sản phẩm?
- Logistics điển hình trên thế giới
- B2B CLOUD ứng dụng được gì cho việc đánh giá đại lý, chi nhánh, cửa hàng ?
- Profile / Portfolio là gì? Tại sao lại cần portfolio? Portfolio gồm có những gì?
- B2B CLOUD ứng dụng được gì cho lĩnh vực thực phẩm chức năng, dược phẩm, sữa?
- Khác nhau giữa MAWB và HAWB
- Chuỗi cung ứng năm 2016 sẽ ra sao?
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 >>