nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

AMDモジュールを受け入れましょう

ReneRubalcava

<\/HEAD>

<\/P>

フォーラムでの質問<\/A>が最近あり、単一の返信よりもブログ記事形式で説明したほうが良いかもしれないと思いました。レガシーDojoからモダンなDojo AMDスタイルにどう移行すればよいですか？<\/EM> それは妥当な質問であり、Dojo 1.7がリリースされたときに私も苦労したものです。変更点の概要を知るにはドキュメントのMigrating to 3.0<\/A>を参照してください。<\/P>

<\/P>

今では、dojo.declareがdojo\/_base\declareというモジュールになったことは多くの人が知っていますが、AMDの使い方に混乱が生じることがあります。<\/P>

<\/P>

AMDを理解すること自体がハードルの一つだと思います。最初はrequireを使うべきかdefineを使うべきか、モジュールの扱い方がわからず頭を悩ませました。最初はrequirejsで苦労し、メンターもいなかったのでドキュメントやGoogleグループの投稿を読み漁って理解しました。そのためDojo 1.7でAMDローダーが導入されたときには準備ができていました。<\/P>

<\/P>

最も単純な形に分解して、

ArcGIS Developersサイトのほとんどの例で見られるものを見てみましょう。<\/P>

require(["esri\/map", "dojo\/domReady!"], function(Map) { 
  var map = new Map("map", {
    center: [-118, 34.5],
    zoom: 8,
    basemap: "topo"
  });
});<\/PRE><\/P>ここに恐れられているrequireメソッドがあります。C++やJavaなど似た言語で作業したことがあればmain()関数に馴染みがあるかもしれません。これはアプリケーション起動時に実行される関数であり、パーティーが始まる場所です。requireメソッドはAMDのmain関数です<\/STRONG>。CDN経由でダウンロードされるArcGIS API for JavaScriptモジュール内のどこかに、esriというフォルダー内にmap.jsというJavaScriptファイルがあります。それは次のようなものです。<\/P><\/P>define(['dependency1', 'dependency2'], function(dependency1, dependency2) {
  var Map;
  \/*magic unicorn stuff*\/
  return Map;
});<\/PRE><\/P>requireメソッドはそのファイルを探して非同期的にアプリケーションに読み込みます。読み込みが完了するとアプリケーション内の関数が呼ばれ、Mapとは何かを定義する内容(非常に存在論的)が関数から返されます。このモジュールには独自の依存関係があり、それらは関数内で要求された順序で読み込まれます。これは重要です。順序が重要です。これらの依存関係は関数やオブジェクト、あるいは文字列かもしれません。以下は私の本からの図で参考になるでしょう。<\/P><\/P><\/P><\/P>私の本ではrun.jsというファイルを使ってrequireメソッドでdojoConfigdojoConfigを定義し、main.jsというファイルで実際に処理を開始します。それは私のスタイルですが決定的なスタイルではありません。<\/P><\/P>main.jsの使用方法で混乱する人もいますし、正直私も最初はそうでした。良い参考資料としてDojoのAdvanced Modulesチュートリアルがあります。「Configuring the Loader」の重要部分を引用します。<\/P>main(オプション、デフォルト = main.js) 😞: パッケージ自体をrequireしようとした場合に正しいモジュールを発見するために使用されます。例えば「dojo」をrequireしようとすると実際に読み込まれるファイルは「/js/dojo/main.js」です。「my」パッケージ用にこのプロパティを上書きしているので、「my」をrequireすると実際には「/js/my/app.js」が読み込まれます。「util」という定義されていないパッケージをrequireしようとするとローダーは「/js/util.js」を読み込もうとします。ローダー設定では必ずすべてのパッケージを定義してください。<\/BLOCKQUOTE>以下は私のdojoConfig（requireエントリーポイント）のサンプルです。<\/P>var pathRX = new RegExp(\/5c\/5b^\/5c\/5d+$\/) 
  , 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']);<\/PRE><\/P>requireメソッドでは最初のパラメータがdojoConfigオブジェクト、2番目が['app']依存関係であり、これがエントリーポイントです。上記ドキュメントによれば単に'app'を要求するとデフォルトで'app/main.js'を探します。<\/P><\/P>もしまだ混乱しているなら、グローバルなdojoConfigオブジェクトを定義してパッケージ設定し、従来通り単純なrequireでアプリケーションを開始することもできます。このような感じです。<\/P><body class=\"nihilo\">
  <script>
    var pathRX = new RegExp(\/5c\/5b^\/5c\/5d+$\/) 
     , 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>
  <script>require(['app/start'], function() {})</script>
</body><\/PRE><\/P>これで少しはクリアになることを願います。<\/P>
この多くはDojoドキュメントや特にCDN Modulesチュートリアルから学べます。このページではレガシーからモダンDojoへの詳細な説明があります。また移行ガイドもあります。さらにレガシーDojoからAMDへのコンバーターも試せます。私は使ったことはありませんが良い出発点になるでしょう。ただしすべてのEsriモジュールで100%動作するとは限りませんが試す価値はあります。
I hope that helps out a bit if you are still struggling with migrating Legacy Dojo applications to modern  Dojo. It may take some time to let it all sink in, but it will. For more geodev tips and tricks, check out my blog.

タグ付けされた投稿をもっと見る

GeoDev Adventures

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.

TracySchloss

I have to agree with Evelyn. Technically, my code uses AMD. But it's all still in one big file, because I can't figure out how to separate it out. Every person who posts about AMD and modules. provides the same few links - to ESRI and to DOJO documentation. I have read all of these dozens of times, but I just don't get how it applies to my work. I get the core concepts, but applying it to my existing code is a completely different story.

RavindraSingh

yes, Agree with Tracy.

There has to be a baby crawl steps guide .

TyroneBiggums

I would pull out one thing and try to add it to a stand alone file.

1. Start by creating the dojoConfig file in the example above if you don't have one, and adding a script tag in your huge file to reference it.

2. Change the packages line to just one package, and create a location for it in your base root. Packages could look like this: packages: [ { name: 'whatYouReferenceYourModuleWith', location: locationPath + 'folderNameAtYourRoot', main: 'fileNameInAformentionedFolderName} ]

3. Create said folder and .js file referenced above.

4. In file in step 3, add this code: define(function() { return { lookAtMeNow: function() { return 'oh hi'; } } });

5. In your one huge file, add this somewhere (somewhere that you know the DOM is read ... through jquery, dojo, whatever): require(['whatYouReferenceYourModuleWith'], function (whatYouReferenceYourModuleWith) { alert(whatYouReferenceYourModuleWith.lookAtMeNow) } });

In short,

1. Config file makes the modules available

2. Create a package that points to one of your files

3. Create a js file that your config points to

4. define some code for that module

5. require the module defined in step 4 by the name provided in step 2. Note: leaving off the main: 'moduleName' in the package will cause the config to look for main.js (which is what was in the original post).

disclaimer: That's as baby stepped as it can be, pretty much, and I didn't test that actual syntax.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.