Есть ли возможность отказаться от eval в моем случае и как?

Question

[Анатолий]

Пишу свой плеер для youtube, вызов плеера:

<div class="youtube_player" data--video="id:'player1',videoId:'_k9TlsI102g'"></div>

т.е. id плеера беру из атрибутов тега, создаю объект вида:
playerInfo.id='player1'
playerInfo.videoId='_k9TlsI102g'

далее создаю объект с именем id

eval(`var ${playerInfo.id} = {};`);
eval(`${playerInfo.id}.iframe = document.getElementById(playerInfo.id);`);
eval(`${playerInfo.id}.vid = document.getElementById(playerInfo.id).parentNode;`);

и далее еще порядка 300 строк кода, который мне нужно обернуть в eval

Посмотрел на js других плееров, они совсем не используют функцию eval, как они из строки получают переменную и как к ней потом обращаются?
А то чувствую, что я просто утону в обертках eval.

Comments

[alex]

создать один объект, где полями будут id плееров

[Анатолий]

Пример можно?
Нужен полный пример, от того как создать такой объект и как к нему потом обращаться.
Ну либо ссылку на статью.

[alex]

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

eval(`var ${playerInfo.id} = {};`);

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

пример на псевдокоде

<div class="youtube_player" data-video="id:'player1',videoId:'_k9TlsI102g'"></div>
<div class="youtube_player" data-video="id:'player2',videoId:'_k9TlsI102g'"></div>
<div class="youtube_player" data-video="id:'player3',videoId:'_k9TlsI102g'"></div>
<div class="youtube_player" data-video="id:'player4',videoId:'_k9TlsI102g'"></div>

// делаете выборку всех элементов
youtubePlayers = querySelectorAll('.youtube_player')

// делаете из неё объект (например через .reduce()),
//   где полями этого объекта будут id'шники из data-атрибутов
players = youtubePlayers.reduce((output, player) => {
//   извлекаете строку с данными
  dataString = player.dataset.video
  
//   парсите эту строку как нибудь,
  parsedData = myMagicParser(dataString)
  
//   на выходе должны получится например две переменные, что-то в духе:
  iframeID = parsedData.id
  videoID = parsedData.videoId
  
//   далее собственно создаете это самое поле
//     и кладете в него все что вам нужно
  output[iframeID] = {
    iframe: $('#iframeID'),
    vid: $('#iframeID').parentNode,
    name: 'foo'
  }
  
//  возвращаете аккумулятор (см. как работает .reduce() в js)
  return output
}, {})

// ну и далее обращаетесь к нужному плееру по его id
players.player1.iframe
players.player2.vid
players.player34.name

[Анатолий]

я не пользуюсь jQuery, пример не совсем понял, так как извините за выражение хрень какая-то. Объекты у меня и так создаются, а дальше что?

players.player1.iframe
players.player2.vid
players.player34.name

Это что? Как это относится к моему вопросу? Вам бы не мешало больше чем пару книжек почитать.

[alex]

Анатолий, то что вы не поняли, не означает, что то, что я написал - хрень. я каждую строку кода прокомментировал.

я не пользуюсь jQuery

это тут при чем?

Это что? Как это относится к моему вопросу?

непосредственно относится, я решил вашу проблему без eval

[Анатолий]

Ну поясните тогда:

players.player1.iframe
players.player2.vid
players.player34.name

players - это объект, это ясно
а дальше перечисляются id: player1, player2,..player34 - вот это что за хрень?
вы предлагаете для 100 плееров написать 100 строк кода?

или тут написано, то что я не вижу

Answer 1

[Анатолий]

Вот нашел вариант:

var a = 'test';
    window[a] = 'Привет';
    alert(window.test); // Привет
    window.test = {}
    window.test.value = 'Секрет';
    alert(window.test.value); // Секрет

где вместо window может и другой элемент, в пределах которого, нужна переменная.

Решение пока не отмечаю решением, может кто-то еще что-то дельное подскажет.

В моем случае window[playerInfo.id].playVideo(); прекрасно работает.

Еще вариант можно простоthis[playerInfo.id].playVideo();

Comments

[Константин Китманов]

Так и есть правильно. Только не забудьте, что this это не всегда window.

[Анатолий]

знаю, спс

Answer 2

[profesor08]

https://learn.javascript.ru/

Comments

[Анатолий]

Очень информативно и все по вопросу, спасибо.