Gamme d'utilisation:
Pour des projets de gestion de l'information tels que OA, MIS, ERP, etc., le site Web n'est pas pris en compte pour le moment.
Problèmes rencontrés:
Pour terminer un projet, vous devez souvent faire référence à de nombreux fichiers JS, tels que jQuery.js, EasyUi, etc. Il existe également des colonnes de fichiers JS que j'ai écrits, alors comment ces fichiers peuvent-ils être chargés de manière pratique? Si le fichier change, comment le client peut-il mettre à jour le cache à temps? Il serait encore mieux si l'efficacité du fonctionnement du point pouvait être améliorée.
Cible:
1. Il peut facilement référencer les fichiers JS.
2. Essayez d'utiliser divers caches pour éviter la lecture fréquente des fichiers du serveur.
3. Si le fichier JS est mis à jour, ajouté ou réduit, le client doit être en mesure de mettre à jour automatiquement et immédiatement.
4. Réutilisation des fichiers JS.
Structure de la page:
Généralement, des projets tels que OA et MIS sont principalement mis en œuvre à l'aide de Frameset ou IFRAME, qui apporte la page des concepts de la mère et de la page enfant. Nous pouvons l'utiliser pour faire des histoires.
Les pages Web peuvent être divisées en trois parties: shell, page d'accueil, étiquette, liste de données, formulaire (ajouter, modifier). Parce que la méthode de chargement JS ici doit utiliser cette structure de page, et c'est précisément pour cette raison que le site Web n'est pas pris en charge pour le moment.
Il semble familier de voir cette image. Oui, c'est la structure.
texte
De nos jours, en ce qui concerne les applications de version Web, il s'appuie de plus en plus sur divers JS, tels que JQuery, Easyui, My97, etc., ainsi que divers JS écrits par moi-même. De plus en plus de fonctions à implémenter, de plus en plus de JS doivent être utilisées et plus de fichiers JS sont modifiés fréquemment. Tant de problèmes surviennent, comme écrire beaucoup de <script src = ""> pour chaque page. C'est trop gênant. Combien de pages avez-vous besoin pour changer pour ajouter un nouveau fichier JS? Comment mettre à jour le fichier JS immédiatement? Comment rendre le client charger JS plus rapidement. Certains fichiers JS ont également des dépendances. Comment assurer l'ordre de chargement? Cet article consiste à partager ma solution.
Chargement dynamique
Il est évidemment gênant d'utiliser <Script> pour charger JS sur la page, alors que dois-je faire? Après y avoir réfléchi, j'utilise toujours un chargement dynamique pour le résoudre. J'ai également recherché en ligne et j'ai constaté qu'il existe de nombreuses méthodes, y compris celles écrites par elles-mêmes et celles organisées en cadres (tels que Seejs). Parfois, je sens toujours que je suis plus habile à en faire un, donc je prévois d'en écrire un seul.
Comment charger dynamiquement? En utilisant la méthode fournie par jQuery? C'est OK, mais la page doit se référer à jQuery et au JS que j'ai écrit pour charger le fichier JS. En d'autres termes, si vous devez écrire deux <cript> sur une page, ce sera gênant. Si vous pouvez en écrire un, vous ne devez pas en écrire deux. Bien que ce soit juste un de plus, il est vraiment difficile d'en avoir un de plus. J'ai donc décidé de rédiger une petite méthode de chargement dynamique par moi-même.
Que dois-je faire si je ne peux pas écrire? Tante Baidu vient et aide. Après avoir cherché toutes sortes de choses, j'ai finalement trouvé une méthode relativement idéale, donc je vais l'utiliser.
La copie de code est la suivante:
/ * Les fonctions qui implémentent le chargement dynamique de JS proviennent d'Internet. Après une petite modification, il peut être compatible avec IE10 * /
var chargescript =
{
$$: fonction (id) {return document.getElementById (id); },
TAG: fonction (élément) {return document.getElementsByTagName (élément); },
CE: fonction (élément) {return Document.CreateElement (élément); },
js: fonction (url, rappel) {
var s = charscript.ce ('script');
s.type = "text / javascript";
S.Src = URL;
if (document.DocumentMode == 10 || document.DocumentMode == 9) {
S.OnError = s.onload = chargé;
} autre {
S.OnreadyStateChange = Ready;
S.OnError = s.onload = chargé;
}
Loadscript.tag ('Head') [0] .APPENDCHILD (S);
fonction ready () {/*ie7.0/ie10.0*/
if (s.readystate == 'chargé' || s.readystate == 'complet') {
callback ();
}
}
fonction chargé () {/*chrome/ie10.0*/
callback ();
}
}
};
Commande de chargement
Le nouveau code est terminé. Ce qui suit est de savoir comment charger d'autres fichiers JS. Puisqu'il y a beaucoup de fichiers et qu'il y a certaines dépendances, j'y réfléchirai et je ferai un dictionnaire de fichiers JS, puis je passerai un ordre de chargement et le chargera dans cet ordre.
Pour être plus stable, j'ai décidé d'utiliser la méthode de chargement une par une, c'est-à-dire en chargeant un js puis en chargeant un autre JS. Cela garantit les dépendances. Bien sûr, l'inconvénient est que la vitesse de chargement sera plus lente. Généralement, les pages Web peuvent être chargées de plusieurs fichiers JS, ce qui sera plus rapide.
Utiliser le cache
Généralement, les navigateurs auront un cache pour diverses ressources (tels que les pages Web, les images, JS, CSS, etc.), et ne les téléchargeront plus sur le serveur s'ils les ont déjà. Cela semble bon, mais il y a deux problèmes:
A. Comment le navigateur détermine-t-il si le fichier JS mis en cache est le dernier?
B. Le fichier JS a été mis à jour. Comment forcer le navigateur à mettre à jour?
Comment le navigateur juge-t-il? Je ne sais pas grand-chose sur les étapes spécifiques, mais je sais qu'il y a une étape pour aller au serveur pour demander si le fichier JS I Cache est le dernier, puis je peux déterminer si le cache local est le dernier. Si c'est le dernier, je ne me dérangerai pas. Si ce n'est pas le cas, je téléchargerai le dernier. C'est-à-dire, même si le client a déjà un cache de fichiers JS, le navigateur doit confirmer s'il est le dernier et ira toujours au serveur pour demander. C'est une lutte. Bien sûr, en général, ce processus sera très rapide, mais parfois ce processus sera très lent.
Il vaut donc mieux essayer d'éviter de charger JS. Ainsi, la "réutilisation des fichiers JS" est introduite.
Mettre à jour le fichier JS
Le fichier JS a été mis à jour, mais le navigateur utilise toujours le fichier JS précédent car il a mis en cache, et il est têtu que le fichier JS mis en cache est le dernier. Que dois-je faire?
Le moyen le plus simple est de charger JS avec un numéro de version suivi. S'il y a une mise à jour, le numéro de version sera +1. Par exemple, xxx.js? V = 1. Une fois le fichier js mis à jour, il est xxx.js? V = 2. De cette façon, JS sera certainement mis à jour.
Cela semble simple, mais comment ajouter ce numéro de version? Comment mettre à jour le numéro de version lui-même?
Réutilisation
Nous devons d'abord examiner l'image ci-dessus, qui est la structure de la page, avec une page de shell (ou une page d'accueil), que nous appelons la page parent. Il y a plusieurs pages chargées par IFRAMES, et nous les ajoutons aux sous-pages.
L'approche générale consiste à charger jQuery.js sur la page parent, puis jQuery.js sur la page enfant. Bien sûr, lorsque le sous-page charge jQuery.js, il est directement extrait du cache et ne dérange généralement plus le serveur.
Cependant, depuis que la page parent a été chargée, pourquoi la page de l'enfant doit-elle être chargée à nouveau? Est-il acceptable de le charger directement dans la page parent? J'ai cherché en ligne et personne ne semblait le faire. Peut-être que je suis trop alternatif, je veux juste implémenter cette méthode. L'avantage est que tous les fichiers JS sont chargés dans la page parent et que la page enfant utilise directement le JS chargé dans la page parent, de sorte que la page enfant n'a pas besoin de gâcher les fichiers JS. Cela peut également être plus efficace. Après tout, même si vous utilisez le cache pour charger, vous devez porter un jugement. Ensuite, lors d'une action de chargement, il y aura encore un peu de perte. Plus il y a de fichiers JS, plus il sera évident.
Alors, comment l'implémenter semble simple d'y penser.
Utilisez jQuery dans la page parent
Var aa = $ ('div'); // Trouvez tous les divs dans la page parent
Est-ce possible dans la sous-page?
Var bb = top. $ ('Div'); // Le div peut être trouvé, mais ce n'est pas la div de la page de l'enfant mais la div dans la page parent.
Que se passe-t-il? La raison en est la plage de recherche. JQuery a trois paramètres. Nous n'utilisons généralement que le premier, et le second est ignoré. Alors, quel est le deuxième paramètre? C'est la plage de recherche. Où jQUERY recherchera-t-il en cas de spécification? Recherchez dans la page qui charge jQuery, au lieu de rechercher dans la page qui appelle $.
La solution est également très simple, il suffit d'ajouter un paramètre
Var bb = top. $ ('Div', document); // Spécifiez la plage de recherche: document de la sous-page
Attendez, cela semble très ennuyeux. Lors de l'écriture d'un script, nous devons également déterminer si ce script est exécuté sur la page parent ou sur la page enfant?
Ok, faites un package simple pour éviter ce problème. Écrivez une fonction dans la sous-page
La copie de code est la suivante:
fonction $ (p1) {
Retour top. $ (P1, document);
}
Ok, le travail est-il fait? Bien sûr que non! Pour prédire ce qui se passe ensuite, veuillez écouter la prochaine ventilation.
PS: Aperçu du prochain épisode. Il s'agit du code d'implémentation spécifique, et il y a quelques idées et idées. Je ne sais pas si vous avez autre chose à savoir. Si oui, veuillez répondre ci-dessous. Merci d'abord.