0

我正在开发自己的 CMS 系统。它部分适用于 Ajax 和 jQuery，但问题是我使用了很多点击事件。因此，当我不断单击网站中的不同项目时，它会减慢系统速度。最终它不再做任何事情。我对点击事件是否正确，我需要如何以好的方式使用它？我使用了 .bind 和 .on 事件处理程序。

$(document).ready(function(){


//Standards
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$('#wrapper').css('width',windowWidth);
$('#content').css('height',windowHeight);


//Click related items
$('.listItem').bind('click',function() {
    var itemID = $(this).attr('rel');
    $('#content').load('showitems.php',{newID:itemID});
});


//Click on tab
$('.liBase a').on('click', function() {
    $('.liBase a').parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().addClass('activeList');
});


//Click pages

$('.page').on('click', function() {
    var pageID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('showpages.php',{newID:pageID});
});

$('.item').on('click', function() {
    var pageID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('showitems.php',{newID:pageID});
});

$('.editItem').on('click', function() {
    var newID = $(this).attr('rel');
    $('.editPage').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('edititem.php',{itemID:newID});
});

$('.editPage').on('click',function() {
    var newID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('editpage.php',{pageID:newID});
});

$('.deleteItem').on('click', function() {
    var newID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('../control/deleteRecords.php',{postID:newID,tblName:'items',tblID:'itemID'});
});

$('.deletePage').on('click',function() {

    var newID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('../control/deleteRecords.php',{postID:newID,tblName:'pages',tblID:'pageID'});
});

$('#addPage').on('click', function() {
    $('#content').load('addpage.php');
});

$('#addItem').on('click', function() {
    $('#content').load('additem.php');
});


$('#imageShow a').on('click', function() {
    var pageID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $(this).parent().addClass('activeList');
    $('#content').load('showimages.php');

});

$('#imageAdd').on('click', function() {
    $('#content').load('addimage.php');
});



});
4

1 回答 1

0

我建议您执行以下操作（首先是简单的；D）

1）缓存你经常使用的jQuery Object。

 $item = $('.item');

2) 重构代码以消除冗余

$('.editPage').on('click',function() {
    doStuff(this);
    $('#content').load('editpage.php',{pageID:newID});
});

function doStuff(that){
    var newID = $(that).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(that).parent().parent().addClass('activeList');
}

3）看看你是否可以限制点击事件绑定的数量（是否有元素不必要地绑定了几个点击事件？）

4) 进行分析（Chrome devtools 是一个不错的选择）

  • 是网络吗 - 通过丢弃旧请求或将它们排队来限制请求的频率

  • 分析您的内存消耗 - 您的代码中的部分是否消耗大量内存

于 2012-10-17T10:46:51.250 回答