Adoptez vos modules AMD

ReneRubalcava

<\/HEAD>

<\/P>

Une question sur les forums<\/A> est récemment apparue et j'ai pensé que je pourrais peut-être mieux l'expliquer sous forme d'article de blog plutôt que par une simple réponse. Comment migrer du Dojo legacy vers le style moderne Dojo AMD ?<\/EM> C'est une question valide, et une avec laquelle j'ai eu du mal<\/A> lorsque Dojo 1.7 est sorti. Vous pouvez vous référer à la Migration vers 3.0<\/A> dans la documentation pour avoir une idée des changements.<\/P>

<\/P>

Je pense qu'à ce stade, les gens savent que dojo.declare est maintenant un module appelé dojo\/_base\/_declare, mais c'est l'utilisation des éléments AMD qui cause un peu de confusion.<\/P>

<\/P>

Je pense que certains obstacles viennent simplement du fait de comprendre AMD. J'ai eu quelques moments de réflexion intense au début, car je ne savais pas quand utiliser require<\/SPAN> ou quand utiliser define<\/SPAN> ou comment travailler avec les modules. Mes premières difficultés étaient avec requirejs et je n'avais pas de mentor pour vraiment m'aider, mais j'ai fouillé dans la documentation et les messages des groupes Google pour comprendre, donc quand Dojo 1.7 est sorti avec le chargeur AMD, j'étais mieux préparé.<\/P><\/P>Détaillons cela dans sa forme la plus simple et ce que vous verrez dans la plupart des exemples sur le

site des développeurs ArcGIS<\/A>.<\/P>

require(["esri\/_map", "dojo\/_domReady!"], function(Map) { 
  var map = new Map("map", {
    center: [-118, 34.5],
    zoom: 8,
    basemap: "topo"
  });
});<\/PRE><\/P>Voici la redoutée méthode require<\/SPAN>. Si vous avez déjà travaillé en C++\Java ou dans des langages similaires, vous connaissez peut-être la fonction main()<\/SPAN>. C'est la fonction qui s'exécute au démarrage d'une application, c'est là que la fête commence<\/EM>. La méthode require<\/SPAN> est la fonction principale d'AMD<\/STRONG>. Donc quelque part dans les modules de l'API ArcGIS for JavaScript téléchargés via CDN lorsque vous ajoutez la balise script à votre page se trouve un fichier JavaScript appelé map.js<\/SPAN> dans un dossier appelé esri<\/SPAN> qui ressemble à ceci.<\/P><\/P>define(['dependency1', 'dependency2'], function(dependency1, dependency2) {
  var Map;
  \/\*magic unicorn stuff*\/
  return Map;
});<\/PRE><\/P>La méthode require<\/SPAN> ira chercher ce fichier et le chargera de manière asynchrone dans votre application. Une fois le chargement terminé, la fonction dans votre application est alors appelée, ce qui définit ce qu'est une Map (très existentiel<\/EM>) est retourné par la fonction. Notez que ce module a ses propres dépendances, et dans la fonction elles sont chargées dans l'ordre demandé. C'EST IMPORTANT. L'ordre compte<\/EM>. Ces dépendances peuvent être des fonctions ou des objets, ou peut-être des chaînes de caractères. Ci-dessous un diagramme tiré de 

mon livre<\/A> qui pourrait vous aider.<\/P>

<\/P>

<\/P>

<\/P>

Dans mon livre, j'utilise un fichier appelé run.js<\/SPAN> qui fait la méthode require<\/SPAN> définissant ma

dojoConfig<\/A> et un main.js<\/SPAN> qui commence réellement le travail. C'est juste mon style, mais ce n'est pas le style définitif.<\/P><\/P>Certaines personnes sont confondues par l'utilisation de main.js<\/SPAN> et honnêtement, moi aussi au début. Un bon point de référence est le tutoriel Modules Avancés<\/A> de Dojo. Je vais citer la partie importante sous Configuration du chargeur.<\/P>

<\/P>

• main (optionnel, par défaut = main.js😞) utilisé pour découvrir le module correct à charger si quelqu'un essaie de require le package lui-même. Par exemple, si vous essayez de require "dojo", le fichier réel chargé sera "\/_js\/_dojo\/_main.js". Puisque nous avons remplacé cette propriété pour le package "my", si quelqu'un require "my", il chargera en fait "\/_js\/_my\/_app.js".Si nous essayions de require "util", qui n'est pas un package défini, le chargeur essaierait de charger "\/_js\/_util.js". Vous devez toujours définir tous vos packages dans la configuration du chargeur.

Voici un exemple de ce à quoi pourrait ressembler l'un de mes dojoConfigs, mon point d'entrée require.

var pathRX = new RegExp(\/2F[^\\u002F]+$\/) 
 , locationPath = location.pathname.replace(pathRX, '');
require({
  packages: [{
    name: 'widgets',
    location: locationPath + 'js/widgets'
  }, {
    name: 'utils',
    location: locationPath + 'js/utils'
  }, {
    name: 'app',
    location: locationPath + 'js'
  }]
}, ['app']);

Dans la méthode require, le premier paramètre est l'objet dojoConfig, le second est la dépendance ['app'], c'est mon point d'entrée. Donc selon la documentation ci-dessus, en demandant simplement 'app', par défaut il cherchera 'app/main.js'.

Si tout cela est encore trop confus, vous pouvez toujours définir un objet global dojoConfig pour configurer vos packages et faire un require plus ancien simple pour démarrer votre application. Quelque chose comme ceci.

<body class=\"nihilo\">
 <script>
    var pathRX = new RegExp(\/2F[^\\u002F]+$\/) 
     , locationPath = location.pathname.replace(pathRX, '');
    var dojoConfig = {
      async: true,
      isDebug: true,
      packages: [
        { name: 'xstyle', location: locationPath + '\/bower_components/xstyle' },
        { name: 'mayhem', location: locationPath + '\/bower_components/mayhem/dist' },
        { name: 'app', location: locationPath + 'js' }
      ],
      tlmSiblingOfDojo: false
    };
 </script>
&nbsp<script>require(['app/start'], function() {})</script>
</body>

J'espère que cela clarifie un peu les choses.

Vous pouvez apprendre beaucoup via la documentation Dojo et surtout le tutoriel Modules CDN. Cette page couvre en profondeur certains aspects Legacy vers Modern Dojo. Voici un guide de migration. Voici un convertisseur legacy Dojo vers AMD que vous pouvez aussi essayer. Je ne l'ai jamais utilisé, mais cela pourrait être un bon point de départ. Je doute qu'il fonctionne à 100% avec tous les modules Esri, mais ça vaut le coup d'essayer.

J'espère que cela aide un peu si vous avez encore du mal à migrer des applications Legacy Dojo vers Dojo moderne. Cela peut prendre du temps pour tout assimiler, mais ça viendra. Pour plus d'astuces geodev, consultez mon blog.

EvelynHernandez

Its useful for beginners trying to learn how to develop in JS. But it will be more useful if u put some simple examples about how to modularize ur apps properly, how to call functions from another js,etc.