Как я могу улучшить свою логику Javascript / jQuery?Пример включен - PullRequest
Новая
       0

Как я могу улучшить свою логику Javascript / jQuery?Пример включен

2 голосов
/ 09 июля 2011

Это не прямой вопрос, а скорее вопрос о том, как я могу улучшить свой JavaScript, сжав код и написав более логичным способом.

По сути, я просто написал несколько javascript, используя jQuery, для создания анимации портфолио на моем сайте.Вы можете просмотреть портфолио и анимацию здесь:

http://www.saelstrom.com/portfolio/full-portfolio

Все, что я хотел сделать, похоже, работает.Однако у меня просто такое ощущение, что он мог бы быть написан с гораздо меньшим количеством кода.Я могу ошибаться, но я решил поставить этот вопрос на всякий случай, если есть какие-то эксперты, которые хотели бы указать мне правильное направление, когда я в следующий раз напишу какой-нибудь javascript.сценарии: 

$(document).ready(function() {

// ------------------------------------------------------
// - Create jQuery Function - Fade Then Slide Toggle
// ------------------------------------------------------
jQuery.fn.fadeThenSlideToggle = function(speed, callback) {
  if (this.is(":visible")) {
    return this.fadeTo(speed, 0).slideUp(speed, callback);
  } else {
    return this.slideDown(speed).fadeTo(speed, 1, callback);
  }
};

// ------------------------------------------------------
// - Portfolio Item Collapse
// ------------------------------------------------------
$('.folio-item').click(function(){
    collapse = $(this).find('.folio-collapse');
    collapse.slideToggle('slow',function(){
        if($(this).is(':visible')){
            $(this).parent().addClass('open');
        }
        else
        {
            $(this).parent().removeClass('open');
        }
    });
}); 

// ------------------------------------------------------
// - Portfolio Item Hover
// ------------------------------------------------------
$('.folio-item').hover(function(){
    hoveritem = $(this).find('.hover-item');
    hoveritem.fadeIn('fast');
},
function(){
    hoveritem = $(this).find('.hover-item');
    hoveritem.fadeOut('fast');
});

$('.folio-screen').hover(function(){
    hoveritem = $(this).find('.launch');
    hoveritem.fadeIn('fast');
},
function(){
    hoveritem = $(this).find('.launch');
    hoveritem.fadeOut('fast');
});

// ------------------------------------------------------
// - Portfolio Show/Hide Section Wrappers
// ------------------------------------------------------

// - Web Design - Click Function
$('li.port-web').click(function(){

    if($('.web-wrapper').is(':visible')){
        // Do Nothing
    }
    else if($('.marketing-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-marketing').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-web').addClass('active');
        // Hide Marketing Wrapper
        $('.marketing-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Web Wrapper
            $('.web-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.branding-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-branding').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-web').addClass('active');
        // Hide Branding Wrapper
        $('.branding-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Web Wrapper
            $('.web-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.landing-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-landing').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-web').addClass('active');
        // Hide Landing Wrapper
        $('.landing-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Web Wrapper
            $('.web-wrapper').fadeThenSlideToggle('slow');
        });
    }

});

// - Internet Marketing - Click Function
$('li.port-marketing').click(function(){

    if($('.marketing-wrapper').is(':visible')){
        // Do Nothing
    }
    else if($('.web-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-web').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-marketing').addClass('active');
        // Hide Web Wrapper
        $('.web-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Marketing Wrapper
            $('.marketing-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.branding-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-branding').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-marketing').addClass('active');
        // Hide Branding Wrapper
        $('.branding-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Marketing Wrapper
            $('.marketing-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.landing-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-landing').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-marketing').addClass('active');
        // Hide Landing Wrapper
        $('.landing-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Marketing Wrapper
            $('.marketing-wrapper').fadeThenSlideToggle('slow');
        });
    }

});

// - Branding - Click Function
$('li.port-branding').click(function(){

    if($('.branding-wrapper').is(':visible')){
        // Do Nothing
    }
    else if($('.web-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-web').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-branding').addClass('active');
        // Hide Web Wrapper
        $('.web-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Branding Wrapper
            $('.branding-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.landing-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-landing').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-branding').addClass('active');
        // Hide Landing Wrapper
        $('.landing-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Branding Wrapper
            $('.branding-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.marketing-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-marketing').removeClass('active');
        // Add Class 'active'
                $(this).parent().find('li.port-branding').addClass('active');
        // Hide Marketing Wrapper
        $('.marketing-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Branding Wrapper
            $('.branding-wrapper').fadeThenSlideToggle('slow');
        });
    }

});

// - Landing Pages - Click Function
$('li.port-landing').click(function(){

    if($('.landing-wrapper').is(':visible')){
        // Do Nothing
    }
    else if($('.web-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-web').removeClass('active');
        // Add Class 'active'
                $(this).parent().find('li.port-landing').addClass('active');
        // Hide Web Wrapper
        $('.web-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Landing Wrapper
            $('.landing-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.branding-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-branding').removeClass('active');
        // Add Class 'active'
                $(this).parent().find('li.port-landing').addClass('active');
        // Hide Branding Wrapper
        $('.branding-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Landing Wrapper
            $('.landing-wrapper').fadeThenSlideToggle('slow');
        });
    }
    else if($('.marketing-wrapper').is(':visible')){
        // Remove 'active' Class
        $(this).parent().find('li.port-marketing').removeClass('active');
        // Add Class 'active'
        $(this).parent().find('li.port-landing').addClass('active');
        // Hide Marketing Wrapper
        $('.marketing-wrapper').fadeThenSlideToggle('slow',function(){
            // Show Landing Wrapper
            $('.landing-wrapper').fadeThenSlideToggle('slow');
        });
    }

});

});

1 Ответ

1 голос
/ 09 июля 2011

Для одного вы можете использовать больше цепочек: 

// ------------------------------------------------------
// - Portfolio Item Collapse
// ------------------------------------------------------
$('.folio-item').click(function(){
    collapse = $(this).find('.folio-collapse').slideToggle('slow',function(){
        if($(this).is(':visible')){
            $(this).parent().addClass('open');
        }
        else
        {
            $(this).parent().removeClass('open');
        }
    });
}); 


// ------------------------------------------------------
// - Portfolio Item Hover
// ------------------------------------------------------
$('.folio-item').hover(function(){
    hoveritem = $(this).find('.hover-item').fadeIn('fast');
},
function(){
    hoveritem = $(this).find('.hover-item').fadeOut('fast');
});

$('.folio-screen').hover(function(){
    hoveritem = $(this).find('.launch').fadeIn('fast');
},
function(){
    hoveritem = $(this).find('.launch').fadeOut('fast');
});

Вы можете удалить избыточный код: 

/* ALL THIS CODE CAN GO AWAY */

if($('.marketing-wrapper').is(':visible')){
    // Do Nothing
}

if($('.web-wrapper').is(':visible')){
    // Do Nothing
}

if($('.branding-wrapper').is(':visible')){
    // Do Nothing
}

if($('.landing-wrapper').is(':visible')){
    // Do Nothing
}

Это не плохо. Я бы начал там. Ваши комментарии занимают много места, что может создать иллюзию многословия:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...