Utilisez headjs pour gérer et charger js afin d'améliorer la vitesse de chargement du site Web

Il existe de nombreux chargeurs de modules js matures, tels que requirejs et seajs, mais pour certains petits projets, leurs fonctions peuvent être trop "puissantes". Peut-être en voulons-nous juste un qui puisse charger dynamiquement la fonction js, peut-être voulons-nous juste faire semblant. que la page que nous écrivons ne contient pas beaucoup de choses comme . Les deux chargeurs js mentionnés précédemment mettent l'accent sur la modularité, c'est-à-dire l'organisation et la gestion des fichiers js, et sont plus adaptés aux grands projets.

Comme je viens de le dire, je veux juste avoir un chargeur de fichiers js, et j'ai juste besoin de lui fournir l'adresse d'un fichier js ? Entrez ensuite notre thème, utilisez headjs. headjs est en fait un ensemble complet d'outils, mais ce que je veux juste vous présenter est sa fonction Javascript Loader. Voici son utilisation de base :

head.js("/path/to/file.js");

L'utilisation la plus simple est de lui fournir l'adresse d'un fichier js comme paramètres, puis il se chargera silencieusement et de manière non bloquante en coulisses. Quant au moment où il sera chargé et disponible, personne ne le sait.

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

L'utilisation la plus basique, en plus de fournir un paramètre d'adresse, fournit également une fonction de rappel comme deuxième paramètre. Une fois le js chargé, la fonction de rappel est appelée. Vous pouvez écrire le code qui dépend du js dans la fonction de rappel.

head.js("file1.js", "file2.js", ... "fileN.js");

Fournissez plusieurs adresses de fichiers js, ces js seront exécutés dans Chargement parallèle, mais ces fichiers seront exécutés dans l'ordre donné par les paramètres. Par exemple, même si file2.js est chargé avant file1.js, il attendra que file1.js soit chargé et exécuté.

head.js("file1.js", "file2.js", function() {
  
});

Chargez plusieurs js en parallèle et exécutez-les dans l'ordre des paramètres Lorsque tous les js sont prêts, la fonction de rappel est exécutée.

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

Plusieurs js sont chargés en parallèle, et celui qui le charge en premier sera exécuté en premier

head.js("file1. js ").js("file1.js").js("file3.js");

Méthode d'appel en chaîne de la méthode précédente

Dans ce cas, utilisez headjs pour charger le js fichier C'est fondamentalement suffisant, et il peut également gérer les dépendances. Si vous continuez à installer B et à construire un site web, en espérant utiliser tous les effets spéciaux, trouvez un plug-in jquery ici, trouvez-en un autre là, bref, vous allez créer beaucoup de fichiers avec des dépendances complexes, que se passera-t-il ? gérer? Est-il nécessaire de demander ? Les utilisations mentionnées ci-dessus peuvent complètement le résoudre. Mais ensuite j'y ai pensé, puisque j'ai installé B, installons-le jusqu'à la fin. Maintenant, ce n'est pas un module populaire ou quelque chose du genre, alors installons le module entier, mais ce n'est pas aussi compliqué que commonJS le dit, c'est-à-dire définir un module. , puis stipuler que ce module a De quoi sont composés les fichiers js, quelles sont les dépendances entre eux, etc. Alors faisons-le. headjs utilise le protocole MTI. Cela ne devrait poser aucun problème de le modifier. Diaosi fait semblant d'être à nouveau grand, riche et beau. En fait, c'est une modification, mais il vaut mieux dire qu'il s'agit d'ajouter quelques morceaux de code, et des fonctions telles que le chargement des dépendances sont entièrement implémentées à l'aide de l'API headjs. .

Ici, j'ai ajouté deux nouvelles méthodes à headjs. L'une est add(name, file, preload) pour ajouter un module. Le paramètre name est le nom du module et file est l'adresse du fichier js à utiliser. S'il y a plusieurs fichiers et qu'il y a des dépendances, le fichier peut être un tableau. Les éléments de ce tableau sont les adresses de fichiers utilisées et les dépendances sont effectuées dans l'ordre des éléments du tableau. Le troisième paramètre preload permet de préciser s'il faut précharger le fichier du module. S'il est faux, le fichier sera chargé lors de l'utilisation du module. S'il est vrai, le fichier utilisé sera chargé immédiatement lors de la définition du module. la valeur par défaut est false

L'autre est use(name, callback), cette méthode est utilisée pour utiliser des modules. name est le nom du module défini à l'aide de la méthode add() et callback est la fonction de rappel appelée après le chargement du module.

Nous pouvons donc utiliser des headjs comme ceci :

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

S'il y a plusieurs modules, le code de définition du module peut être écrit séparément dans Dans un fichier, et après avoir introduit headjs, le fichier de définition du module est chargé immédiatement. Ce processus peut être facilement implémenté comme ceci :

Voir l'attribut init Non, je appelez-le l'attribut d'initialisation. La valeur de init représente le nom du fichier. Par exemple, init ci-dessus représente le fichier init.js dans le même répertoire que headjs. Ce qu'on appelle l'initialisation signifie que le fichier init doit avoir été chargé avant d'utiliser use(). Vous pouvez donc écrire la définition du module dans le fichier d'initialisation.

Nima, de quel genre de problème s'agit-il ? un autre attribut principal, d'accord, j'avoue que j'ai vu quelqu'un d'autre avoir ce truc, alors j'ai emboîté le pas et j'en ai eu un aussi. L'attribut main représente le nom du module, c'est-à-dire qu'une fois les fichiers head.js et init.js chargés, le module spécifié par l'attribut main sera automatiquement exécuté (bien sûr, le module doit d'abord être défini dans init). Donc avec ces deux choses, on peut exécuter du code très complexe sans un seul code js sur la page (sauf pour la balise qui introduit headjs).

Il y a un autre point qui mérite d'être expliqué, qui est l'emplacement de stockage des fichiers du module. Le fichier du module doit être stocké dans le même répertoire que head.js, tel que head.add('a','a.js'). Le chemin de a.js ici est le même que celui de head.js, qui est le chemin du fichier du module. Il est relatif au chemin où head.js est stocké et ne peut descendre que vers le haut, par exemple :

head.add('a','a/a. js')//Corriger

head.add('a','../a.js')//Erreur, ne peut pas être positionné vers le haut

Enfin, mettez la tête modifiée. js, ce n'est pas une version compressée, il y a des commentaires sur les modifications.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde. J'espère également soutenir le site Web PHP chinois !

Pour plus d'articles sur l'utilisation de headjs pour gérer et charger js et améliorer la vitesse de chargement du site Web, veuillez faire attention au site Web PHP chinois !