<\/HEAD>
<\/P>
Občas se mě někdo zeptá, jak by měl strukturovat svou aplikaci ArcGIS JS API. V mé knize<\/A> doporučuji následující strukturu aplikace:<\/P><\/P>
app\/<\/STRONG><\/SPAN><\/P> |-- css\/<\/STRONG><\/SPAN><\/P> |-- js\/<\/STRONG><\/SPAN><\/P> |-- controllers\/<\/STRONG><\/SPAN><\/P> |-- services\/<\/STRONG><\/SPAN><\/P> |-- utils\/<\/STRONG><\/SPAN><\/P> |-- widgets\/<\/STRONG><\/SPAN><\/P> |-- main.js<\/STRONG><\/SPAN><\/P> |-- run.js<\/STRONG><\/SPAN><\/P> |-- index.html<\/STRONG><\/SPAN><\/P><\/P>Tuto strukturu aplikace jsem použil u mnoha projektů a fungovala dobře. Obvykle můj run.js<\/STRONG> vypadal takto:<\/P>(function() {
'use strict';
var pathRX = new RegExp(\/2F[^\/2F]+$\/2F)
, locationPath = location.pathname.replace(pathRX, '');
require({
packages: [{
name: 'controllers',
location: locationPath + 'js/controllers'
}, {
name: 'widgets',
location: locationPath + 'js/widgets'
}, {
name: 'utils',
location: locationPath + 'js/utils'
}, {
name: 'services',
location: locationPath + 'js/services'
}, {
name: 'app',
location: locationPath + 'js',
main: 'main'
}]
}, ['app']);
})();<\/PRE><\/P>Toto funguje docela dobře. Ale jedna věc, kterou to nezohledňuje, je zacházení s app a všemi podmoduly jako s balíčkem app<\/STRONG>. To se více týká zacházení s mými moduly jako s balíčky při použití CDN. Jaký je rozdíl?<\/EM> Rád jste se zeptali!<\/P><\/P>Řekněme, že chcete sestavit svou aplikaci. Možná budete chtít využít
ArcGIS optimizer<\/A> nebo esri-slurp<\/A>, který má mimochodem skvělý příklad zde<\/A>. Budete chtít zacházet se svou aplikací jako s vlastním balíčkem. Co tím myslím? Podívejme se, jak používáte ArcGIS JS API.<\/P><\/P>
require(['esri/map', 'dojo/declare'], function(Map, declare) {\/*cool stuff*\});<\/PRE><\/P>V tomto případě je esri<\/STRONG> balíček a dojo<\/STRONG> je balíček. V API jsou zahrnuty i další balíčky, jako jsou dgrid<\/STRONG>, dstore<\/STRONG> a diijt<\/STRONG>. Je to proto, že když používáte Dojo build system<\/A>, ví, jak odkazovat na soubory. Takže můžete přirozeně zabalit svou aplikaci jako vlastní balíček nazvaný app<\/STRONG>. Můžete ho nazvat Sally, pokud chcete, ale předpokládejme, že app funguje dobře.<\/P><\/P>Dnes tedy rád strukturuji svou aplikaci podobně takto.<\/P>index.html<\/STRONG><\/SPAN>
dojoConfig.js<\/STRONG>
app\/
|-- styles\/
|-- models\/
|-- services\/
|-- utils\/
|-- widgets\/
|-- main.js
&nbs p ; &nbs p ; | -- app.profile.js
&nbs p ; &nbs p ; &nbs p ; | -- package.json
&nbs p ; &nbs p ; &nbs p ; | -- config.json
Zde mám soubor dojoConfig, který provádí základní nastavení. Mohl by vypadat takto:
var dojoConfig = {
async: true,
parseOnLoad: true,
isDebug: true,
deps: ['app/main']
}
};
Dobře, toto předpokládá, že budu používat esri-slurp ke stažení API a použiji bower k instalaci dalších závislostí. Pokud bych to používal jako CDN, přidal bych vlastnost packages takto:
packages: [{
name: 'app',
location: location.pathname.replace(/\/[^2F]+$/, '') + 'app'
}]
A to je vše.
Dobře, vydržte chvíli. Co je tohle blábolení o app.profile.js? Tento soubor definuje některé resourceTags pro náš balíček app. To v podstatě říká Dojo build systemu, že můj balíček používá AMD. Kolega mi o tom řekl, nemyslel jsem si, že to potřebuji, ale Dojo build system vás otravuje, pokud to nemáte. Vypadá to takto:
var profile = (function(){
return {
resourceTags: {
amd: function(filename, mid) {
return /\.js$/.test(filename);
}
}
};
})();
Soubory package.json dávají Dojo build systemu vědět, kde najít app.profile k použití.
{
"name": "myapp",
"version": "1.0.0",
"main": "main",
"description": "Demo app.",
"homepage": "",
"dojoBuild": "app.profile.js"
}
Soubory config.json používám už roky ve svých aplikacích ArcGIS JS API. Jsou to v podstatě nastavení nebo jak mapa vypadá či konfigurace widgetů. Mohu použít tento soubor nebo zavolat webovou službu pro získání těchto konfiguračních dat. Příklad toho můžete vidět zde. Zbytek aplikace je poměrně základní. Momentálně je moje struktura aplikace silně inspirována ember-cli, protože ji poslední dobou hodně používám.
Ale pokud používám React pro tvorbu UI, rád používám více Flux orientovanou strukturu.
index.html
dojoConfig.js
app\/
&nbs p ; &nbs p ; | -- styles\/
&nbs p ; &nbs p ; | -- stores\/
&nbs p ; &nbs p ; | -- actions\/
&nbs p ; &nbs p ; | -- helpers\/
&nbs p ; &nbs p ; | -- views\/
&nbs p ; &nbs p ; | -- main.js
&nbs p ; &nbs p ; | -- app.profile.js
&nbs p ; &nbs p ; | -- package.json
&nbs p ; &nbs p ; | -- config.json
Podobně bych postupoval i při použití Angularu, kde bych přijal strukturu využívající direktivy místo views nebo komponent. Momentálně pracuji na Yeoman<\ <A href="https://github.com/odoe/generator-arcgis-js-app" rel="nofollow noopener noreferrer" target="_blank">generator for ArcGIS JS Apps, který můžete vidět jako demo aplikaci zde. Je to stále dost experimentální, ale může to být užitečné pro některé.<\/P>
<\/P>
cmv-app má zajímavou strukturu aplikace používající konfigurační základ podobný tomuto starterkitu, na kterém jsem pracoval.<\/P>
<\/P>
Klíčem zde je, ať už se vám moje rada líbí nebo ne, vybrat si strukturu, která vám vyhovuje. Můžete mít svůj main.js jako řídicí prvek aplikace a jen mít složku widgetů se všemi vašimi UI věcmi. Opět, pokud to pro vás funguje, jste připraveni.<\/P>
<\/P>
Dostanu se k následnému blogovému příspěvku, který bude mluvit o dalším kroku zde, což je vytvoření vlastní sestavy vaší aplikace. To by mělo být zábavné!<\/P>
<\/P>
Pro více tipů a triků geodev, podívejte se na můj blog.<\/P><\/BODY><\/HTML>
