Maintenant, require.js est ma façon préférée de programmer JavaScript. Il rend la rupture de code en pièces et facile à gérer. Optimiseur requise.js peut nous aider à distribuer une application plus grande dans plusieurs applications plus petites, les connecter via des dépendances et enfin la fusionner pendant la compilation et l'emballage. Ces raisons nous incitent à utiliser require.js.
Alors, jetons un coup d'œil à ce que les fonctionnalités impressionnantes nécessitent.js!
Compatible avec CommonJS
AMD (spécification de définition du module asynchrone) apparaît à partir du groupe de travail CommonJS. CommonJS vise à créer un écosystème de JavaScript. Une partie importante de CommonJS est le transport / c, le prédécesseur de la DMLA, et require.js est une implémentation de cette spécification.
La différence de syntaxe entre le module CommonJS et le module AMD est principalement due au besoin d'AMD de prendre en charge les caractéristiques asynchrones du navigateur. Le module CommonJS doit être synchronisé, par exemple:
La copie de code est la suivante:
var SomeModule = require ("SomeModule");
var autre autre-module = require ("un autre module");
exports.asplode = function () {
SomeModule.doteHawesome ();
un autre module.domoarawesome ();
};
Le module AMD charge le module de manière asynchrone, de sorte que la définition du module nécessite un tableau comme premier paramètre, et la fonction de rappel après le chargement du module est passée en tant que deuxième paramètre.
La copie de code est la suivante:
définir (["SomeModule"], fonction (SomeModule) {
retour {
asplode: function () {
SomeModule.doteHawesome ();
// Ceci sera exécuté de manière asynchrone
require (["un autre module"], fonction (un autre module) {
un autre module.domoarawesome ();
});
}
};
});
Cependant, AMD est également compatible avec la syntaxe CommonJS dans require.js. En emballage le module CommonJS via la fonction Définir d'AMD, vous pouvez également avoir un module CommonJS dans AMD, par exemple:
La copie de code est la suivante:
définir (fonction (require, exportations, module)
var SomeModule = require ("SomeModule");
var autre autre-module = require ("un autre module");
SomeModule.doteHawesome ();
un autre module.domoarawesome ();
exports.asplode = function () {
SomeModule.doteHawesome ();
un autre module.domoarawesome ();
};
});
En fait, require.js interprète le contenu du module de la fonction de rappel via la fonction .tostring, trouve sa dépendance correcte et la transforme en module AMD normal. Il convient de noter que si vous écrivez des modules de cette manière, il peut être incompatible avec d'autres chargeurs AMD car cela viole la spécification AMD, mais il peut comprendre comment ce format est bien écrit.
Ce qui se passe ici, requier.js fait en fait la fonction function.tostring analyse le contenu du module et trouve la dépendance correcte, tout comme si c'est un module AMD normal. Il est important de noter que si vous choisissez d'écrire des modules comme celui-ci, ils seront probablement incompatibles avec d'autres chargeurs de modules AMD car cela viole la spécification AMD, mais c'est une bonne idée de comprendre que ce format existe!
CDN Back
Un autre trésor de required.js caché est qu'il prend en charge le chargement de Rollback de la bibliothèque correspondante locale lorsque le CDN se charge mal. Nous pouvons y parvenir via require.config:
La copie de code est la suivante:
requirejs.config ({
chemins: {
jQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'Lib / jQuery'
]]
}
});
Pas de dépendances? Objet littéral? aucun problème!
Lorsque vous écrivez un module qui n'a pas de dépendances et renvoie simplement un objet qui contient certaines fonctions fonctionnelles, nous pouvons utiliser une syntaxe simple:
La copie de code est la suivante:
définir({
Forcechoke: function () {
},
forceLighting: function () {
},
forcerun: function () {
}
});
C'est simple et utile si le module n'est qu'une collection de fonctions, ou juste un paquet.
Dépendance circulaire
Dans certains cas, nous pouvons avoir besoin des fonctions de modules modules et modules pour s'appuyer sur certaines applications. C'est une dépendance circulaire.
La copie de code est la suivante:
// js / app / modulea.js
définir (["exiger", "app / app"],
fonction (require, app) {
retour {
foo: fonction (title) {
var app = require ("app / app");
return app.something ();
}
}
}
));
Obtenez l'adresse du module
Si vous avez besoin d'obtenir l'adresse du module, vous pouvez le faire ...
La copie de code est la suivante:
var path = require.tourl ("./ style.css");
Balise
Habituellement, lors des tests unitaires, votre code source peut être placé dans un dossier similaire à SRC, et en même temps, votre test peut être placé dans un dossier similaire aux tests. Cela peut être difficile d'obtenir la configuration du test correct.
Par exemple, nous avons un fichier index.html dans le dossier Tests et devons charger les tests / spec / *. JS localement. Et en supposant que tout le code source est dans SRC / JS / *. JS et il y a un Main.js dans ce dossier.
Dans index.html, Data-Main n'est pas défini lorsque la nécessité.js est chargée.
La copie de code est la suivante:
<script src = "src / js / vendor / require.js"> </ script>
<cript>
require (["../src/js/main.js"], function () {
require.config ({
BUSURL: "../src/js/"
});
exiger([
"./spec/test.spe.js",
"./spec/moar.spe.js"
], fonction() {
// Démarrez votre cadre de test
});
});
</cript>
Vous pouvez trouver que Main.js est chargé. Cependant, comme Data-Main n'est pas défini, nous devons formuler une base de base comme nous le voulons. Lors de l'utilisation de Data-Main, BUSURL se déroulera automatiquement en fonction du fichier qu'il définit.
Ici, vous pouvez voir main.js est chargé. Cependant, comme il ne charge pas la balise de script principale des données, vous devez alors spécifier une base. Lorsque les données sont principalement utilisées pour la substanier, déduite de l'emplacement dans le fichier principal. En personnalisant BUSURL, nous pouvons facilement stocker le code de test et le code d'application séparément.
Jsonp
Nous pouvons gérer les terminaux JSONP comme ceci:
La copie de code est la suivante:
exiger( [
"http://someapi.com/foo?callback=define"
], fonction (data) {
console.log (données);
});
Pour les bibliothèques non AMD, utilisez la cale pour résoudre
Selon de nombreuses demandes, nous devons utiliser des bibliothèques non AMD. Par exemple, la squelette et le soulignement ne s'adaptent pas à la spécification AMD. Et jQuery se définit en fait comme une variable globale appelée jQuery, vous n'avez donc rien à faire avec jQuery.
Heureusement, nous pouvons utiliser la configuration de la cale pour résoudre ce problème.
La copie de code est la suivante:
require.config ({
chemins: {
"Backbone": "Vendeur / épine dorsale",
"soulignement": "Vendeur / Contrôle"
},
cale: {
"Backbone": {
DEPS: ["Soulignement"],
Exportations: "épine dorsale"
},
"souligner": {
Exportations: "_"
}
}
});