Introduction à RequireJS - Implémentation des premières compétences example_javascript

Pourquoi apprendre RequireJS ?

Un novice comme moi mentionnera AMD, la programmation modulaire JS, l'asynchrone... etc. mentionnés dans des tonnes d'articles

RequireJS vous permet d'écrire du JavaScript différemment de d'habitude. Vous n'utiliserez plus de balises de script pour introduire des fichiers JS en HTML et gérerez les dépendances via l'ordre des balises de script.

RequireJS est un framework de fichiers et de modules Javascript qui peut nous aider à gérer le code js (d'après ce que j'ai compris).

Avec une étude approfondie, nous serons obligés d'accepter une série de noms : data-main, require, definition, baseUrl, paths, shims, deps. . . Attendez ;

En bref, de nombreux articles nous vendent des termes et des concepts que nous ne comprenons même pas.

Faites simple, maintenant nous devons faire une exigence simple, utiliser RequireJS pour gérer notre code js, et pouvoir utiliser jquery !

1. Créez un projet Web et exécutez-le !

Les fichiers à l'intérieur sont comme indiqué ci-dessous :

Il y a beaucoup de pièges ici, j'ai donc mis tous les fichiers dans le répertoire racine des fichiers pour éliminer d'abord ces petits problèmes !

Parmi eux, jquery.js et require.js doivent être téléchargés à partir du site Web Please Baidu.

2. Ajoutez une balise de script

dans index.jsp

Vous pouvez ajouter une balise dans 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846beeRequireJS test de chargement asynchrone94b3e26ee717c64999d7867364b1b4a3

3. Complétez le fichier main.js

require.config({
　　paths: {
　　  jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4. Courez~

Vous verrez une boîte de dialogue contextuelle et la page affichera "Test de chargement asynchrone RequireJS".

Résumé :

a. RequireJS a été créé par James Burke, qui était également le fondateur de la spécification AMD. Il s'agit d'une bibliothèque d'outils pour la gestion des modules côté client.

À partir de cet exemple :

1. Lorsque l'alerte apparaît, la page est également rendue en même temps, ce qui reflète la fonction de chargement asynchrone. La méthode d'écriture traditionnelle dans l'en-tête provoquera un blocage. La page ne peut être rendue qu'après avoir cliqué sur OK.

2. La page n'a besoin que d'introduire un require.js, et il n'est pas nécessaire d'introduire d'autres codes js compliqués. Le reste du travail est laissé au framework RequireJS !

b. Avant d'apprendre, comprenez d'abord les spécifications AMD. AMD définit les modules via Définir le mode de base : définir("id",[deps1,deps2,...],callback);

Pourquoi cet exemple peut-il s'exécuter sans définition ? Parce que jquery prend en charge AMD. L'objet path est utilisé pour introduire divers modules.

Le code js ordinaire peut-il être géré par RequireJS ? Oui, utilisez des cales pour charger ces ressources !

c. Résumez les futures idées de codage :

                  Fonctions et variables dans chaque module.

d. Implémentez-le vous-même : ajoutez un bouton à la page ; ajoutez l'événement d'écoute de clic de juqery à main.js et testez si la surveillance est réussie !

e. Problèmes restants : problème de chemin, il ne peut certainement pas être dans le répertoire racine, mais ce n'est pas un problème !

Cet article est la description complète du premier exemple de démarrage avec RequireJS. J'espère qu'il sera utile à tout le monde.