Làm thế nào để code jquery một cách tối ưu hơn

1982
Cách code jQuery tối ưu

Như mọi người đã biết ai mà đã code đến js thì cũng đều biết đến jquery là 1 thư viện khá là nổi tiếng tầm 3-4 năm trước. Nhưng đến bây giờ nó đã ít được sử dụng đến bởi vì có những framework client mới nổi lên như vuejs, reactjs…

Xem thêm jQuery là gì?

Dưới đây là số lượt đánh giá qua từng năm của các thư viện:

Cách code jQuery tối ưu

Hiện tại những dự án mới họ ít sử dụng jquery. Tuy nhiên ở những dự án maintain, mình chắc chắn mọi người vẫn phải đụng đến jquery. Nhưng cách code jQuery tối ưu thì không phải ai cũng biết.

Thôi nói mở đầu dài dòng quá, chúng ta bắt đầu luôn nhé!

  Tối ưu hoá MySQL sử dụng việc gộp các index
  Cách thức hoạt động của JavaScript: V8 engine và 5 mẹo tối ưu hóa

jQuery ready event

Khi mọi người làm việc với jquery thì chắc ai cũng đã làm việc với $(document).ready() window.onload rồi đúng không. Cơ bản là 2 thằng này nó đều chạy khi DOM tree đã được load xong nhưng window.onload sẽ cover lâu hơn 1 chút là vì chờ DOM tree chạy xong rồi image, js, css.

Nghĩa là khi trình duyệt đã load xong mọi thứ thì thằng này nó mới chạy, tuỳ theo với yêu cầu của bài toán thì mọi người dùng cái nào cho hợp lý là được. Bình thường mọi người hay code như thế này đúng không:

Hoặc cách viết ngắn hơn thì sẽ là:

Rồi mình có 1 câu hỏi: Cách làm như vậy có ổn không?

Câu trả lời là: “Khá” ổn

Nếu bạn biết chắc chắn môi trường nơi mà code của bạn sẽ được thực thi

Nếu bạn không quan tâm tới hiệu năng khi tải trang

Nếu bạn không quan tâm tới “best practices”

Vậy, cách tốt hơn là gì???

Với cách viết này code của bạn sẽ clear hơn rất là nhiều. Ví dụ như trang của bạn đang sử dụng jquery version 1.0.1 mà ai đó import version 1.0.2 vào thì đoạn code:

Của bạn có nguy cơ bị lỗi rất cao vì lúc này biến $ nó sẽ không hiểu đang là của version nào. Nhưng với đoạn code mới, bạn có thể define version bạn muốn sử dụng trong các hàm của mình bằng cách truyền vào thôi:

DOM manipulation

Làm việc với jquery thì chắc chắn sẽ phải sử dụng đếm DOM đúng không, chúng ta thường thấy rất nhiều những đoạn như này trong dự án

Mình lại có 1 câu hỏi: Cách làm như này có ổn không?

Câu trả lời là: “Khá” ổn

Nếu bạn muốn code của mình được lặp lại

Nếu bạn không quan tâm tới hiệu năng

Nếu bạn không quan tâm tới “best practices”

Cách viết tốt hơn là:

Vì id chỉ là duy nhất nên khi gọi đến element đấy mình chỉ cần gọi đến id thôi, không cần gọi đến những element parent của nó.

Hoặc cách tối ưu nhất là lưu các selector vào các biến:

Hoặc cách tối ưu hơn nữa là Lưu các selector vào các biến:

Với những cách này sẽ giảm bớt việc truy cập DOM, tăng khả performance cho trang web của bạn.

Hay chúng ta cũng hay thấy đoạn này nữa:

Mình lại có một câu hỏi: Cách làm như vậy có ổn không?

Câu trả lời là: “Khá” ổn

Nếu bạn muốn lặp lại việc thêm mới các DOM vào DOM

Nếu bạn thích có một web app nặng nề

Nếu bạn không quan tâm tới “best practices”

Với cách trên thì sau mỗi li DOM lại được cập nhật 1 lần, thế có 1 nghìn thẻ li thì phải cập nhật DOM 1 nghìn lần đúng không, khá là tù nhỉ Cách tốt nhất là chỉ cập nhật DOM 1 lần thôi:

Lúc này khi biến dynamic Items đã có dữ liệu rồi thì việc cập nhật DOM chỉ cần 1 lần duy nhất.

Event handling

Phần xử lý sự kiện này mình cũng gặp khá là nhiều đúng không:

Cách làm như vậy có ổn không?

Câu trả lời là: “Khá” ổn

Nếu bạn muốn sử dụng một lượng lớn RAM để xử lý các sự kiện DOM

Nếu bạn không có quá nhiều DOM

Nếu bạn không quan tâm tới “best practices”

Khi code kiểu này nếu như 1 thẻ li được bọc ở bên ngoài thẻ ul (thẻ này cũng add 1 event) thẻ ul lại được bọc bằng 1 thẻ div (thẻ này cũng có event) như thế khi click vào thẻ li thì mình cũng gọi luôn cả 3 sự kiện kia nữa đúng không? Quả là không đáng tý nào!

Cách tốt hơn là gì? – DRY(Don’t Repeat Yourself)

Hay cách tốt hơn nữa là:

AJAX

Phần này ai mà biết đến jquery thì không thể nào không động đến AJAX. Chúng ta có thể thấy những đoạn code như thế này trong rất nhiều dự án.

Cách làm như vậy có ổn không?

Câu trả lời là: “Khá” ổn

Nếu bạn thích code không linh hoạt

Nếu bạn không lo lắng tới việc có quá nhiều ajax request

Nếu bạn không quan tâm tới “best practices”

Với cách làm như trên thì mỗi lần bạn call ajax với những ID khác nhau bạn lại phải tạo đúng 1 function getName khác để sử lý cái data trả về đúng không, như thế ko ổn tý nào, có 1 nghìn hàm chẳng nhẽ code 1 nghìn lần.

Cách tốt nhất – Sử dụng jQuery Promise:

Lúc này phần done sẽ là function callback mà ajax trả về, có thể dùng done, sussess, error thoải mái nhé.

Các tốt hơn là mình tùy biến ID, type, url, data mình truyền vào:

Với cách code này bạn có thể dùng đi dùng lại nhiều lần được đúng không.

Kết luận

Bài của mình hôm nay đến đây thôi, đây là những thứ mình cũng được học hỏi lại từ những người kinh nghiệm hơn mình mong có thể giúp đỡ được mọi người trong lúc làm dự án.

Hy vọng qua bài viết này bạn sẽ biết cách code jQuery tối ưu cho mình.

Cảm ơn các bạn đã theo dõi bài viết!

Tham khảo: Serminar Team IronMan (G2-Sun*)

Đừng bỏ lỡ những bài viết hay liên quan đến jQuery:

Xem thêm việc làm Software Developers hot nhất trên TopDev

TopDev via viblo

  Cách tối ưu Component trong React Native
  8 cách tối ưu hoá JavaScript mọi lập trình viên đều phải biết
SHARE