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-slidersẽ 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 ạ.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
