Как оптимизировать простой плагин jQuery Image Slide

Question

Для лучшей структуры проекта я пытаюсь сохранить (собрать) все мои собственные вещи jQuery для плагинов. Можно ли оптимизировать следующий плагин? Я знаю, что это;) Но мне нужно учиться ...

Plugin

$.fn.slide = function(options){
    options = $.extend({
        slideitem: 'img',
        prevclass: '.prev',
        nextclass: '.next'
    }, options);

    var element = $(this);

    // How many items to slide?
    var total = element.find(options.slideitem).length;
    var count = 0;

    // Hide all items but not first item
    element.find(options.slideitem).not(':first').hide();

    // Jump to next item
    element.find(options.nextclass).click(function() {        
        (count == total - 1) ? count = 0 : count++;
        element.find(options.slideitem).hide();            
        element.find(options.slideitem).eq(count).show();
        return false;
    });

    // Jump to previous item
    element.find(options.prevclass).click(function() {
        (count == 0) ? count = total - 1 : count--;
        element.find(options.slideitem).hide();            
        element.find(options.slideitem).eq(count).show();
        return false;                
    });
}

Пример HTML

<div id="container">
    <div id="nav"><a href="#" class="prev">Previous</a> <a href="#" class="next">Next</a></div>
    <img src="http://dummyimage.com/250x250/000/fff&text=Image#1" width="250" height="250" alt="Dummy #1"/>
    <img src="http://dummyimage.com/250x250/999/fff&text=Image#1" width="250" height="250" alt="Dummy #2"/>
    <img src="http://dummyimage.com/250x250/BBB/fff&text=Image#1" width="250" height="250" alt="Dummy #3"/>
    <img src="http://dummyimage.com/250x250/CCC/fff&text=Image#1" width="250" height="250" alt="Dummy #4"/>
</div>

Вот рабочая копия, с которой вы можете играть: http://jsfiddle.net/T4t4z/

Заранее спасибо!

Answer 1

Есть несколько основных вещей, которые вы можете сделать, которые не уменьшат читабельность и, скорее всего, немного улучшат производительность:

1. Кэшируйте результаты jQuery.Вы используете:

   element.find(options.slideitem)
   

   несколько раз.Вы можете заменить это кэшированным запросом:

   var items = element.find(options.slideitem);
   

2. Цепные операции jQuery.Вместо:

   element.find(options.slideitem).hide();            
   element.find(options.slideitem).eq(count).show();
   

   Использование:

   element.find(options.slideitem).hide().eq(count).show();
   

Однако я бы не стал слишком сильно оптимизировать ваш код перед тем, как столкнуться с проблемами.

Если вам нужна дополнительная оптимизация, посмотрите JSPerf , довольно интересный инструмент, который сравнит два кусочка JavaScript для вас.