La plupart des projets utilisent le développement modulaire, le besoin de JE est un modèle pour le développement des modules AMD, il est donc nécessaire de l'apprendre. En utilisant les obligations étape par étape pour écrire des démos, nous pouvons apprendre le processus de développement global des exigences et certains des sentiments d'utilisation de requirejs par vous-même.
AMD: un mécanisme de chargement asynchrone du code JavaScript basé sur des modules. Il recommande aux développeurs de résumer le code JavaScript en modules, et la dépendance à l'égard des objets globaux devient une dépendance à l'égard d'autres modules, sans déclarer beaucoup de variables globales. Résolvez les dépendances des modules individuels par le délai et le chargement à la demande. Les avantages du code JavaScript modulaire sont évidents. Le couplage lâche de divers composants fonctionnels peut considérablement améliorer la réutilisabilité et la maintenabilité du code. Cette charge rapide simultanée non bloquante du code JavaScript permet d'autres éléments d'interface utilisateur sur la page Web qui ne s'appuient pas sur le code JavaScript, tels que les images, CSS et d'autres nœuds DOM, pour charger d'abord, la page Web se charge plus rapidement et les utilisateurs obtiennent également une meilleure expérience.
1. Télécharger les Requiejs
Avant le développement modulaire avec Requiejs, nous devons préparer quelque chose. Cela doit être téléchargé le fichier require.js, hahaha, car il a été développé en fonction de celui-ci.
2. Créez un fichier HTML
Après avoir créé un fichier HTML, l'importation de requirejs doit utiliser la balise <cript>, cela ne fait aucun doute. Ensuite, il y a un attribut de données dans cette balise. Sa fonction est d'agir comme une entrée et une sortie, c'est-à-dire, après le chargement de requirejs, entrez à partir de l'attribut de données.
Par exemple, ce qui suit est:
<! Doctype html> <éadf> <itle> exiger </ title> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> </ head> <! src = "js / require.js"> </ script> </ body> </html>
Lorsque je charge js / require.js, je vais exécuter le fichier JS de JS / Main. Main est également un fichier JS. Nous pouvons omettre son suffixe .js et requirejs l'ajoutera.
3. Données-main
Une fois le programme exécuté <script data-main = 'js / main' src = 'js / require.js'> </cript>, entrez main.js via des données-main et exécutez main.js. Alors, qu'est-ce qui est dans main.js?
Veuillez consulter le code:
/ * require.config Exécuter BUSURL AS 'JS', BUSURL fait référence au répertoire racine du fichier du module, qui peut être un chemin absolu ou un chemin relatif * / require.config ({b superinl: 'js', paths: {jQuery: 'jQuery-1.8.2.Min'}}); / * ici, monkey. La fonction anonyme, telle que singe -> mk * / require (['singe'], fonction (mk) {mk.init ();});À partir du code ci-dessus, vous pouvez voir que main.js contient deux modules: require.config et exiger.
La fonction de require.config consiste à configurer certains paramètres de requirejs, puis de le référer publiquement.
Par exemple, la fonction de la fondon ci-dessus est de l'utiliser comme chemin de base et de rechercher des fichiers sous ce chemin. Je mets tous les fichiers .js dans le dossier JS. Par conséquent, après la configuration de cette propriété, les fichiers suivants rechercheront du contenu dans le chemin JS.
comme suit:
require (['singe'], fonction (singe) {singe.init ();});Lorsqu'il fait référence au singe, c'est le singe de référence, pas le js / singe.
Quel est le rôle des chemins? Il s'agit de remplacer certains fichiers JS couramment utilisés par des noms communs. Par exemple, jQuery-1.8.2.min.js, nous ne pouvons pas écrire ceci à chaque fois que nous l'appelons, donc pour plus de commodité, nous remplaçons jQuery-1.8.2.min.js. À l'avenir, nous pouvons utiliser JQuery directement, ce qui est rapide et pratique.
D'accord, require.config le connaît essentiellement. En un mot, sa fonction est de configurer les obligations.
Qu'en est-il requis?
La fonction des exigences est d'exécuter. Par exemple, ici, je n'ai besoin que de singe.js pour exécuter, j'ai donc importé un singe, puis j'ai obtenu la valeur de retour après l'exécution du singe via le paramètre MK. S'il y a une valeur de retour, nous pouvons effectuer le traitement correspondant de MK.
Hé, qu'y a-t-il à l'intérieur du singe?
Jetons un coup d'œil:
/ * Définir le paramètre est une fonction anonyme, qui renvoie un objet * / define (['jQuery'], function ($) {var init = function () {console.log ($. Browser);}; return {init: init};});définir! Sa fonction est de définir un module JS à utiliser par d'autres modules ou de nécessiter. Sa méthode de référence à d'autres modules JS est similaire à celle de l'exigence. Il introduit les fichiers JS requis, puis correspond aux paramètres un par un. Il est important de noter que d'autres modules ne peuvent pas accéder aux méthodes ou variables définies dans Define, donc si vous voulez que d'autres modules puissent y accéder, vous pouvez jeter les objets ou fonctions de la méthode (retour) correspondante. Ici, ce que je retourne, c'est un objet qui fournit l'initiale à d'autres modules à appeler.