Refactor Code

Trước khi qua bài học thêm trang FAQ và tạo hiệu ứng accordion cho trang thì chúng ta sẽ cần làm một công việc rất quan trọng trong lập trình đó là refactor code. Nhưng trước tiên nếu bạn chưa từng nghe về thuật ngữ này thì chúng ta sẽ cùng tìm hiểu về nó.

Refactor Code Là Gì

Refactor code là việc sửa đổi lại source code sao cho chúng tốt hơn ở một khía cạnh nào đó so với code hiện tại. Khía cạnh tốt hơn này có thể là về tốc độ thực thi nhanh hơn hoặc cũng có thể là làm code trở lên ngắn hơn, đẹp đễ hoặc gọn gàng hơn giúp dễ dàng quản lý sau này.

Ở bài học này chúng ta sẽ tìm hiểu cách refactor mã JavaScript, tuy nhiên việc refactor có thể được thực hiện với cả HTML và CSS hoặc code được viết bởi bất cứ ngôn ngữ lập trình nào.

Refactor Mã JavaScript

Bây giờ chúng ta sẽ refactor code hiện tại bằng cách kéo khai báo biến lightbox từ bên trong vòng lặp for ra ngoài như sau:

...
// console.log(images);

var lightbox = document.getElementById('lightbox');

for (var i = 0; i < images.length; i++) {
    ...
}

Với sửa đổi trên thì chúng ta đã tối ưu được bộ nhớ máy tính (dù chỉ một chút xíu) do trình duyệt không phải thực hiện việc tìm kiếm phần tử với giá trị id là lightbox lặp đi lặp lại nhiều lần.

Tương tự chúng ta cũng sẽ di chuyển việc khai báo và gán giá trị cho biến imagePlaceholder ra ngoài vòng lặp:

...
var lightbox = document.getElementById('lightbox');
var imagePlaceholder = document.getElementById('image-placeholder');

for (var i = 0; i < images.length; i++) {
    ...
}

Cuối cùng bên trọng vòng lặp for bạn đưa đoạn code gắn hàm lắng nghe sự kiện click cho phần tử currentImage vào bên trong câu lệnh điều kiện if như sau:

for (var i = 0; i < images.length; i++) {
    if (currentImage != imagePlaceholder) {
        currentImage.onclick = function() {
            console.log(this);
            ...
        }
    }
}

Câu lệnh trên kiểm tra xem phần tử currentImage có phải là một imagePlaceholder, nếu đúng thì chúng ta bỏ qua việc gán hàm lắng nghe sự kiện click cho phần tử này.

Điều này sẽ giúp trình duyệt không phải tự gán lại giá trị cho thuộc tính src của phần tử img bên trong lightbox. Nếu như không có đoạn câu lệnh kiểm tra điều kiện trên thì mặc dù bạn không thấy có gì thay đổi khi click lên ảnh hiển thị trong lightbox nhưng nếu mở công cụ Developer Tools và click tab Console bạn sẽ thấy câu lệnh console.log(this) vẫn được chạy.

Với việc thêm vào đoạn câu lệnh kiểm tra điều trên bạn sẽ không thấy tab Console hiển thị giá trị của biến this khi click vào ảnh hiển thị trong lightbox.