Comment créer un système de carte efficace?

Question

J'ai un système de carte (grille) pour mon site Web. J'ai défini 40000 'champs' sur une grille. Chaque champ a une valeur XY (pour x (1-200) et y (1-200)) et un identifiant unique: fieldid (1-40000).

J'ai une zone visible de 16x9 champs. Lorsque l'utilisateur visite website.com/fieldid/422, il affiche 16x9 champs commençant par fieldid 422 dans le coin supérieur gauche. Cela suit évidemment le système XY, ce qui signifie que le champ dans la deuxième rangée, juste en dessous de # 422 est # 622.

L'utilisateur devrait être capable de naviguer vers le haut, le bas, la gauche et la droite (ce qui signifie augmenter/diminuer la valeur X ou Y en conséquence). J'ai une fonction qui convertit les valeurs XY en fieldids et vice-versa.

Tout bon jusqu'à présent, je peux:

1. Recharger la page entière lorsqu'un utilisateur clique sur un bouton de navigation gauche (obtenu ce)
2. Envoyer un ajax-demande et obtenir un jsonstring avec les nouveaux champs 16x9 (obtenu ce)

Mais je veux construire dans une sorte de système de mise en cache de sorte que les données envoyées à partir du serveur peuvent être réduits au minimum après la première charge. Cela signifierait probablement seulement l'envoi de nouvelles «lignes» ou «colonnes» de champs et leur stockage dans un certain tableau multidimensionnel javascript plus grand que le 16x9 utilisé pour l'affichage. Mais je ne peux pas le comprendre. Quelqu'un peut-il aider?

Answer 1

Je vois deux solutions possibles.

1 Si vous utilisez ajax pour obtenir de nouvelles tuiles et ne pas recharger la page entière très souvent, vous pouvez simplement utiliser un objet qui contient le contenu de chaque tuile, en utilisant ids de tuiles uniques clés, comme:

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

Lorsque l'utilisateur demande de nouvelles tuiles, vérifiez d'abord si vous les avez dans votre objet (vous savez quelles tuiles seront nécessaires pour une zone donnée), puis téléchargez uniquement ce dont vous avez besoin et ajoutez de nouvelles paires clé/valeur au cache. Évidemment, toutes les données mises en cache disparaîtront dès que la page sera rechargée par l'utilisateur.

2 Si vous rechargez la page pour chaque requête, vous pouvez diviser vos mosaïques en "fichiers" javascript séparés. Peu importe comment il serait implémenté sur le serveur - des fichiers statiques comme tile1.js, tile2.js etc, ou un script dynamique (probablement avec un cache côté serveur) comme tile.php? Id = 1, tile. php? id = 2 etc. Ce qui est important est que le serveur envoie les en-têtes HTTP appropriés et rende possible au navigateur de mettre ces requêtes en cache.Donc, quand une page contenant 144 tuiles est demandée, vous avez 144 éléments < script/>, chacun contenant des données pour une tuile et chacune sera stockée dans le cache du navigateur. Cette solution n'a de sens que s'il y a beaucoup de données pour chaque tuile et que les données ne changent pas très souvent sur le serveur, et/ou qu'il y a un coût important de génération/transfert de tuiles.

Answer 2

Vous pourriez simplement avoir un tableau de 40 000 références. Fondamentalement, les éléments de tableau vides ne prennent pas beaucoup de place jusqu'à ce que vous y mettiez quelque chose (c'est l'un des avantages d'un langage dynamiquement typé). Javascript ne sait pas si vous allez mettre un int ou un objet dans un élément de tableau, donc il n'alloue pas les éléments jusqu'à yo y mettre quelque chose. Donc, pour résumer, il suffit de les mettre dans un tableau - aussi simple que cela! Si vous ne voulez pas que l'interpréteur alloue 40 000 valeurs NULL au démarrage, vous pouvez utiliser une méthode de dictionnaire, les clés représentant les indices de tableau 1 sur 40 000.

Maintenant, les éléments inutilisés ne sont même pas alloués. Bien que si vous allez finir par remplir une partie substantielle de la carte, la méthode du dictionnaire est beaucoup moins efficace.

Answer 3

Avoir un seul tableau associatif, qui commence initialement avec des valeurs nulles.

Si l'utilisateur visite, par exemple, la grille 32x41y, vous définissez une valeur pour le tableau comme ceci:

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

(. Ceci est pseudo-code, je n'ai pas vérifié la syntaxe)

Ensuite, vous pouvez vérifier si l'utilisateur a visité les coordonnées de grille appropriées en vérifiant s'il y a une valeur dans le tableau associatif.