Comprendre l'implémentation de JQuery SPA

Question

J'essaye de créer un site Web de SPA avec JQuery. Je sais comment utiliser history.pushState et $(window).on('popstate') mais j'ai quelques questions. Actuellement, j'ai un fichier router.js qui gère l'événement popstate et les liens de navigation. Je place les liens dans un attribut personnalisé (data-navId = "templates/page/page.html") ou dans href et le gère avec $(e).preventDefault(); . L'utilisateur clique sur le lien et $('.page-content').load('url', function() {}) et history.pushstate sont exécutés.

1) Suis-je obligé d'inclure le fichier router.js contenant ces fonctions dans chaque modèle? Je veux un html qui contient ces fonctions seulement. Les modèles ne doivent contenir que du code HTML et leurs scripts correspondants . J'ai réussi à accomplir cela, mais si l'utilisateur actualise la page le modèle affiche sans style ou quoi que ce soit. Est- en utilisant un hachage la réponse? Ou si l'utilisateur ferme le navigateur et a l'option "Restaurer les pages précédentes" activée le modèle sera charger avec son code html seulement.

Dans le passé, j'ai développé des pages SPA sans hachage en utilisant seulement popstate et history.pushState mais je dû inclure tous les fichiers HTML sur chaque fichier, puis en appelant $('.page-content').load(url + ' .page-content > *', function() {}); pour éviter le bug de rafraîchissement.

Je sais aussi que Facebook utilise popstate pour les navigateurs modernes et hashchange pour les plus anciens en incluant peut-être Modernizr.js ou une bibliothèque personnalisée. Mais comment le routeur fonctionne sans l'inclure dans chaque modèle?

Merci d'avance.

Answer 1

Je l'ai trouvé! Il me manquait le code principal du routeur qui est de récupérer l'URL actuelle obtenir les paramètres avec regex (ou toute autre manière) et charger le contenu de façon dynamique. Aussi j'ai fait l'erreur de pousser le chemin complet du modèle demandé (page à injecter) au lieu de le manipuler comme une chaîne de requête ou via mod_rewrite(Apache).

Source (chaîne de requête): https://stackoverflow.com/a/901144/6128301

En résumé: 1) l'utilisateur clique sur le lien, le code suivant est exécuté:

$('url').on('click', function(e) { 
    e.preventDefault(); 

    var url = $(this).attr('href'); 
    $('.injection-container').load(url + ' > * ', function() { 

     history.pushState({'state': "index?p=" + url}, "Injected Page's Title", "index?p=" + url); 

    }); 

}); 

e.preventDefault = Prévient lien par défaut (un href tag) rediriger. injection-container = la page que vous voulez charger le contenu à

url + ' > * ' = le contenu à obtenir. Asterisk représente tous les éléments. Vous pouvez également charger le contenu de la page injectée principale en utilisant: url + « > .injection-conteneur> * »

Index

est la page principale qui contient toutes les CSS et JS. Vous devez également créer un fichier router.js qui vérifie les chaînes de requête et décide quelle page sera chargée dynamiquement. Notez qu'il n'y a pas d'extension .html parce que j'ai configuré mon apache en utilisant mod_rewrite pour effacer les extensions. Vous pouvez également remplacer l'extension en récupérant l'URL (window.location.href).

La dernière chose dont vous avez besoin est ce code:

$(window).on('popsate', function() { // PageInjector function like before... })