На карте маркерами на холсте, что всплывающие окна при нажатии


Вот рабочая версия моего кода http://jsfiddle.net/sambenson/g3qsa/#base
Как это может быть улучшено?

$(function(){
    var box = {},
        island = {},
        canvas = {};

    box.el = $('#box');
    canvas.el = $('#arrow');

    function go(el){
        if(box.el.css('visibility') == 'hidden'){
            reset_name();
            $('.island').addClass('inactive');

            box.top = box.el.offset().top;
            box.corner = {};
            box.corner.left = box.el.offset().left;
            box.corner.right = box.corner.left + box.el.width();

            island.el = el;
            island.top = island.el.offset().top;
            island.left = island.el.offset().left;

            island.el.removeClass('inactive').addClass('active');

            canvas.width = island.left - box.corner.left;
            canvas.height = island.top - box.top;

            canvas.el.css({
                top: box.top,
                left: box.corner.left
            }).attr({
                width: canvas.width,
                height: canvas.height    
            });

            var context = canvas.el[0].getContext('2d');

            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(box.el.width(), 0);
            context.lineTo(canvas.width, canvas.height);
            context.closePath();

            context.fillStyle = "#eaeaea";
            context.fill();

            box.el.css('visibility', 'visible');
            canvas.el.show();
        }
        else {
            close();
        }
    }

    function reset_name(){
        $('#name_holder').text('').css({
            top: -9999,
            left: -9999
        })
    }

    function close(){
        $('.island').removeClass('inactive active');
        box.el.css('visibility', 'hidden');
        canvas.el[0].width = canvas.el[0].width;
        canvas.el.hide();
    }

    $('.island').hover(function(){
        if(box.el.css('visibility') == 'hidden'){
            var t = $(this),
                name = t.text(),
                holder = $('#name_holder');
                top = t.offset().top - 60;
                left = t.offset().left - 50;

            holder.css({
                top: top,
                left: left
            }).text(name);
        }
    }, function(){ reset_name(); })
    .click(function(){ go($(this)); })

    $('.close').click(function(){
       close();
    })


})

Это может быть сделано быстрее?
Это может быть сделано более эффективным?



Комментарии
2 ответа

Наряду с предложениями @kingjv, вы можете улучшить производительность вашего выбора jQuery путем внесения некоторых просто твиков для селекторов.

Считаю, если у меня есть следующий HTML-код:

<div id="container">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
</div>

Если я с помощью селектора класса, таких как $(".ячейка") тогда селектора двигатель должен сделать немного больше, чем это необходимо. В данном примере селектор двигатель должен обойти весь дом, чтобы соответствовать правильные элементы. Мы можем улучшить эту пару способов:


  • Укажите тег в селекторе, например, $("разд.ячейка"). Это позволяет селектора двигатель использовать родной метод getelementsbytagname способ, чтобы уменьшить количество сравнений двигатель должен делать, чтобы соответствовать.

  • Указать корневой объект, чтобы начать поиск. Е. Г., если я ранее кэш мой селектор ВАР корень = $("#контейнер"), я могу повторно использовать этот селектор: $("div-элемент.клетка", корень) таким образом, мы не ходить весь дом за спичками.

Эти небольшие улучшения производительности, вы будете ценить их еще больше, если вы делаете много манипуляций с DOM и поиска. Более упрощенным приложений, не имеют столь явному улучшению производительности.

2
ответ дан 14 июля 2011 в 07:07 Источник Поделиться

Мои комментарии больше всего по стилю в отличие от производительности:

Вместо использования :

if(box.el.css('visibility') == 'hidden'){

это более читабельным, чтобы использовать :

if(box.el.is(":hidden")){

И точно так же, вместо того, чтобы использовать :

box.el.css('visibility', 'visible');

вы можете использовать :

box.el.hide();

Примечание На этом, хотя, это не совсем равноценны, потому что скрывать на самом деле комплектов дисплей: нет. В этом случае, хотя я считаю, что это нормально.

И еще одно заключительное замечание, это хорошая практика, чтобы назвать переменные, которые содержат в jQuery объекты с $ в начале. Это позволяет вам знать, что переменная-это уже объект jQuery, не возвращаясь в код, чтобы проверить и случайно избегает создания объектов jQuery из объектов, которые уже были объектов jQuery.

Что-то вроде этого:

var t = $(this),
name = t.text()

стал бы этот:

var $t = $(this),
name = $t.text()

2
ответ дан 14 июля 2011 в 01:07 Источник Поделиться