javascript jquery: перезапись переменных - как? лучшая производительность?

Question

Эй, ребята, Я не очень хардкорный программист, поэтому здесь я не разбираюсь в этом.

Представьте, что у меня есть несколько записей на моей странице (которые содержат видео Youtube через swfobject). Все эти объекты имеют уникальный идентификатор, например, ytplayer_12, ytplayer_2, ytplayer_56 и т. Д.

Мне нужно запустить все эти ytplayer_ с помощью jquery и добавить к ним EventListener.

Работает просто отлично! Мне просто интересно, объявляю ли я переменные ($ ytid, ytid) в правильном месте - вне функции onYouTubePlayerReady()? Или я должен объявить переменные внутри функции? Или даже внутри каждой петли?

var $ytid = '',
    ytid = '';

function onYouTubePlayerReady() {

    $('object[id^="ytplayer_"]').each(function() {

        $ytid = $(this).attr('id');
        ytid = document.getElementById($ytid);

        ytid.addEventListener("onStateChange", "foo");

    });
};

Мне просто интересно, что лучше в этом случае, и если я делаю это правильно сейчас? Спасибо за вашу информацию и помощь?

Answer 1

Поскольку значения переменных уникальны для каждой итерации, вам определенно необходимо определить их внутри цикла. Хотя вы можете немного облегчить себе жизнь и пропустить вызов document.getElementById(), поскольку this уже указывает на искомый объект:

var ytid = this;
var $ytid = $(this).attr('id'); // only if you need the id for something other than instantiating the ytid variable

Я использовал var в соответствии с предложением Гора не делать переменные глобальными

Answer 2

Объявление переменных в глобальном контексте - плохая идея. Переместите их в область действия функции.

function onYouTubePlayerReady() {
    var $ytid = '', ytid = '';
    $('object[id^="ytplayer_"]').each(function() {
        $ytid = $(this).attr('id');
        ytid = document.getElementById($ytid);

        ytid.addEventListener("onStateChange", "foo");
    });
};

И от них можно избавиться:

function onYouTubePlayerReady() {
    $('object[id^="ytplayer_"]').each(function() {
        this.addEventListener("onStateChange", "foo");
    });
};