При хранении данных в Javascript или JSON отсутствует пункт о ненавязчивом Javascript. Одна из ключевых вещей в «ненавязчивом» - это изящное унижение, когда Javascript отсутствует, и в идеале, когда нет и CSS. По этой причине вы должны поместить данные в документ, а не в Javascript, чтобы пользователи могли его видеть.
Кроме того, вы должны представить его в виде таблицы или структуры div, которая выглядит чистой без какого-либо CSS. В этом случае таблица, вероятно, является правильной семантической структурой для представления данных такого типа. Вы можете дополнительно оформить таблицу для тех, у кого есть CSS, но нет Javascript. Затем Javascript может легко анализировать данные и помещать их в карту, но если Javascript не поддерживается, данные все равно будут отображаться.
Еще одно преимущество заключается в том, что его легко можно будет использовать роботам, таким как поисковые системы, и всем, кто хочет написать сторонний мэшап. (Вы можете заметить, что это недостаток, если вы не хотите делиться ими, но если кому-то нужны данные, они все равно получат их со страницы.) Они также будут в отличной форме для слабовидящих пользователей, использующих программы чтения с экрана. .
Теперь вы не хотите делать таблицу видимой по умолчанию, поэтому вам придется скрыть ее с помощью CSS. Но что, если у пользователя есть CSS, но нет Javascript? Тогда вы, вероятно, захотите показать таблицу ... это то, что грациозно унизительно. Поэтому вы должны сделать таблицу видимой в CSS (т.е. не скрывайте ее явно), а затем запустить Javascript, чтобы скрыть ее при инициализации:
document.getElementById("geodata").style.display = "none";
или некоторый специфичный для библиотеки эквивалент, например
$("geodata").hide()
Единственная проблема заключается в том, что если вы запустите это в document.onload (), таблица будет видна в течение нескольких секунд. Поэтому включите его в тег скрипта сразу после вывода таблицы. Это одна из ситуаций, когда можно включить тег HTML в HTML. Если вы это сделаете, то избегайте использования специфичного для библиотеки кода, поскольку библиотека может еще не загрузиться к моменту оценки вашего встроенного скрипта.
Теперь у вас есть все случаи:
- JS и CSS - данные представлены на карте
- нет JS, но CSS - данные представлены красиво в таблице
- без JS и без CSS - данные представлены в необработанной HTML-таблице
(другой случай, JS и отсутствие CSS возникают редко, вы можете разобраться с этим, если хотите, но отчасти бессмысленно)
Ваш код Javascript также будет чистым, потому что он анализирует аккуратно сконструированную структуру данных. Вы можете легко проверить таблицу во время разработки, чтобы увидеть, имеет ли она правильные данные и правильно ли карта отображает эти данные.