Nhờ tư vấn tối ưu code javascript

#1

Mình đang thực tập xuất html từ psd, sử dụng java script để thao tác sự kiện trên web và tất cả dữ liệu được hard code bằng script. Tất cả code là do mình viết ra, nhưng thật sự thì mình thấy nó dài dòng lắm. Mong anh em tư vấn cách tối ưu nó, phương hướng như thế nào ạ? Nhìn vào code mà thấy sáng sủa mạch lạc thì thích lắm. Cám ơn mọi người trước nhé.

//tạo dữ liệu
var category = [{ cateID: 1, cateName: "PIZZA" },
    { cateID: 2, cateName: "STARTERS" },
     { cateID: 3, cateName: "SALADS" },
      { cateID: 2, cateName: "PATAS" },
       { cateID: 2, cateName: "MEXICAN" },
        { cateID: 2, cateName: "RIBS" },
         { cateID: 2, cateName: "MAINS" },
        { cateID: 2, cateName: "BURGERS" },
        { cateID: 2, cateName: "DESERTS & DRINK" }
];
var product = [{ proID: 1, proName: "The Original BBQ Chicken", cateID: 1, proImg: "../image/Pizza.png" },
    { proID: 2, proName: "Hawaiian BBQ Chicken", cateID: 1, proImg: "../image/Pizza2.PNG" },
    { proID: 3, proName: "Habanero Carnitas", cateID: 1, proImg: "../image/Pizza3.PNG" },
    { proID: 4, proName: "California Club", cateID: 1, proImg: "../image/Pizza4.PNG" },
{ proID: 5, proName: "California Veggle", cateID: 1, proImg: "../image/Pizza5.PNG" },
{ proID: 6, proName: "Honey-wheat with whole Graint Crust", cateID: 1, proImg: "../image/Pizza6.PNG" }];
// thêm vào category
$(document).ready(function () {
    for (var i = 0; i < category.length; i++) {
        $('ul.menu').append('<li><a class="click">' + category[i].cateName + '</a></li>');
    }
});

//do san pham vao content
$(document).ready(function () {
    for (var i = 0; i < product.length; i++) {
        //alert(product[i].proImg);        
        $('#show-pizza').append('<div class="item-pizza"><h4>' + product[i].proName + '</h4><img src="' + product[i].proImg + '" /></div>');

    }
});


//fix menu trai
$("document").ready(function () {
    var nav = $('#menu-trai');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

//back top top
$("document").ready(function () {
    $('#top1,#top2').click(function () {
        $('body', 'html').animate({ scrollTop: 0 }, 800);
    });
});
//dong show san pham
$(document).ready(function () {
    $('#viewless').click(function () {
        var noi = '#show-pizza';
        $(noi).toggle('slow', function () {
            $(this).toggleClass('toggle-hide');
        });
    });

});
//croll den san pham
$(document).ready(function () {
    $('.click').click(function () {
        var text = $(this).text();
        var noi="#"+text+"-CROL";      
        $('html,body').animate({
            scrollTop: $(noi).offset().top
        },
        'slow');
    });
});
1 Like
#2

Thay vì register mỗi event trong 1 cái $("document").ready(function () { riêng lẻ, bạn có thể bỏ tất cả event handler vào trong 1 $("document").ready(function () { duy nhất.

Code của bạn chỉ yếu liên quan đến DOM API nên không có cách nào giúp bạn tối ưu hóa nếu không có HTML

7 Likes
#3

Dùng nhiều $(document).ready(function() { cũng không quá tệ, nó sẽ giúp tách riêng từng chức năng, nếu một chức năng nào đó lỗi cũng không ảnh hưởng đến chức năng khác, và cũng tránh lỗi nếu lỡ đặt trùng tên biến. Tuy nhiên làm thế thì trông code nó hơi bừa bộn.

Những cách tối ưu thì mình nghĩ đến (đã chú thích trong code):

(function($) { // Bảo hiểm cho ký hiệu $

    'use strict'; // google để biết thêm

    // thêm vào category
    function categoryGen() {
        var i,
            categorySize = category.length, // Đặt biến để cache category.length vì nó giữ nguyên giá trị khi vòng lặp chạy
            listArr = []; // Tạo mảng chứa chuỗi HTML của từng thẻ LI được tạo ra
        for (i = 0; i < categorySize; i++) {
            listArr[i] = '<li><a class="click">' + category[i].cateName + '</a></li>'; // Thêm vào mảng list
        }
        $('ul.menu').html(listArr.join('')); // list.join('') chuyển mảng thành chuỗi HTML toàn bộ thẻ LI, và thêm vào thẻ UL
        // Dùng cách này sẽ nhanh hơn là dùng append, hạn chế số lần thay đổi DOM
    }

    //do san pham vao content (Tương tự ở trên)
    function productGen() {
        var i,
            productSize = product.length,
            listArr = [];
        for (i = 0; i < productSize; i++) {
            listArr[i] = '<div class="item-pizza"><h4>' + product[i].proName + '</h4><img src="' + product[i].proImg + '" /></div>';
        }
        $('#show-pizza').append(listArr.join(''));
    }


    //fix menu trai
    function leftMenuFixed() {
        var $leftMenu = $('#menu-trai'), // Thêm dấu $ ở trước biến là đối tượng jQuery để dễ phân biệt. Đặt tên biến rõ ràng, có nghĩa, sẽ dễ tra cứu về sau
            $win = $(window);

        $win.scroll(function() {
            if ($win.scrollTop() > 50) {
                $leftMenu.addClass('f-nav');
            } else {
                $leftMenu.removeClass('f-nav');
            }
        });
    }

    //back to top
    function backToTop() {
        $('#top1, #top2').click(function(e) {
            e.preventDefault(); // Nếu là liên kết thì e.preventDefault(); sẽ loại bỏ sự kiện mặc định của nó
            $page.animate({ // Trong code cũ ghi $('body', 'html') là sai, viết như thế có nghĩa $('html').find('body')
                scrollTop: 0
            }, 800);
        });
    }

    //dong show san pham
    function togglePizza() {
        var $showPizza = $('#show-pizza'); // Vì $showPizza không thay đổi khi click nên đặt biến ra ngoài, nếu không mỗi khi click nó sẽ tạo lại biến này
        $('#viewless').click(function() {
            $showPizza.stop(true, true).toggle('slow', function() { // .stop(true, true) sẽ dừng hoạt cảnh khi click liên tục
                $showPizza.toggleClass('toggle-hide');
            });
        });
    }

    //scroll den san pham
    function scrollToProduct() {
        $('.click').click(function() {
            $page.animate({
                scrollTop: $('#' + $(this).text() + '-CROL').offset().top // Hạn chế đặt biến nếu nó chỉ được dùng 1 lần, trừ khi nó quá phức tạp cần tách ra cho dễ đọc code
            }, 'slow');
        });
    }

    //scroll den san pham (Cách 2)
    // Code ở trên cũng sẽ chạy thôi, nhưng không đẹp, phải qua 2 bước để lấy ID, nếu text mà có khoảng trắng hay Tiếng Việt thì phải thêm xử lý chuỗi nữa.
    /*
    function scrollToProduct() {
        $('.click').click(function(e) { // Nên dùng link đến sản phẩm X dạng thế này <a class="click" href="#san-pham-x">Sản phẩm X</a>
            e.preventDefault();
            $page.animate({
                scrollTop: $($(this).attr('href')).offset().top // Khung chứa sản phẩm X <div id="san-pham-x"> ... </div>
            }, 'slow');
        });
    }
    */

    $(function() { // Kiểu viết rút gọn của $(document).ready(function() {

        //tạo dữ liệu
        var category = [
                { cateID: 1, cateName: 'PIZZA' },
                { cateID: 2, cateName: 'STARTERS' },
                { cateID: 3, cateName: 'SALADS' },
                { cateID: 2, cateName: 'PATAS' },
                { cateID: 2, cateName: 'MEXICAN' },
                { cateID: 2, cateName: 'RIBS' },
                { cateID: 2, cateName: 'MAINS' },
                { cateID: 2, cateName: 'BURGERS' },
                { cateID: 2, cateName: 'DESERTS & DRINK' }
            ],
            product = [
                { proID: 1, proName: 'The Original BBQ Chicken', cateID: 1, proImg: '../image/Pizza.png' },
                { proID: 2, proName: 'Hawaiian BBQ Chicken', cateID: 1, proImg: '../image/Pizza2.PNG' },
                { proID: 3, proName: 'Habanero Carnitas', cateID: 1, proImg: '../image/Pizza3.PNG' },
                { proID: 4, proName: 'California Club', cateID: 1, proImg: '../image/Pizza4.PNG' },
                { proID: 5, proName: 'California Veggle', cateID: 1, proImg: '../image/Pizza5.PNG' },
                { proID: 6, proName: 'Honey-wheat with whole Graint Crust', cateID: 1, proImg: '../image/Pizza6.PNG' }
            ],
            $page = $('html, body'); // Đặt biến để cache đối tượng dùng nhiều lần
        // Gộp các biến liên tiếp lại, cách nhau bằng dấu phẩy... cho đẹp ^^
        // Bao quanh chuỗi bằng dấu nháy đơn, hoặc nháy kép thì giữ nguyên phong cách đó cho toàn dự án, cũng chỉ để... cho đẹp ^^
        // Tách từng chức năng thành hàm riêng, nếu có chức năng nào lỗi cũng không ảnh hưởng đến các chức năng khác, ngoài ra cũng dễ debug hơn

        categoryGen();
        productGen();
        leftMenuFixed();
        backToTop();
        togglePizza();
        scrollToProduct();
    });

})(jQuery);
4 Likes
#4

tuyệt vời !! cảm ơn bạn đã giúp đỡ @@

2 Likes
#5

Cảm ơn bạn! mình sẽ rút kinh nghiệm

2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?