Explication détaillée de la façon d'utiliser RequireJs

Cette fois, je vous apporte une explication détaillée de la façon d'utiliser RequireJs. Nous savons que RequireJs est très puissant. Cet article vous donnera quelques cas. Analysez-le.

Chargez d'abord le fichier JavaScript

Le but de RequireJS est d'encourager la modularisation du code, qui utilise une balise différente de la balise < traditionnelle ;script> Étapes de chargement du script. Vous pouvez l'utiliser pour accélérer et optimiser le code, mais son objectif principal est de modulariser le code.

RequireJS charge tout le code à une adresse relative à baseUrl. La balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a de niveau supérieur de la page contient un attribut spécial data-main, qui est utilisé par require.js pour démarrer le processus de chargement du script, et baseUrl est généralement défini sur le répertoire cohérent avec cet attribut.

baseUrl peut également être transmis via RequireJS la configuration est définie manuellement. Si config et data-main ne sont pas explicitement spécifiés, la baseUrl par défaut est le répertoire auquel appartient la page HTML contenant RequireJS.

RequireJS suppose par défaut que toutes les ressources dépendantes sont des scripts js, il n'est donc pas nécessaire d'ajouter le suffixe ".js" à l'ID du module RequireJS gère le module. Le suffixe sera automatiquement ajouté lors de l'analyse de l'ID du chemin. Vous pouvez définir un ensemble de scripts via la configuration des chemins, ce qui nous aidera à coder moins de mots lors de l'utilisation de scripts.

Parfois, vous souhaitez éviter le processus d'analyse "baseUrl + chemins" et spécifier directement de charger un script dans un certain répertoire. Vous pouvez le faire à ce moment : si un module Si l'ID correspond à l'une des règles suivantes, son analyse d'ID évitera la configuration habituelle "baseUrl + paths" et le chargera directement en tant que script relatif au document HTML actuel :

Terminez par ".js".
Commencez par "/".
Incluez le protocole URL, tel que "http:" ou "https:".

De manière générale, il est préférable d'utiliser baseUrl et la configuration "chemins" pour définir l'ID du module. Cela vous donnera une flexibilité supplémentaire, comme un changement de nom facile, une relocalisation des scripts, etc. Dans le même temps, afin d'éviter des configurations compliquées, il est préférable de ne pas utiliser de hiérarchies de répertoires imbriquées à plusieurs niveaux pour organiser le code. Au lieu de cela, placez tous les scripts dans baseUrl ou séparez-les dans une structure plate pour les bibliothèques de projets/tiers. bibliothèques. , comme suit :

www/
index.html
js/
app/
sub.js
lib/
jquery.js
canvas.js
app.js

index.html:

<script data-main="js/app.js" src="js/require.js"></script>

app.js:

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from the js/app directory. paths
  //config is relative to the baseUrl, and
  //never includes a ".js" extension since
  //the paths config could be for a directory.
  paths: {
    app: '../app'
  }
});
//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function  ($, canvas, sub) {
  //jQuery, canvas and the app/sub module are all
  //loaded and can be used here now.
});

Notez que dans l'exemple, tiers. les bibliothèques telles que jQuery n'incluent pas les numéros de versions sont inclus dans leurs noms de fichiers. Nous vous recommandons de suivre les informations de version dans un fichier séparé. À l'aide d'outils tels que volo, vous pouvez ajouter des informations de version à package.json et conserver le nom du fichier sur le disque sous la forme « jquery.js ». Cela vous aide à garder votre configuration minimale et à éviter d'avoir à définir un chemin pour chaque version de la bibliothèque. Par exemple, configurez « jquery » sur « jquery-1.7.2 ».

Idéalement, chaque script chargé est un module défini via definition(); mais certaines bibliothèques traditionnelles/héritées du type "injection de variable globale du navigateur" ne sont pas définies à l'aide de finish() leurs dépendances, vous devez utiliser shim pour ça config pour indiquer leurs dépendances. Si vous ne spécifiez pas de dépendances, le chargement peut signaler une erreur. En effet, RequireJS charge ces bibliothèques de manière asynchrone et dans le désordre pour des raisons de vitesse.

require.js vérifiera l'attribut data-main lors du chargement :

Il serait très utile si vous pouviez utiliser la balise HTML au lieu de manipuler le DOM en fonction de des scripts pour construire du HTML Pas mal. Mais il n’existe aucun bon moyen d’intégrer du HTML dans des fichiers JavaScript. Tout ce que vous pouvez faire est d'utiliser des chaînes HTML dans js, mais cela est généralement difficile à maintenir, notamment dans le cas du HTML multiligne. .

RequireJS dispose d'un plug-in text.js qui peut aider à résoudre ce problème. Si une dépendance utilise le préfixe text!, elle sera automatiquement chargée. Voir le fichier README de text.js.

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Explications détaillées et exemples de valeurs booléennes, d'opérateurs relationnels et d'opérateurs logiques en JS

Détaillé explication et exemples de chaque fonction de jQuery

Comment implémenter AJAX et JSONP en JS natif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!