Chia tay với Jquery để yêu JavaScript thuần. Làm sao cho dễ nhỉ?

Tram Ho

Chào các bạn,

Người ta thường bảo “Hãy yêu lập trình viên bởi họ rất chung tình”, nhưng đấy là trong cuộc sống tình trường mà thôi!

Đối với mình, một lập trình viên phải mang tiếng “gã trai tồi đào hoa” trong chính công việc của mình. Ta không thể cứ yêu mãi một cách code, một framework, một thư viện, một design pattern… và ở đâu cũng muốn gắn bản thân với chúng được. Thậm chí đôi khi, ta cần phải có một cái đầu lạnh để thay đổi liên tục cách ta thực hiện công việc của mình nhằm có thể đạt được sự “viên mãn” và đưa mọi thứ “lên đỉnh” theo cách tinh tế, thông minh nhất…

Quay lại với tựa đề bài viết, mình tin Jquery vẫn là một thư viện tốt và hữu dụng trong thực tế. Song, với sự phát triển nhanh chóng của các trình duyệt hiện đại đang dần hỗ trợ mạnh mẽ ES6, cùng với đó là tốc độ phát triển vô cùng nhanh của Javascript, Jquery dần để lộ ra nhiều yếu điểm của chính nó: xa rời với các frameworks React – Vue – Angular, đi sau so với tốc độ phát triển của Javascript, mất công cài đặt thêm trong các dự án, xuất hiện nhiều lỗi,… Mình cá là sẽ có nhiều bạn đồng tình với mình về vụ này, bạn có thể tìm kiếm thử trên Stackoverflow, kết quả ta nhận được về các vấn đề liên quan tới Jquery lên tới trên con số 1 triệu.

Liệu mình đã lay động được trái tim của các bạn để bỏ Jquery và tiến tới Javascript thuần chưa nhỉ?  Nếu bạn vẫn e ngại không biết nên “chia tay” Jquery, và “tán đổ” cô nàng Javascipt như nào thật nhanh – Fuckboi chính hiệu – thì hãy cùng mình xem qua các tình huống dưới đây nhé.

1. Lựa chọn các thành phần

Đây chắc hẳn là công việc cơ bản và quan trọng nhất trong Jquery khi ta cần thao tác với DOM. Tương đương với $() hay jQuery() chính là 2 hàm querySelector()querySelectorAll(). Ta có thể dễ dàng code như sau nha:

2. Thực hiện chức năng trên toàn bộ thành phần được chọn

querySelectorAll() trả cho chúng ta một mảng các NodeList. Khác với jQuery ta chỉ cần đơn giản gọi hàm qua đối tượng jQuery, với Javascript ta sẽ cần phải duyệt qua toàn bộ mảng NodeList được lấy ra với NodeList.foreach(). Thôi không sao, “tán gái” cũng có lúc khó mà

3. Tìm một thành phần bên trong thành phần khác

jQuery cung cấp cho chúng ta hàm find() để có thể tìm kiếm thành phần nào đó bên trong 1 thằng khác. Cá nhân mình với tình huống này thì mình thích Javascript hơn, vì đơn giản là ta vẫn sử dụng lại hàm querySelector()querySelectorAll() để thực hiện lấy ra thành phần ta muốn.

4. Duyệt cây DOM với một số tình huống thông dụng

Sẽ có nhiều khi bạn cần nhanh chóng duyệt được thành phần trước, kế tiếp hoặc cha của một thành phần có sẵn. jQuery có các hàm quen thuộc là parent(), next()prev(). Chẳng hề kém cạnh, Javascript cũng cho chúng ta trực tiếp 3 thuộc tính của 1 thành phần, đó là parentElement, nextElementSiblingpreviousElementSibling. Xời, tưởng gì

5. Làm việc với các sự kiện

jQuery có cả tá các hàm để đính một sự kiện cụ thể vào thành phần của chúng ta. Còn với JS, hãy xem sức mạnh của hàm addEventListener() nhé:

6. Thêm sự kiện cần lắng nghe vào thành phần

Hàm on() trong jQuery là cách ta thêm các sự kiện động vào thành phần của mình, một lần với tình huống này, ta sẽ lại gặp hàm addEventListener() quen thuộc của “cô nàng” Javascript.

7. Kích hoạt hoặc khởi chạy sự kiện

Tương đương với hàm trigger của jQuery và hàm dispatchEvent() từ phía JS, hàm này có thể được gọi ở bất cứ thành phần nào và sẽ nhận đầu vào là một đối tượng Event. Vụ này có vẻ hơi “căng” à nha

8. Styling cho thành phần

Mình đã thử tìm từ “styling” trong tiếng Việt và thấy nó thật củ chuối…

Để style thành phần, tương tự với hàm css trong jQuery là thuộc tính .style trong JS

Ngoài ra, đối với hàm css() ta có thể truyền một đối tượng chứa các thuộc tính cần style. Trong khi đó để thực hiện style nhiều thuộc tính trong Javascript, ta cần thay đổi từng thuộc tính còn của .style trong thành phần đó.

9. Sự kiện Document ready

Có rất nhiều khi ta cần thực thi sự kiện khi toàn bộ trang/DOM đã được tải xong, đối với jQuery ta đơn giản sử dụng hàm $(document).ready() hoặc ta có thể ngắn gọn hơn với đối tượng $(). Đối với Javascript, ta sẽ cần một chút công sức để viết ra một hàm thực thi việc này, cơ mà không sao, chỉ là một chút khó khăn nữa khi “tán gái” thui đúng không anh em

10. Làm việc với CSS Classes

Để thao tác với CSS Classes trong Javascript, ta sẽ cần thông qua thuộc tính classList của thành phần

Ta cũng có thể thực thi với hàng loạt classes như sau

Hay thậm chí thay đổi class, Javascript quả thực chẳng thiếu gì đâu nhé!

11. Kiểm tra thành phần có class hay không?

Chà, theo mình thấy thì quả thực jQuery đúng là ngắn gọn hơn JS nhiều, bảo sao nhiều người ưa thích nó. Nhưng mà mất khoản này thì ta được nhiều khoản khác thôi nha.

jQuery thì có sẵn hàm hasClass() trong khi với Javascript, ta sẽ cần mất công hơn một chút:

12. Gọi các HTTP Requests

Đây chắc chắn là một chức năng vô cùng quan trọng trong bất cứ dự án Front-end nào. Có thể các bạn đã quá thân quen với jQuery AJAX, nhưng đừng lo, với Javascript chúng ta đã có Fetch API vô cùng mạnh mẽ và dễ dàng sử dụng. Fetch sẽ trả cho chúng ta 1 Promise để ta có thể xử lý kết quả thật nhanh gọn. Đừng lo nữa nha những anh em, đồng chí của tôi…

13. Cập nhật DOM

Đơn giản nhất là thay đổi nội dung chữ bên trong thành phần, nhưng các bạn cẩn thận khi thực hiện việc này nhé, vì Hacker có thể lợi dụng nó để thực hiện tấn công XSS đó. Nhưng yên tâm, nếu bạn muốn giải quyết vấn đề này, hãy thử đọc thêm tại đây nhé!

Ta có thể dễ dàng cập nhật nội dung trong DOM với cô nàng JS bằng cách sử dụng thuộc tính .textContent.

Nâng cao hơn, đó chính là việc thay đổi các thành phần bên trong thành phần đã có. Ta sẽ thực hiện như sau:

Gộp lại thì ta sẽ có một cái ví dụ “full topping” như sau ạ:

Vẫn là chào các bạn, nhưng chào tạm biệt

Thế là mình đã chỉ cho các bạn 13 bí kíp “tán đổ cô nàng” Javascript… Còn giờ mình sẽ cho bạn thời gian suy ngẫm xem bạn có dám mạnh mẽ nói lời “chia tay” với jQuery hay không nhé!

Mình rất mong mình đã mang cho các bạn những kiến thức hay, cảm ơn các bạn đã đọc tới dòng cuối cùng của bài viết này, mình rất trân trọng tình cảm của mọi người dành cho mình. Chào tạm biệt các bạn và hẹn gặp lại trong những bài viết sau nhé! Peaceeeee…


Nguồn tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo