Javascript chuẩn: Check số lượng đối tượng trước khi bật slider

1/5 - (1 bình chọn)

Nắm được các pattern Javascript thông thường và ứng dụng để tăng performance là một cách hiệu quả để giúp application của bạn hoạt động nhanh và không dùng thừa tài nguyên. Trong tình huống 1 Slideshow, Code Tốt xin giới thiệu cách thức bạn kiểm tra số lượng item trước khi bật Slider.

Để bắt đầu, ta cần lần lượt thực hiện các thao tác dưới đây. Hãy bắt đầu bằng 1 HTML Markup đơn giản nhất:

<div class="sliders">
  <div class="slider-item"></div>
  <div class="slider-item"></div>
  <div class="slider-item"></div>
</div>

Như các bạn đã thấy, markup trên bao gồm 1 div parent và 1 các div item. Thông thường khi ta muốn bật Slider thì cần tìm parent phải không?

Đặt tên class riêng cho Javascript object

Trong trường hợp này, ta nên đặt riêng class để sử dụng trong Javascript cho parent. Chẳng hạn, tôi đặt là .js-slider.

Tại sao lại vậy? Việc phân biệt DOM Object trong Javascript và tránh viêc sử dụng chúng trong cả CSS sẽ giúp bạn không cần quá lo lắng nếu style hoặc markup thay đổi, vì class .js-slider sẽ luôn tồn tại và làm thành parent cho slider chạy.

Markup như vậy sẽ là:

<div class="sliders js-slider">
 <div class="slider-item"></div>
 <div class="slider-item"></div>
 <div class="slider-item"></div>
</div>

Kiểm tra số lượng item trong Slider

Như các bạn đã biết, thông thường Slider library sẽ chỉ đâu đánh đấy, tức là gọi thì nó tự khắc lôi các item slider bên trong ra để init làm slideshow.

Tuy vậy, phát sinh 1 trường hợp khi người sử dụng chỉ add 1 slider item và không muốn nó trở thành slider (vì 1 item thì lấy gì mà prev/next sang cái tiếp theo). Khi ấy, cách hay nhất là nên kiểm tra số lượng các slider item trước khi ta thực hiện lệnh gọi init slider.

Qua kiểm tra thì ta có thể sử dụng prototype `childElementCount` để check trên các trình duyệt. Cách làm có thể mô phỏng như sau:

var slider = document.querySelector('.js-slider');
if( slider.childElementCount > 1 ) {
  // Init slider
}

Điều này giúp việc hạn chế gọi library khi chưa cần tới (trong các gulp workflow performance sẽ tăng lên đáng kể nếu nhiều page sử dụng cùng chức năng slideshow này) và tăng tốc độ load của website lên đấy các bạn ạ.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...