Structure de fichier pour une application Web basée sur javascript

Question

Je prévois d'écrire une application Web basée sur javascript. Je me demande quelle est la meilleure façon de l'implanter en termes de structure de fichiers.

Il existe une page principale (main.html) contenant un menu et une section div principale. La façon dont cela fonctionne est simple: lorsque l'utilisateur clique sur l'un des liens dans le menu (par exemple «Page 1»), le contenu de la section div est actualisé avec le contenu du fichier page1.html. Ceci est fait en utilisant javascript (jquery). Si l'utilisateur clique sur 'Page 2', le contenu du fichier page2.html est chargé dans la section div, etc.

Chaque page a son propre code javascript et comme je préfère le garder séparé j'ai mis en place une sorte de 'code derrière' comme dans asp.net:

page1.html:
< script type = "text/javascript" src = "page1.js"> </script>
< ... code html ...>

page2.html:
Type < script = "text/javascript" src = "page2.js"> </script>
< ... code html ...>

Lorsque l'utilisateur clique sur 'Page 1', le contenu du fichier page1.html est chargé dans la section div principale de main.html. Comme page1.html fait référence à page1.js, le code javascript dans page1.js est également chargé.

Cela semble fonctionner correctement mais je me demande si c'est la meilleure façon de l'implémenter. À un moment donné, je pensais à référencer tous les fichiers javascript dans main.html Cela fonctionnerait bien, mais cela signifierait que tous les fichiers javascript devraient être chargés en mémoire, même s'ils ne seront pas utilisés. Avec la 1ère approche, un fichier javascript est seulement chargé en mémoire avant d'être réellement utilisé.

Des idées? Quelles sont les «meilleures pratiques» pour cela? Gardez à l'esprit qu'il s'agit d'une application Web (par opposition à un site Web). Il sera disponible sur Internet mais seulement pour certains utilisateurs (et sera protégé par mot de passe) donc je ne me soucie pas du référencement, etc.

Answer 1

Cela pourrait ne pas vous concerner mais vous le savez d'un point de vue SEO C'est une idée terrible. Votre site sera une version Javascript d'un site flash. Il n'y aura qu'une seule page en ce qui concerne les moteurs de recherche.

C'est pourquoi les sites basés sur des cadres, qui étaient très populaires pendant un certain nombre d'années, ont pratiquement disparu.

Answer 2

Le chargement des fichiers JavaScript est synchrone, ce qui affecte négativement le temps de chargement de la page/la réactivité perçue.

Pour cette raison, je pense qu'il est préférable de fusionner tous les scripts en un seul fichier, le compresser avec le compresseur YUI et envoyer gzippé. Vous obtiendrez la meilleure compression et le moins de surcharge HTTP de cette façon, et JS en cache n'interrompra pas le chargement des autres pages. Pour les scripts dynamiques spécifiques à une page, utilisez <script>…</script>.

Answer 3

@porneL

il existe des moyens et des moyens pour obtenir JS charger async'ly (création de balises de script spécifique) mais ceux-ci pourraient être considérées comme dangereuses

@OP

Je suis d'accord avec les autres que cela semble être une mauvaise idée du point de vue SEO et accessibilité, un problème de performance d'un point de vue pratique (il y a des façons de bootstraper en code mais beaucoup d'effort pour un gain minimal) et d'efficacité discutable . Comme un exercice hypothétique, j'imagine que la solution gzip de porneL est la meilleure. Fondamentalement, je pense que vous aurez du mal à trouver les meilleures pratiques pour quelque chose que peu pratiquent.