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

Question

Анатолий @Tolly

JavaScript

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

Пишу свой плеер для 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.

Вопрос задан более трёх лет назад
195 просмотров

6 комментариев

Подписаться 2 Простой 6 комментариев

alex @potapchino

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

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

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

Написано более трёх лет назад

alex @potapchino

Анатолий, да какая статья, вам пару книжек бы по 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

Написано более трёх лет назад

Анатолий @Tolly Автор вопроса
я не пользуюсь jQuery, пример не совсем понял, так как извините за выражение хрень какая-то. Объекты у меня и так создаются, а дальше что?
players.player1.iframe players.player2.vid players.player34.name

Это что? Как это относится к моему вопросу? Вам бы не мешало больше чем пару книжек почитать.
Написано более трёх лет назад
alex @potapchino

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

я не пользуюсь jQuery
это тут при чем?

Это что? Как это относится к моему вопросу?
непосредственно относится, я решил вашу проблему без eval

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

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

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

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

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

Написано более трёх лет назад

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 20 часов назад
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 20 часов назад
- 88 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 107 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 80 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 66 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 49 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- вчера
- 63 просмотра
1

ответ
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 33 просмотра
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Доработать сайт на React + Nest

19 апр. 2024, в 12:05

1500 руб./в час

Разработать программу в CodeSys

19 апр. 2024, в 12:00

250 руб./за проект

Сделать мобильную версию сайта Next.js/React

19 апр. 2024, в 11:54

500 руб./в час

создать один объект, где полями будут id плееров
Пример можно?
Нужен полный пример, от того как создать такой объект и как к нему потом обращаться.
Ну либо ссылку на статью.
Анатолий, да какая статья, вам пару книжек бы по 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

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

я не пользуюсь jQuery
это тут при чем?

Это что? Как это относится к моему вопросу?
непосредственно относится, я решил вашу проблему без eval
Ну поясните тогда:

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

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

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

Answer 1 · 2018-12-17 11:58:28

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

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();

Answer 2 · 2018-12-17 12:27:55

profesor08 @profesor08 Куратор тега JavaScript

https://learn.javascript.ru/

Ответ написан более трёх лет назад

1 комментарий

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт