Как создать эффективную систему карт?

Question

У меня есть система карт (сетка) для моего сайта. Я определил 40000 «полей» на сетке. Каждое поле имеет значение XY (для x (1-200) и y (1-200)) и уникальный идентификатор: fieldid (1-40000).

У меня есть видимая область 16x9 полей. Когда пользователь посещает website.com/fieldid/422, он отображает 16x9 полей, начиная с fieldid 422 в верхнем левом углу. Это очевидно следует системе XY, что означает, что поле во втором ряду, прямо под # 422 - это # ​​622.

Пользователь должен иметь возможность перемещаться вверх, вниз, влево и вправо (что означает увеличение / уменьшение значения X или Y соответственно). У меня есть функция, которая преобразует значения XY в fieldids и наоборот.

Пока все хорошо, я могу:

1. Перезагрузить всю страницу, когда пользователь нажимает кнопку навигации (получил это)
2. Отправьте ajax-запрос и получите jsonstring с новыми полями 16x9 (получил это)

Но я хочу встроить некую систему кеширования, чтобы после первой загрузки данные, отправляемые с сервера, можно было минимизировать. Вероятно, это будет означать только отправку новых «строк» ​​или «столбцов» полей и сохранение их в некотором многомерном массиве JavaScript больше, чем 16x9, используемый для отображения. Но я не могу понять это. Может ли кто-нибудь помочь?

Answer 1

Я вижу два возможных решения.

1 Если вы используете ajax для получения новых плиток и не очень часто перезагружаете всю страницу, вы можете просто использовать объект, содержащий содержимое каждой плитки, используя уникальные идентификаторы плиток в качестве ключей, например:

var mapCache = { 
    '1' : "tile 1 data",
    '2' : "tile 2 data"
    //etc.
}

Когда пользователь запрашивает новые плитки, сначала проверьте, есть ли они в вашем объекте (вы знаете, какие плитки понадобятся для данной области), затем загрузите только то, что вам нужно, и добавьте новые пары ключ / значение в кэш. Очевидно, что все кэшированные данные исчезнут, как только пользователь перезагрузит страницу.

2 Если вы перезагружаете страницу для каждого запроса, вы можете разделить свои плитки на отдельные «файлы» javascript. Неважно, как это будет реализовано на сервере - статические файлы, такие как tile1.js, tile2.js и т. Д., Или динамический скрипт (возможно, с некоторым серверным кешем), такой как tile.php? Id = 1, tile. php? id = 2 и т. д. Важно то, что сервер отправляет правильные заголовки HTTP и позволяет браузеру кэшировать эти запросы. Таким образом, когда запрашивается страница, содержащая 144 фрагмента, у вас есть 144 элемента , каждый из которых содержит данные для одного фрагмента, и каждый из них будет храниться в кэше браузера. Это решение имеет смысл только в том случае, если для каждой плитки имеется много данных, а данные на сервере не очень часто меняются или / и при этом существует значительная стоимость генерации / передачи листов.

Answer 2

Иметь один ассоциативный массив, который изначально начинается с нулевых значений.

Если пользователь посещает, скажем, сетку 32x41y, вы устанавливаете значение для массива следующим образом:

if (!(visitedGrids.inArray('32'))
{
   visitedGrids['32'] = {}
}
visitedGrids['32']['41'] = data;

(Это псевдокод; я не проверял синтаксис.)

Затем вы можете проверить, посетил ли пользователь соответствующие координаты сетки, увидев, есть ли значение в ассоциативном массиве.

Answer 3

Вы можете просто иметь массив из 40000 ссылок. По сути, пустые элементы массива не занимают много места, пока вы на самом деле не поместите в них что-то (это одно из преимуществ динамически типизированного языка). Javascript не знает, собираетесь ли вы помещать int или объект в элемент массива, поэтому он не выделяет элементы, пока вы не вставите в них что-то. Подводя итог, просто поместите их в массив - это просто!

В качестве альтернативы, если вы не хотите, чтобы интерпретатор выделял 40000 NULL при запуске, вы можете использовать метод словаря, при этом ключами являются индексы массива 1 на 40000. Теперь неиспользуемые элементы даже не выделяются. Хотя, если вы собираетесь заполнить значительную часть карты, метод словаря будет гораздо менее эффективным.