Jquery优化代码

Question

我昨天发布了带有不同查询的下面的代码，但我现在想知道如何使用 DRY 方法组合这两个函数，因为它们基本上是相同的。

非常感谢任何帮助。谢谢。

编辑完整代码...

    $(function(){
    //Supersize Image
    $.fn.supersized.options = {  
        startwidth: 1278,  
        startheight: 800,
        vertical_center: 0,
        slides : [{image : ""}]
    };
    $('#supersized').supersized(); 

    //Image Gallery
    var imgs = [
                ['images/test.jpg',
                 'Test Title',
                 'Test text',
                 'light'],
                ['images/test.jpg',
                 'Test Title',
                 'Test text',
                 'light'],
                ['images/test.jpg',
                 'Test Title',
                 'Test text',
                 'dark']
               ];


var cnt = imgs.length;
var lengthMinusOne = cnt - 1,
    index = 0,
    fadeSpeed = 1000;
preload_image_object = new Image();
var i = 0;
for (i = 0; i <= cnt; i++)
preload_image_object.src = imgs[i];
$("#txt h1").text(imgs[0][1]);
$("#txt #desc p").text(imgs[0][2]);
var ld = imgs[0][3];
if (ld == "dark") {
    $("body").addClass("dark");
};
var firstImg = $('<img />');
$(firstImg).attr('src', imgs[0][0]);
$('#supersized').append(firstImg);
$(firstImg).hide().fadeIn(fadeSpeed);


$("#prev-photo").bind('click', prev);
function prev() {
    index--;
    $('#prev-photo,#next-photo').unbind();
    if (index < 0) {
        index = lengthMinusOne;
    };
    var ld = imgs[index][3];
    if (ld == "dark") {
        $("body").addClass("dark");
    } else {
        $("body").removeClass("dark");
    };
    oldImg = $('#supersized img').addClass('old');
    $("#txt h1").text(imgs[index][1]).hide().fadeIn();
    $("#txt #desc p").text(imgs[index][2]).hide().fadeIn();
    var img = new Image();
    $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]);
    $('#supersized').append(img);
    $('#supersized img').css('left', '0');
    $(img).hide().fadeIn(fadeSpeed, function () {
        oldImg.remove();
        $('#prev-photo').bind('click', prev);
        $('#next-photo').bind('click', next);
    });
};

$("#next-photo").bind('click', next);
function next() {
    index++;
    $('#next-photo,#prev-photo').unbind();
    if (index > lengthMinusOne) {
        index = 0
    };
    var ld = imgs[index][3];
    if (ld == "dark") {
        $("body").addClass("dark");
    } else {
        $("body").removeClass("dark");
    };
    oldImg = $('#supersized img').addClass('old');
    $("#txt h1").text(imgs[index][1]).hide().fadeIn();
    $("#txt #desc p").text(imgs[index][2]).hide().fadeIn();
    var img = new Image();
    $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]);
    $('#supersized').append(img);
    $('#supersized img').css('left', '0');
    $(img).hide().fadeIn(1300, function () {
        oldImg.remove();
        $('#next-photo').bind('click', next);
        $('#prev-photo').bind('click', prev);
    });
};

$("#gallery-buttons").css("bottom", "-220px");
$("#project-name").click(function () {
    $(this).fadeOut(500, function () {
        $("#gallery-buttons").animate({
            bottom: '0'
        }, 800);
    });
});
$("#hide-caption").click(function () {
    $("#gallery-buttons").animate({
        bottom: '-220px'
    }, 800, function () {
        $("#project-name").fadeIn(500);
    });
});

});

这是按要求的 HTML...

<div id="buttons-wrap">
     <div id="prev-photo">prev photo</div>
     <div id="next-photo">next photo</div>
</div>
<div id="supersized"></div>

Answer 1

如果您发布的代码有效，那么这也应该......

$("#prev-photo").bind ('click', {bIsNext: false}, ImageFoo);
$("#next-photo").bind ('click', {bIsNext: true},  ImageFoo);


function ImageFoo (zEvent) {

    if (zEvent.data.bIsNext)    index++;
    else                        index--;

    if (index < 0)              index = lengthMinusOne;
    if (index > lengthMinusOne) index = 0;

    $('#prev-photo,#next-photo').unbind();

    var ld = imgs[index][3];

    if (ld == "dark") {
        $("body").addClass("dark");
    } else {
        $("body").removeClass("dark");
    };

    oldImg = $('#supersized img').addClass('old');
    $("#txt h1").text(imgs[index][1]).hide().fadeIn();
    $("#txt #desc p").text(imgs[index][2]).hide().fadeIn();

    var img = new Image();
    $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]);

    $('#supersized').append(img);
    $('#supersized img').css('left', '0');

    $(img).hide().fadeIn(fadeSpeed, function () {
        oldImg.remove();
        $('#next-photo').bind ('click', {bIsNext: true},  ImageFoo);
        $('#prev-photo').bind ('click', {bIsNext: false}, ImageFoo);
    });
};

Answer 2

var changePicture = function(direction) {
  if (direction>0) {
    // Code to initialise eveything specific to next picture
  } else {
    // Code to initialise eveything specific to previous picture
  }

  // Code to execute in both cases using everything initialised above
};

var prev = function() {
  changePicture(-1);
};

var next = function() {
  changePicture(1);
};

$("#prev-photo").bind('click', prev);
$("#next-photo").bind('click', next);

Answer 3

为什么不将参数添加到函数中，这只会改变它的行为？这就是函数参数的用途。

（如果你需要的话，我会在一分钟内重写你的函数）

所以，这里是：

bindButtons();
function change(direction) {
    if (direction == 'prev') { index = (index -1) < 0 ? lengthMinusOne : index -1, speed = fadeSpeed; }
    else { index = (index +1) > lengthMinusOne ? 0 : index +1, speed = 1300; }
    $('#prev-photo,#next-photo').unbind();
    var ld = imgs[index][3], body = $("body");
    if (ld == "dark") { body.addClass("dark"); }
    else { body.removeClass("dark"); };
    var oldImg = $('#supersized img').addClass('old');
    $("#txt h1").text(imgs[index][1]).hide().fadeIn();
    $("#txt #desc p").text(imgs[index][2]).hide().fadeIn();
    var img = new Image();
    $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]);
    $('#supersized').append(img);
    $('#supersized img').css('left', '0');
    $(img).hide().fadeIn(speed, function () {
        oldImg.remove();
        bindButtons();
    });
};
function bindButtons() {
    $("#prev-photo").bind('click', change('prev'));
    $("#next-photo").bind('click', change('next'));
}

你的代码非常不干净，我认为，如果提供 HTML，它可以进一步优化，因为这个东西是用来做什么的。