Inclure/organiser du HTML dans un grand projet javascript

Question

J'ai une application web assez grande, avec plusieurs mini-applets sur chaque page. Ces applets sont presque toujours des applications jquery identiques. Je suis à la recherche de conseils sur la façon dont je devrais organiser/inclure de plus petites parties de ces applications jquery dans mon plus grand projet. Par exemple, chaque application dispose de plusieurs onglets indépendants. Par exemple, chaque application dispose de plusieurs onglets indépendants. Si possible, je voudrais stocker chacun des onglets dans un fichier .html séparé, car cela facilite le développement.

Mes exigences sont les suivantes: 1) Tous les onglets html sont chargés à la fin du client lors du chargement de la page. Je voudrais éviter tout retard en demandant dynamiquement l'onglet html.

2) Si possible, je souhaite minimiser les données brutes envoyées. Par exemple, il serait préférable d'envoyer chaque onglet 1 fois, au lieu d'envoyer chaque onglet 10 fois s'il y a dix applets sur cette page.

Questions: 1) Quelles sont mes options pour 'y compris' les fichiers HTML/code javascript 2) Des conseils pour garder mon développement simple dans cette situation? Sûrement il doit y avoir une meilleure façon que juste éditer un fichier html massif lorsque vous travaillez avec de grandes pages.

Answer 1

Il est un peu difficile de comprendre exactement ce que vous demandez, mais un point qui doit certainement être fait est que vous pouvez utiliser la mise en cache client, si vous l'installez directement sur votre serveur, vous pouvez dire à la client de charger le même fichier plusieurs fois, mais le client ne téléchargera qu'une copie et réutilisera cette copie. (La chaîne de requête doit également être identique, mais la chaîne de hachage peut différer)

Les navigateurs et l'utilisateur n'auront pas de problème avec un gros fichier HTML (du moins pas tant que nous parlons < 1MB), avec la mise en cache c'est probablement la méthode qui a le moins de bande passante. Mais si vous préférez travailler avec des fichiers plus petits, vous pouvez configurer un script php pour concaténer vos fichiers de développement, faites-le simplement écrire sur le disque plutôt que de servir directement, et servir le fichier résultant.

Answer 2

Le chargement de contenu avec JavaScript n'est pas une bonne idée car certaines personnes ne pourront pas y accéder.

Et si vous voulez que votre page soit chargée avant vos scripts, placez simplement les éléments s juste avant. Et bien sûr, placez vos scripts dans des fichiers distants afin que les navigateurs utilisent le cache.

@eBusiness: S'il utilise Ajax, je ne pense pas que les navigateurs utiliseront le cache ... Seul IE récupère la page de son cache avec XHR.

Answer 3

Le moteur de templating PURE javascript a été utile pour moi: http://wiki.github.com/pure/pure/pure-version-2-release-notes

Il utilise les branches du DOM comme ses modèles - vous pouvez utiliser une partie existante de la page, ou demander le code HTML de modèle sur XHR quand il est nécessaire (ou avant). PURE applique des données JSON au modèle pour afficher le résultat - vous pouvez le faire automatiquement (en mappant les classes dans le HTML sur les propriétés du JSON), ou obtenir un contrôle précis en utilisant un ensemble de règles, également stockées en tant que JSON.

Le rendu est TRES rapide et relativement facile à configurer.

Ainsi - dans votre exemple, vous auriez:

• Un ensemble de HTML pour votre « onglet » - soit inclure dans la page ou demander avec XHR.
• Récupérez le contenu de chaque onglet sur XHR en tant qu'objet JSON - beaucoup moins de données que l'envoi de contenu HTML +
• Rendez le JSON avec le modèle d'onglet là où vous le souhaitez sur la page.