Introduction de requirejs
DIBREJS a été fondée par James Burke, qui est également le fondateur d'AMD Spécifications.
Requirejs vous permettra d'écrire JavaScript d'une manière différente de celle d'habitude. Vous n'utiliserez plus de balises de script pour introduire des fichiers JS dans HTML, et vous n'aurez plus besoin de gérer les dépendances via des balises de script.
Requirejs est un très petit cadre de chargement de module JavaScript et est l'un des meilleurs implémentateurs de la spécification AMD. La dernière version de requirejs n'est que 14K après la compression, ce qui est très léger. Il peut également fonctionner en conjonction avec d'autres cadres, et l'utilisation de requirejs améliorera sûrement la qualité de votre code frontal.
Il y a quelques points à noter lors de l'utilisation de requirejs pour le chargement des modules asynchrones:
1. Deux façons d'écrire la définition du module
1. Définitions fonctionnelles qui existent dans les dépendances
Si le module a des dépendances: le premier paramètre est le tableau de noms de dépendances; Le deuxième paramètre est une fonction. Une fois que toutes les dépendances du module sont chargées, la fonction sera appelée pour définir le module, de sorte que le module doit renvoyer un objet qui définit le module. La relation de dépendance est injectée dans la fonction en tant que paramètre, et la liste des paramètres correspond à la liste de noms de dépendance une par une.
Define (['a'], fonction (aj) {var hello = function () {aj.hello ('je suis c.js');} return {Hello: Hello}});PS: Le type de valeur de retour du module n'est pas obligé d'être un objet et la valeur de retour d'une fonction est autorisée.
2. Définition du format du module CommonJS
Exiger: utilisé pour introduire des méthodes qui dépendent d'autres modules.
Exportations: exporte un objet qui exporte une variable ou une méthode de module.
Module: contient des informations sur ce module.
require.config ({substandule: "", config: {'b': {size: 'grand'}}, paths: {a: 'base / a', b: 'base / b', c: 'base / c'}}); Define (function (require, exports, module) {var aj = require ("a"); var hello = function () {aj.hello ('je suis b.js');} var hello2 = function () {aj.hello ('je suis b.js22');} exports.hello = hello; console.log ("b.js: exportts", Exports); console.log ("b.js: module", module); console.log ("b.js: config", module.config ()); // ne peut pas être utilisé ensemble, return écrasera les exportations précédentes / * return {Bonjour: Bonjour2} * /});PS: L'objet de retour et les exportations ne peuvent pas être utilisés ensemble, le retour écrasera les exportations précédentes.
Ce qui suit est les informations imprimées après l'appel:
Exportations: On peut voir que les exportations sont un attribut du module.
Module: il comprend l'alias, l'uri, l'objet d'exportation et la méthode d'information de configuration du module.
Configuration: Nous devons souvent transmettre des informations de configuration à un module. Ces configurations sont souvent des informations au niveau de l'application et nécessitent un moyen de les transmettre au module.
Dans requirejs, il est implémenté en fonction de l'élément de configuration de configuration de requirejs.config ().
2. Méfiez-vous des variables singleton
Méfiez-vous des variables dans les singletons, car après requirejs, nécessite une fois, le require suivant utilise le cache précédent. Ainsi, lorsqu'une variable est définie dans le module, tant que cette exigence est modifiée, d'autres exigences resteront cohérentes.
Define (function () {var index = 0; var hello = function (msg) {console.log (msg);} var addIndex = function () {index ++;} var getindex = function () {return index;} return {hello: hello, addIndex: addIndex, getIndex: getIndex}});Appelé:
requis (['a',], fonction (a) {require (['a'], fonction (a) {console.log (a.getIndex ()); a.addindex (); a.addindex ();}); require (['a'], fonction (a) {console.log (a.getIndex ());});});Les ci-dessus sont imprimés:
0
2
3. Effacer le cache
Parce que requirejs a la fonction de mise en cache, mais pendant le développement, nous ne voulons pas qu'il se cache, nous pouvons donc définir des urlargs dans require.config.
URLARGS: requirejs ajoute des paramètres de requête supplémentaires après l'URL lors de l'obtention de la ressource.
Exemple:
Urlargs: "Bust =" + (new Date ()). GetTime ()
Ceci est utile en développement, mais n'oubliez pas de le supprimer avant de se déployer dans l'environnement de construction.
4. Modules de chargement des autres packages
Requirejs prend en charge les modules de chargement de la structure du package CommonJS, mais nécessite une configuration supplémentaire.
La configuration du package peut spécifier les propriétés suivantes pour un package spécifique:
1. Nom: Nom du package (pour le nom du module / mappage du préfixe).
2. Emplacement: L'emplacement sur le disque. Les positions sont relatives aux valeurs de base de la base de la configuration à moins qu'elles contiennent des protocoles ou commencent par "/".
3. Main: Une fois l'appel requise initié avec le "nom du package", le module d'un package à appliquer.
La valeur par défaut est "principale", sauf définir autrement ici.
Cette valeur est relative au répertoire des packages.
exemple:
main.js
require.config ({substandule: "", packages: [{nom: "étudiant", emplacement: "package-stu"}, {name: "enseignant", emplacement: "package-tea"}], urlargs: "buste =" + (new Date ()). GetTime ()}); required (["Student / Store", "enseignante"], fonction (fonction (sto, thé, thé) {Sto. Tea.hello ();});thé.js:
Define (fonction (require, exports, module) {export.hello = function () {console.log ('je suis professeur.');}});Stu.js:
définir (fonction (require, exports, module) {export.name = 'cape';});store.js:
Define (fonction (require, exports, module) {var stut = require ("Student / Stu"); export.hello = function () {console.log ('je suis' + stu.name);}});J'ai l'impression qu'il y a deux choses étranges dans cette façon de charger des modules à partir d'autres packages (je ne comprends pas très bien):
1. Si les modules des autres packages se réfèrent à la méthode d'écriture d'autres modules, l'utilisateur affectera-t-il la méthode d'écriture du module?
2. Les principaux.js dans d'autres packages semblent inutiles, et il n'y a pas de problème sans contenu.
Le contenu ci-dessus est les détails des exigences utilisés par l'éditeur, et j'espère que cela sera utile à tout le monde!