Я так думаю, хорошие штуки не имеют обыкновения ломаться, если их специально не ломать.
А разработчики YouTube занимаются именно тем, что со всего размаху ломают установленные принципы разработки через колено.
С момента возникновения DOM программистов учили: «
На странице должен быть только один элемент с определённым атрибутом id!». И показывали на примерах, какие ошибки могут возникать, если на этот принцип наплевать.
Вот сколько ожидается элементов в результате выполнения метода
document.getElementById('content'); ?
Либо 1, если элемент есть, либо null, если элемента нет, правильно?
А какой длины ожидается array-like объект в результате выполнения метода
document.querySelectorAll('#content'); ?
По идее, точно так же: 1 или 0, да?
А не хотите ли 28 (
двадцать, сука,
восемь!)⁈
Именно столько возвращает этот метод на странице с просматриваемым видео, так как в том обфусцированном коде где-то сидит команда «Создать элемент с
id="content" и поместить туда превьюшку и описание предлагаемого видео», и никому из программистов почему-то не пришло в голову, что это ж будет исполняться в цикле и одинаковых айдишников наклепается столько, сколько будет потом подгружено предлагаемых видео…
Плюс один, который с самого начала имеется на странице и в котором содержатся основные элементы, включая те самые
#primary и
#secondary!
Вопрос — в каких альтернативных университетах учились альтернативно обученные программисты YouTube, почему им не показывали известных примеров и почему им никто ничего не говорит за ломание принципов кодинга?
А в базы данных они не хотят неуникальные индексы видео напихать? А то берегитесь, товарищи блогеры: придёт такой альтернативно одарённый и полетят все ваши плейлисты по кочкам да закоулочкам.
И это — не случайная ошибка. Это у них сейчас такой принцип разработки. Я проверил и у них повторяются на странице 144 айдишника. Не 144 раза повторяются, а 144
штуки от 2 до
142 145 раз‼
Полный список в спойлере.
action-button: 5
action-buttons: 10
action-menu: 9
additional-metadata-line: 40
ads-info-button: 4
always-shown: 3
arrow-drop-down: 2
attached-survey: 40
author-comment-badge: 9
author-text: 9
author-thumbnail: 10
avatar: 41
avatar-link: 40
banner: 4
body: 10
button: 119
button-shape: 50
buttons: 41
byline-container: 40
cancel: 2
channel-name: 41
chevron-left: 2
chevron-right: 2
collapsible: 3
comment: 9
comment-chip-container: 9
comment-chip-price: 9
container: 51
content: 57
content-header: 3
content-text: 9
contentWrapper: 2
contents: 26
contextual-info: 4
continuations: 3
count: 2
country-code: 2
creator-heart: 9
description: 4
details: 40
dislike-button: 9
dismissed: 40
dismissed-content: 40
dismissible: 40
dropdown: 2
edit-dialog: 9
end: 2
end-actions: 3
equalizer: 80
expander: 11
flexible-item-buttons: 50
footer: 7
ghost-cards: 4
guide-button: 2
guide-icon: 2
header: 26
header-author: 9
header-contents: 3
header-description: 3
header-top-row: 3
hover-overlays: 83
icon: 5
icon-label: 2
img: 59
info: 6
information-button: 4
interaction: 142
item-with-badge: 4
items: 7
label: 5
label-icon: 2
left-arrow: 2
length: 40
less: 10
like-button: 9
linked-comment-badge: 9
logo: 3
logo-icon: 4
main: 9
menu: 49
meta: 41
metadata: 40
metadata-line: 40
more: 10
mouseover-overlay: 43
navigation-button: 4
next-label: 3
next-video-title: 3
notification: 2
overflow-menu: 3
overlay-text: 80
overlays: 85
paid-comment-background: 9
paid-comment-chip: 9
pinned-comment-badge: 9
player-container: 3
playlist: 2
playlist-action-menu: 3
playlist-actions: 3
playlist-thumbnails: 40
progress: 19
published-time-text: 9
publisher-container: 3
repeat: 145
replies: 9
reply-button-end: 9
reply-dialog: 9
right-arrow: 2
save-button: 3
scroll-container: 2
search: 3
sections: 2
separator: 80
spinner: 4
spinner-container: 3
spinnerContainer: 10
sponsor-comment-badge: 9
start: 2
start-actions: 3
subheader: 4
subtitle: 10
subtitle-complex: 4
text: 123
text-container: 41
thumbnail: 125
thumbnail-underlay: 40
ticks: 2
time-status: 76
title: 16
title-container: 5
title-text: 4
toolbar: 9
tooltip: 73
top-level-buttons-computed: 50
top-row-buttons: 3
trailing-button: 3
trailing-icon: 3
trigger: 2
video-info: 40
video-title: 40
video-title-link: 40
view-more: 40
visibility-button: 4
vote-count-middle: 9
Тут надо удивляться не тому, что в старых браузерах отображение ломается, а каким чёртом это вообще работает в любых, особенно новейших, заточенных под "безопастность" и иногда запрещающих картинку из той же с html-ки папки в canvas загрузить. А одинаковые айдишники элементов (что чревато, скажем, запуском кода вместо отображения картинки) — да пожалуйста! Даже warning не напишем!
