Inconvénients du chargement JS normal
L’interface doit commencer à se rendre après le chargement du js
S’il existe des dépendances entre js, elles doivent être chargées dans l’ordre selon les dépendances. Si les dépendances sont complexes, il est plus compliqué d’écrire et de maintenir le code
Ainsi, require.js est né dans la voix des larges masses populaires.
Le rôle de require.js
Implémentez le chargement asynchrone de js pour éviter l’incapacité de réponse des pages
Gérer les dépendances entre les modules pour faciliter l’écriture et la maintenance du code
require.js chargement
D’abord, rendez-vous sur le [site officiel] http://requirejs.org/ téléchargez la dernière version
Déposez les require.js téléchargées ou copiées dans le répertoire du projet
Chargez require.js sur la page souhaitée
Charge directe : Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Chargement asynchrone : <scrip{filter}t src="js/require.js » defer async="true » ></scrip{filter}t>
Note : asynchrone signifie que ce fichier doit être chargé de manière asynchrone pour éviter que la page web ne devienne non réactive. IE ne prend pas en charge l’asynchrone, donc chargez l’attribut de report ;
Une fois le require.js chargé, l’étape suivante est de charger notre propre code. Supposons que notre propre fichier de code soit main.js, également placé sous le répertoire js. Donc, écrivez simplement ce qui suit : <scrip{filter}t src="js/require.js » data-main="js/main"></scrip{filter}t>
La fonction de l’attribut data-main est de spécifier le module principal du programme web. Dans l’exemple ci-dessus, ce fichier sera chargé en premier require.js la main.js sous le répertoire js. Puisque require.js suffixe par défaut est js, vous pouvez main.js en raccourci vers main.
Comment écrire le module principal
Le main.js de la section précédente est appelé le module principal. Cela signifie la méthode d’entrée pour tout le module.
Comment écrire main.js
Des méthodes écrites directement sur le main.js sans dépendre d’autres modules
main.function()
Le module principal dépend d’autres modules, donc utilisez la fonction require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], fonction (moduleA, moduleB, moduleC){
Un peu de code ici
});
La fonction require() accepte deux paramètres :
Le premier paramètre est un tableau qui représente les modules dont il faut dépendre
Le second paramètre est une fonction de rappel qui sera appelée après que tous les modules spécifiés dans le front soient chargés. Les modules ajoutés sont transmis sous forme de paramètres, afin qu’ils puissent être utilisés à l’intérieur de la fonction de rappel.
Chargement des modules
Exemple : Si le module dépendant du module principal (main.js) est ['jquery', 'crypto-js', 'anything']
Chargement par défaut
Si les fichiers de ces trois modules dépendants sont jquery.js, crypto-js.js, anything.js et main.js dans le même répertoire, ils peuvent être automatiquement chargés selon la section précédente
Charge de configuration require.config()
Require.config() est écrit dans la tête du module principal (main.js).
Comment les modules AMD sont écrits
require.js module chargé, en utilisant la spécification AMD. C’est-à-dire que le module doit être rédigé conformément aux règlements d’AMD.
Plus précisément, les modules doivent être définis par une fonction définir() spécifique. Si un module ne dépend pas d’autres modules, il peut être défini directement dans la fonction define()
Supposons qu’il existe maintenant un fichier math.js qui définit un module mathématique. Ensuite, math.js écrire :
Voici comment charger :
Si le module dépend également d’autres modules, alors le premier argument de la fonction define() doit être un tableau qui indique les dépendances du module.
Lorsque la fonction requir() charge le module ci-dessus, elle chargera myLib.js fichier en premier.
Charger les modules non-AMD
Il existe de nombreux modules sur le marché qui ne répondent pas aux spécifications AMD, require.js peuvent être chargés
Avant que ces modules puissent se charger, ils doivent être configurés pour requir.config() afin de définir certaines de leurs caractéristiques
Par exemple, noamd.js et noamddeps.js les deux modules ne sont pas AMD, et si vous voulez les charger, vous devez définir leurs caractéristiques :
require.js accepte un objet de configuration qui, en plus de la propriété de chemins, possède également une propriété de cale spécifiquement utilisée pour configurer des modules non-AMD.
Plus précisément, chaque module définit :
- Valeur d’exportation (nom de la variable de sortie) : indique le nom du module lorsqu’il est appelé en externe
- Tableau DEPS : indique les dépendances de ce module
Par exemple, le plugin jQuery peut être défini ainsi :
require.js plugin
require.js propose également une gamme de plugins qui implémentent certaines fonctionnalités spéciales
Le plugin domready permet à la fonction de rappel de s’exécuter après le chargement de la structure DOM de la page :
Plugins texte et image, qui permettent require.js charger des fichiers texte et image :
Des plugins similaires incluent JSON et MDOWN pour charger des fichiers JSON et Markdown.
|
Publié sur 11/10/2017 09:31:50
|
|
|
