JQuery оптимизирует доступ к атрибутам для события зависания - PullRequest
Новая
       31

JQuery оптимизирует доступ к атрибутам для события зависания

0 голосов
/ 28 марта 2012

Я использую спрайты CSS-изображений для эффекта наведения на элемент, новый класс, который будет применен при наведении мыши, назначен атрибуту data-toggle-class, а ниже приведен код (я сейчас это миниатюрное улучшение производительности и выполняю предварительные оптимизация что не хорошо) 

    $("*[data-toggle-class]").hover(function(ev){
        var a = $(this);
        a.toggleClass(a.attr("data-toggle-class"))
    });
  • как мне кэшировать атрибут data-toggle-class, а не извлекать его каждый раз при наведении.
  • Несмотря на то, что я использую Image sprite, перед эффектом переключения наблюдается небольшая задержка. Это известная проблема

1 Ответ

1 голос
/ 28 марта 2012

Я могу ответить только на вопрос о кешировании (в основном см. Примечание под разделителем ниже) , что вы можете сделать с закрытием: 

$("*[data-toggle-class]").each(function() {
    var $elm = $(this),
        cls = $elm.attr('data-toggle-class');
    $elm.hover(function() {
        $elm.toggleClass(cls);
    });
});

Что это значит,вместо того, чтобы иметь единственную функцию, которая вызывается для всех совпадающих элементов во время событий наведения мыши, она генерирует отдельную функцию для каждого элемента, где функция закрывается по ссылке на оболочку jQuery для элемента и копию его data-toggle-classприписывать.Он меняет размер (больше функций = больше памяти, хотя вам нужно иметь лот из них, чтобы это имело значение) для скорости.

Если ваша цель - иметькласс при наведении и не иметь его, когда он не зависает, я бы, вероятно, сделал это явно: 

$("*[data-toggle-class]").each(function() {
    var $elm = $(this),
        cls = $elm.attr('data-toggle-class');
    $elm.hover(
        // Start hover
        function() {
            $elm.addClass(cls);
        },
        // Stop hover
        function() {
            $elm.removeClass(cls);
        }
    );
});

Вы сказали

Я знаю, что это миниатюрное улучшение производительности иделать предварительную оптимизацию, что нехорошо

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

Интересно, нужен ли вам вообще класс и код JavaScript?Если вам не нужна поддержка IE6, псевдокласс :hover CSS предназначен именно для этой цели и обрабатывается непосредственно браузером, а не кодом JavaScript (читай: быстрее).Например: 

[data-toggle-class] {
    color: green;
}
[data-toggle-class]:hover {
    color: blue;
}

... сделает любой элемент с атрибутом data-toggle-class зеленым обычно, но синим при наведении.Если вам нужно делать разные вещи, основываясь на значении атрибута, вы можете сделать это: 

[data-toggle-class='foo'] {
    color: green;
}
[data-toggle-class='foo']:hover {
    color: blue;
}
[data-toggle-class='bar'] {
    color: black;
}
[data-toggle-class='bar']:hover {
    color: red;
}

Элементы с data-toggle-class="foo" будут обычно зеленым, синим при наведении;те, у которых data-toggle-class="bar", обычно будут черными и красными при зависании.JavaScript не требуется.

В приведенном выше понимании color является лишь примером;Я предполагаю, что вы используете background и background-position, если вы используете спрайты.

Вот правильный пример техники CSS ( живая копия | source ):

CSS: 

.arrow {
    width: 40px;
    height: 40px;
    background-image: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png);
    background-repeat: none;
    display: inline-block;
}
.style1 {
    background-position: 0px -220px;
}
.style1:hover {
    background-position: 0px -320px;
}
.style2 {
    background-position: 0px -260px;
}
.style2:hover {
    background-position: 0px -290px;
}

HTML: 

<div class="arrow style1"></div>
<div class="arrow style2"></div>

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

...