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

Share vì hữu ích

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 ạ.

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời