30/09/2018, 20:13
Nhờ anh em tư vấn mình tối ưu code javascript ^^
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');
});
});
Bài liên quan
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
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):
tuyệt vời !! cảm ơn bạn đã giúp đỡ @@
Cảm ơn bạn! mình sẽ rút kinh nghiệm