NỘI DUNG BÀI VIẾT
Khái niệm jQuery là gì?
jQuery là gì? jQuery là một thư viện được xây dựng hoàn toàn từ JavaScript nhằm giúp cho lập trình viên có thể xây dựng được các chức năng trên JavaScript và sử dụng dễ dàng hơn.
jQuery hiện nay còn được tích hợp nhiều module khác nhau từ module hiệu ứng cho đến module truy vấn selector. Do vậy, nhiều người không còn xa lạ với khái niệm jQuery là gì bởi nó vẫn được sử dụng trong rất nhiều website hiện nay, đặc biệt là những trang web lớn (ngoại trừ những website đang sử dụng JavaScript Framework).
Lịch sử hình thành của jQuery
jQuery chính thức được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC. Hiện nay, nó vẫn được đang được duy trì và phát triển mạnh mẽ bởi một nhóm các nhà phát triển của Google và đứng đầu chính là ông Timmy Wilson. Vì thế, jQuery ngày càng được sử dụng rộng rãi đặc biệt là trên các trang web nổi tiếng.
Các module chính của jQuery
jQuery có các module chính bao gồm như sau:
- Ajax – xử lý Ajax
- Atributes – Giúp xử lý các thuộc tính của đối tượng HTML
- Effect – module có chức năng xử lý hiệu ứng
- Event – có chức năng xử lý sự kiện
- Form -module xử lý sự kiện liên quan tới form
- DOM – xử lý Data Object Model
- Selector – module giúp xử lý luồng lách giữa các đối tượng HTML
Một số tính năng quan trọng của jQuery
Hiện nay, jQuery đang là bộ công cụ JavaScript được thiết kế với mục đích đơn giản hóa các tác vụ khác nhau bằng cách viết ít code hơn. Vì thế, jQuery sở hữu những tính năng quan trọng sau:
- Thao tác DOM − jQuery giúp người dùng dễ dàng lựa chọn được các phần tử DOM để traverse (duyệt) như việc bạn sử dụng CSS. Đồng thời, jQuery còn có chức năng chỉnh sửa nội dung của chúng bởi cách sử dụng phương tiện Selector mã nguồn mở mà được gọi là Sizzle.
- Xử lý sự kiện − Ngoài thao tác DOM, jQuery còn giúp tương tác với người dùng tốt hơn bằng khả năng xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với các Event Handler.
- Hỗ trợ AJAX − jQuery sẽ giúp bạn có cơ hội để phát triển một site giàu tính năng và những phản hồi tích cực nhờ việc sử dụng công nghệ AJAX.
- Hiệu ứng động − jQuery thường đi kèm với rất nhiều các hiệu ứng động đẹp mà người dùng có thể sử dụng trực tiếp cho các website của mình.
- Sự gọn nhẹ − jQuery được xem là thư viện vô cùng gọn nhẹ với kích thước nằm trong khoảng 19KB (gzipped).
Ngoài ra, nhờ được hỗ trợ hầu hết bởi các trình duyệt hiện đại, jQuery luôn làm việc tốt trên các ứng dụng như IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+. Do vậy, việc người dùng tìm hiểu jQuery là gì cũng trở nên đơn giản và dễ dàng hơn nhờ những tính năng này.
Hướng dẫn cách sử dụng jQuery
jQuery hiện nay có hai cách sử dụng phổ biến, các bạn có thể tham khảo sau đây:
- Cài đặt cục bộ – với cách này, các bạn có thể tải jQuery Library về máy của bạn và đưa nó vào trong code của HTML.
- Sử dụng từ CDN (CDN Based Version) − Tương tự như cách cài đặt cục bộ, các bạn có thể đưa thư viện jQuery vào trong code HTML một cách trực tiếp từ Content Delivery Network (CDN).
jQuery có còn cần thiết trong năm 2021?
Thực tế thì jQuery đã dần trở nên tàn lụi khi mà các trình duyệt ngày càng trở nên hoàn thiện và có thể làm tốt những tính năng mà jQuery đã từng làm, các ứng dụng web và mobile thì ngày càng trở nên phức tạp với các yêu cầu mà sử dụng jQuery không còn cần thiết và phù hợp nữa.
Các tính năng của jQuery đã được các trình duyệt đồng nhất và xử lý tốt hơn
DOM selector của jQuery có thể được thay bằng document.querySelector hoặc querySelectorAll, với CSS selector theo class, id… tương tự.
$.ajax có thể được thay bằng fetch hoặc axios jQuery event listener có thể được thay bằng event listener của browser hoặc event handling của các framework JS hiện đại.
Các tính năng của jQuery không còn cần thiết nếu sử dụng các framework JS như React, Vue, Angular
Nếu bạn đang sử dụng 1 trong các frameworks này, chắc hẳn việc select DOM elements và xử lý show/hide, edit class, attributes, add event listener sẽ không còn cần thiết nữa.
Với React, Vue hay Angular, các frameworks này đều cung cấp các template engine rất mạnh. Event và data sẽ được gắn trực tiếp vào DOM element trong template.
Data và event luôn được đồng bộ giữa code và view, nhờ cơ chế watch của framework, khi data thay đổi thì view sẽ được tự động cập nhật mà không cần thêm bất kì code xử lý nào.
Class của DOM Element lúc này được tách khỏi business logic và chỉ đóng vai trò style CSS. Giảm thiểu vấn đề code bị lỗi khi thay đổi cấu trúc HTML.
So sánh thực tế use case sử dụng jQuery và các giải pháp khác
Hãy thử tưởng tượng, bạn cần code 1 login form, sau khi xong form Html và CSS, bạn set ID cho user name input và password input. Form login của bạn có 1 button Login, bạn dùng jQuery để add event khi click button Login thì sẽ gọi đến hàm Login.
Trong code xử lý login, bạn dùng jQuery $(“#userNameInput”).val(), $(“passwordInput”).val() để lấy username và password mà user đã nhập vào form. Tiếp theo bạn validate username và password nhập vào có đúng format, có bị để trống không…
Cuối cùng bạn gọi $.ajax và truyền username và password vào 1 object để gửi lên server. Từ đây server sẽ xử lý tiếp và trả về response user có hợp lệ không.
Nghe qua thì có vẻ rất đơn giản và dễ dàng, nhưng nếu thay vì form login chỉ có 2 trường input là username và password, có thể có thêm checkbox Remember Me…
Trong những trường hợp và bài toán khác, ta có thể có 1 form nhập dữ liệu từ 20 đến 50 trường. Vậy thì nếu chỉ dùng jQuery thì sẽ gặp những vấn đề gì?
Vấn đề khi sử dụng jQuery
Tạo HTML Form Input
Vấn đề
Nếu tất cả đều là text input, bạn sẽ phải lặp lại phần code html cho mỗi input 20 đến 50 lần. Nhưng trong thực tế, 20-50 inputs này sẽ có đủ thể loại từ text, select dropdown, checkbox, radio, date-picker…
Lúc này, 1 coder tay to rất có thể sẽ viết Html cho cả 20-50 inputs này, set ID cho từng input để phục vụ cho các xử lý logic.
Giải pháp
Với các framework JS như React, Vue, Angular, bạn có thể tách các input type khác nhau thành các component như TextInput, SelectInput, CheckboxInput…
Tiếp theo, define 1 json array chứa metadata (input type, validation rules, api url để load data…) của toàn bộ inputs trong form, và với code html thì dùng syntax for loop của framework, map type của input metadata với input component để render toàn bộ list inputs.
Xử lý logic cho từng Input trong Form
Vấn đề
Mỗi inputs có thể có 1 rule validation khác nhau. Với input type là select box, thì list options cho mỗi input sẽ khác nhau, có thể là 1 list có sẵn, hoặc load từ api…
1 số inputs lại có logic ẩn, hiện tuỳ thuộc vào dữ liệu của các input khác. Nếu chỉ đơn thuần dùng jQuery, ta sẽ phải define logic cho từng input trong form theo selector.
Giải pháp
Nhờ vào tính năng tự động binding data và event giữa tầng logic và view, ở phần khởi tạo form html inputs, trong vòng lặp for để render inputs, bạn có thể thiết lập event cho input mà ko cần dùng class hoặc id, event này cũng được gắn sẵn metadata của từng input để bạn có thể tham chiếu và xử lý.
Submit dữ liệu từ Form lên Server
Vấn đề
Với code xử lý thuần bằng jQuery, bạn sẽ phải get value của từng input trong form, tạo JSON object từ value của các inputs và submit lên server.
Giải pháp
Nếu bạn đã define được JSON structure ở bước khởi tạo form, toàn bộ value của input sẽ được tự động đồng bộ với property chứa value của input object. Lúc này bạn chỉ cần submit object này lên server mà không cần phải dùng jQuery selector để lấy dữ liệu của từng input trong form.
Kết luận
Qua use case ở trên, có thể thấy rằng, với những trường hợp UI đơn giản và logic xử lý ở client không nhiều, thì việc sử dụng jQuery rất đơn giản, thuận tiện, giúp rút ngắn thời gian code.
Nhưng khi UI và logic xử lý ở client trở nên phức tạp, nếu chỉ sử dụng jQuery thì sẽ không đáp ứng được yêu cầu của các bài toán phức tạp, số lượng code sẽ tăng lên và khó quản lý code.
Lúc này việc sử dụng các framework JavaScript để chia nhỏ HTML thành các reusable components, đồng bộ event và data.
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
