La méthode de chargement par défaut de JS via les balises de script est synchronisée, c'est-à-dire après que le JS dans la première balise de script soit chargé, le second commence à être chargé, et ainsi de suite jusqu'à ce que tous les fichiers JS soient chargés. De plus, les dépendances de JS doivent être assurées par l'ordre du script; Et pendant le chargement JS, le navigateur cessera de répondre, ce qui affecte considérablement l'expérience utilisateur. Sur la base de cela, de nombreuses solutions à JS sont apparues et chargées, nécessitant JS en fait partie.
Les modules chargés par les exigences sont généralement des modules conformes aux normes AMD, c'est-à-dire des modules qui définissent avec définir et renvoyer des méthodes et des variables exposées avec RUTUR; Obligations requises peut également charger des modules qui parcourent les normes AMD, mais il est plus gênant et ne sera pas impliqué cette fois.
Besoin de chargement JS Main implique les aspects suivants:
démo html
<script src = "js / require.js" Defer async = "true" data-main = "js / main"> <! - Donnez le chemin obligatoirejs, déclarez-le en tant que chargement asynchrone, spécifiez le module d'entrée comme main.js (peut être omis.js) ->
main.js
require.config ({// Déclare l'emplacement des chemins de module: {"jQuery": "libs / jQuery" "Login": "libs / ligin"} // ou utilisez la substanier pour spécifier le chemin de la voie de tous les modules BUSURL: "JS / LIBS"}); // Utiliser a besoin pour charger le module. Le premier paramètre est un tableau, c'est-à-dire que le module à charger sera chargé dans l'ordre du tableau; La seconde est une fonction de rappel, qui est exécutée une fois tout le chargement terminé. requis (['jQuery', 'Login'], fonction ($, connexion) {alert ("jQuery and Login Module Load Success!"); login.do_login (); // un autre});Définition du module de connexion en ligne avec AMD
// Définition de définition de jQuery (['jQuery'], fonction ($) {// certaines définitions fonction do_login () {$ .post ('/ sessions / création', {uname: $ ("# uname"). Val (), mot de passe: $ ("# mot de passe"). Val ()}, fonction (data) {// quelque}); }); // Définition de définition d'autres modules (fonction () {// Certaines définitions return {xx: xx};});Rails n'applique pas de chargeur JS. D'une part, la nouvelle version de Rails Asset Pipe emballera tous les fichiers JS dans un fichier JS, sans statut de chargement JS multiple. D'un autre côté, Turbolink utilise la technologie dite PJAX avec des éloges et des critiques mitigés. Le lien par défaut est modifié en méthode AJAX et n'obtient que la partie DBO du HTML et la partie de tête reste inchangée, de sorte que le chargement JS n'est effectué que lorsque le site Web est ouvert pour la première fois.
Cas 1: Chargement des fichiers JavaScript
<script src = "./ js / require.js"> </ script> <script> require (["./ js / a.js", "./js/b.js"], function () {myFunctiona (); myFunctionb ();}); </cript>Le paramètre de tableau de chaîne dans la méthode requise peut permettre différentes valeurs. Lorsque la chaîne se termine par ".js", ou commence par "/", ou est une URL, les obligations devront penser que l'utilisateur charge directement un fichier JavaScript. Sinon, lorsque la chaîne est similaire à "mon / module", il pensera qu'il s'agit d'un module, et chargera le fichier JavaScript où le module correspondant est situé avec la fondon et les chemins configurés par l'utilisateur. La section de configuration sera décrite en détail plus tard.
Il convient de souligner ici que, par défaut, DibleJS ne garantit pas que MyFunctiona et MyFunctionB doivent être exécutés après le chargement de la page. Lorsqu'il est nécessaire de s'assurer que le script est exécuté après le chargement de la page, requirejs fournit un module DomReady indépendant. Vous devez télécharger ce module à partir du site officiel de requirejs, qui n'est pas inclus dans requirejs. Avec le module DomReady, le code dans le cas 1 est juste légèrement modifié et la dépendance à DomReady.
Cas 2: Exécutez JavaScript après le chargement de la page
<script src = "./ js / require.js"> </ script> <script> require (["DomReady!", "./js/a.js", "./js/b.js"], function () {myFunctiona (); myFunctionb ();}); </cript>Après avoir exécuté le code du cas 2, via Firebug, vous pouvez voir que les obligations jalonnes inséreront une balise <cript> sur la page actuelle en tant que A.JS et B.JS déclareront respectivement une balise <cript> pour télécharger des fichiers JavaScript de manière asynchrone. L'attribut async est actuellement pris en charge par la plupart des navigateurs, ce qui indique que le fichier JS dans cette balise <cript> ne bloquera pas le téléchargement d'un autre contenu de page.
Cas 3: <cript> inséré par requisejs
<script type = "text / javascript" charset = "utf-8" async = "" data-requireContext = "_" data-requireModule = "js / a.js" src = "js / a.js"> </ script>
Utiliser les obligations pour définir les modules JavaScript
Ce qui est différent du code JavaScript traditionnel ici, c'est qu'il ne nécessite pas d'accès aux variables globales. La conception modulaire permet au code JavaScript de passer ces «variables globales» en tant que paramètres à travers les dépendances lorsqu'il doit accéder aux «variables globales» et à éviter d'accéder ou de déclarer des variables ou des fonctions globales dans l'implémentation, en évitant efficacement un grand nombre de gestion complexe et complexe de l'espace de noms.
Comme indiqué dans la spécification AMD de CommonJS, la définition des modules JavaScript est implémentée via la méthode Define.
Voyons d'abord un exemple simple. Cet exemple crée des objets étudiants dans le programme principal et met les objets étudiants dans la classe en définissant un module étudiant et un module de classe.
Cas 4: Module étudiant, étudiant.js
Define (function () {return {CreateSudent: function (name, genre) {return {name: name, genre: genre};}};}); });Cas 5: Module de classe, class.js
Define (function () {var allStudents = []; return {classid: "001", département: "ordinateur", addtoclass: function (student) {allStudents.push (student);}, getClassSize: function () {return allStudents.length;}};});Cas 6: programme principal
require (["js / étudiant", "js / class"], function (étudiant, clz) {clz.addtoclass (student.createStudent ("jack", "mâle")); clz.addtoclass (student.createStudent ("rose", "femme")); console.log (clz.getClassize ()); //put 2});Le module étudiant et le module de classe sont tous deux des modules indépendants. Définissons un nouveau module. Ce module s'appuie sur les modules d'étudiant et de classe, afin que la logique de la partie principale du programme puisse également être enveloppée.
Cas 7: Module Manager qui s'appuie sur les modules d'étudiant et de classe, Manager.js
Define (["JS / Student", "JS / class"], fonction (étudiant, clz) {return {addNewStudent: function (name, genre) {clz.addtoclass (student.createStudent (nom, genre));}, getMyclassSize: function () {return clz.getClassSize ();}};);Cas 8: Nouveau programme principal
requis (["js / manager"], function (manager) {manager.addnewstudent ("jack", "mâle"); manager.addnewstudent ("rose", "feme"); console.log (manager.getmyclasssize ()); // output 2});Grâce à l'exemple de code ci-dessus, nous avons clairement compris comment écrire un module, comment ce module est utilisé et comment définir les dépendances entre les modules. Il y a encore quelques conseils à utiliser:
Essayez de ne pas fournir l'ID du module. Comme indiqué dans la spécification AMD, cet ID est une option. S'il est fourni, la migration de la migration du module sera affectée dans la mise en œuvre de requirejs, et les modifications de l'emplacement des fichiers entraîneront la modification manuellement de l'ID.
Chaque fichier JavaScript définit un seul module. L'algorithme de recherche pour le nom et le chemin du fichier du module détermine que cette méthode est optimale. Plusieurs modules et fichiers seront optimisés par l'optimiseur. Évitez les dépendances circulaires des modules. S'il est vraiment impossible à éviter, vous pouvez ajouter des dépendances sur les modules "Exiger" du module et les utiliser directement dans le code.
exiger ("DependencyModuLename")Configurer les obligations:
Dans l'introduction précédente, nous semblons avoir négligé une question de base: comment le nom du module est-il venu? Lorsque j'ai besoin d'un module, comment ce module est-il carte vers un fichier JavaScript spécifique? Cela implique comment configurer les obligations.
Le moyen le plus simple de charger les exigences est illustré dans le cas 2. Dans ce cas, nous ne spécifions pas de baseurl et de chemins pour requirejs. Si la méthode illustrée dans le cas 10, Data-Main spécifie A /js/Main.js dans le dossier parallèle au répertoire Index.html actuel comme entrée du programme, et le répertoire / js sera également utilisé comme BustreUrl lors de la définition d'autres modules.
Cas 9: chargement require.js
<script data-main = "js / main" src = "scripts / require.js"> </ script>
Par conséquent, toutes les dépendances du module dans nos exemples précédents peuvent être supprimées de "JS /" et écrire "Student", "Class", "Manager", etc. directement. Une façon plus directe d'afficher la base de la base de la base de la base et les chemins est d'utiliser require.config pour définir ces paramètres. Comme indiqué dans le cas dix.
Cas 10. Configuration des obligations
<script type = "text / javascript" src = "./ js / require.js"> </ script> <script type = "text / javascript"> require.config ({substandul: "./js", paths: {"some": "some / v1"}, waitseconds: 10}); require (["some / module", "my / module", "./js/a.js"], fonction (SomeModule, mymodule) {}); </cript>BUSURL Indique l'URL de base de tous les modules. Par exemple, le script chargé de "mon / module" est en fait /js/my/module.js. Notez que les fichiers se terminant par .js n'utiliseront pas la baseurl lors du chargement, ils utiliseront toujours le chemin relatif où se trouve l'index.html actuel, vous devez donc ajouter "./js/". Si la fondon n'est pas spécifiée, le chemin spécifié dans les données-main sera utilisé.
Le chemin défini dans les chemins est utilisé pour remplacer le chemin du module, tel que certains / modules dans l'exemple ci-dessus. Le chemin de fichier JavaScript spécifique est /js/some/v1/module.js. Waitseconds Spécifie le temps qu'il faut pour charger un fichier JavaScript. La valeur par défaut est de 7 secondes sans que l'utilisateur ne le spécifie.
Une autre configuration importante est les packages, qui peuvent spécifier d'autres structures de répertoire conformes à la spécification AMDJS AMD, apportant ainsi une riche évolutivité. Des modules tels que le dojo, jQuery, etc. peuvent également être chargés par requirejs via cette configuration.
D'autres options configurables incluent les paramètres régionaux, le contexte, les DEP, le rappel, etc. Les lecteurs intéressés peuvent vérifier les documents pertinents sur le site officiel de requirejs.