Mélangez-le

ReneRubalcava

<\/HEAD>

<\/P>

Avez-vous déjà commencé à travailler sur une application avec des widgets personnalisés et vous commencez à remarquer que peut-être votre widget commence à devenir un peu indiscipliné<\/STRONG> ? Peut-être qu'il est passé de 50 lignes de code à 100, peut-être 200, 1000<\/EM> ? N'ayez pas honte, selon vos besoins, certains widgets peuvent nécessiter beaucoup de choses pour accomplir la tâche, et c'est bien ce qui nous importe, n'est-ce pas ? Accomplir la tâche<\/EM>.<\/P><\/P>Faites un pas en arrière et commencez à regarder comment vous pouvez peut-être décomposer ce widget. Faites-vous des choses comme ajouter des graphiques à la carte en fonction de certains événements du widget ? Écoutez-vous l'activité de la carte pour faire une analyse en utilisant l'étendue actuelle de la carte et un autre service qui pourrait ne pas être chargé dans la carte ? Peut-être avez-vous juste besoin d'envoyer la position actuelle des utilisateurs à un FeatureService chaque fois qu'un widget est activé, mais vous aimeriez porter cette fonctionnalité à travers tous les widgets ? Je ne connais pas votre cas d'utilisation, mais si vous pouvez prendre du recul et commencer à décomposer votre widget en morceaux plus petits, peut-être pouvons-nous commencer à rendre les choses plus faciles à gérer.<\/P><\/P>Décomposez le comportement<\/H2>Une bonne façon de voir la composition d'un widget est d'examiner le comportement dont vous avez besoin dans votre widget. Par exemple, regardons le célèbre dijit\/_WidgetBase<\/A> que vous avez probablement utilisé pour construire vos propres widgets. Lorsque vous étendez un _WidgetBase<\/STRONG>, on vous donne un ensemble de comportements notamment le cycle de vie dijit, qui est un ensemble de méthodes que vous pouvez remplacer pour construire votre widget lors de sa création. Pour plus de détails sur les widgets personnalisés et le cycle de vie dijit, vous pouvez consulter cette vidéo sur mon blog<\/A>. Vous obtenez également un autre ensemble de comportements, qui sont les méthodes set\get<\/STRONG> pour les attributs de dojo\Stateful<\/A>, qui vous permettent de surveiller les changements.<\/P>

<\/P>

Maintenant, si vous voulez que ce widget utilise une chaîne HTML modélisée pour définir son interface utilisateur, vous pouvez étendre le

dijit\/_TemplatedMixin<\/A> qui ajoute une propriété simple pour vous, la templateString<\/STRONG>. Cette unique propriété vous permet de construire toute une interface utilisateur autour de votre widget. C'est assez puissant quand on y pense.<\/P><\/P>

Comportez-vous bien<\/H2>Alors comment pourriez-vous commencer à incorporer des mixins dans vos propres projets ? Supposons que vous remarquiez que dans vos widgets vous ajoutez constamment la capacité de recentrer la carte lorsqu'il se passe quelque chose. Une façon d'y parvenir est d'extraire ce comportement dans un mixin. Je ne sais pas si c'est une convention, mais je remarque dans la bibliothèque dijit<\/A> que les mixins sont préfixés par un underscore, alors créons un mixin appelé _RecenterMixin<\/STRONG>.<\/P><\/P>Cela pourrait ressembler à ceci :<\/P>define([\n  'dojo\/_base\declare'\n], function(declare) {\n  return declare(null, {\n    \/\/- ce mixin fonctionne sous l'hypothèse\n    \/\/- que vous avez une carte assignée à votre widget.\n    \/\/- il suppose aussi que la carte a été initialisée avec\n    \/\/- un centre et un zoom\n    recenter: function() {\n      var map = this.get('map');\n      var params = map._mapParams;\n      if (params.center) {\n        map.centerAt(params.center);\n      }\n    }\n  });\n});<\/PRE><\/P>Vous pouvez donc maintenant créer un widget qui étend ce mixin et simplement appeler la méthode recenter quand vous en avez besoin. Je peux l'utiliser dans un widget qui enveloppe BasemapGallery<\/A> et recentrer la carte lorsque la carte de base est changée.<\/P>

define([\n  'dojo\/_base\declare',\n  'dojo\/_base\lang',\n  'dojo\/dom',\n  'dojo\/dom-construct',\n  'esri\/domUtils',\n  'esri\/dijit\/BasemapGallery',\n  'dijit\/_WidgetBase',\n  'dijit\/_TemplatedMixin',\n  '.\/_RecenterMixin',\n  'dojo\/text!.\/_templates\/BasemapSwitcher.html'\n], function(\n  declare, lang, dom, domConstruct,\n  esriDomUtils, BasemapGallery,\n  _WidgetBase, _TemplatedMixin,\n  _RecenterMixin,\n  template\n) {\n  return declare([_WidgetBase, _TemplatedMixin, _RecenterMixin], {\n    templateString: template,\n    postCreate: function() {\n      var node = dom.byId('map_root');\n      esriDomUtils.hide(this.domNode);\n      domConstruct.place(this.domNode, node);\n      var map = this.get('map');\n      this.gallery = new BasemapGallery({\n        map: map,\n        showArcGISBasemaps: true\n      }, this.bmNode);\n      this.gallery.startup();\n      this.gallery.on('selection-change', lang.hitch(this, function() {\n        this.recenter(); \/\/ MIXIN MAGIC\n      }));\n    },\n    hide: function() {\n      esriDomUtils.hide(this.domNode);\n    },\n    show: function() {\n&nbsp:& nbsp ;& nbsp ; esriDomUtils.show(this.domNode); \ n & nbsp ; & nbsp ; } \ n & nbsp ; }); \ n}); < / PRE > < P > < SPAN style = "font-size: 8pt ; color : #505050 ; " > < EM > En regardant cet exemple , je pourrais même déplacer les méthodes hide / show vers un mixin et les réutiliser ailleurs < / EM > < / SPAN > < / P > < P > < / P > < H2 id = "toc-hId-1015442459" id = "toc-hId-1015442459" > Attendez une seconde < / H2 > < P > Vous pourriez vous demander < EM > quelle est la différence < / EM > entre quelque chose comme < STRONG > _WidgetBase < / STRONG > et un mixin ? Typiquement , un mixin seul est assez inutile . Dans l'exemple ci-dessus , si vous étendiez juste < STRONG > _RecenterMixin < / STRONG > seul , vous n'auriez pas la méthode < STRONG > postCreate < / STRONG > ni une < STRONG > templateString < / STRONG > avec laquelle travailler . Un mixin peut même dépendre de quelque chose comme < STRONG > _WidgetBase < / STRONG > , s'accrochant aux méthodes du cycle de vie . Au cœur , vous étendez toujours des modules , étendant le comportement ou les widgets . < / P > < P > < / P > < P > J'ai mis un dépôt démo de ce projet sur github pour que vous puissiez jouer avec : < A href = "https://github.com/odoe/esrijs-mixin-sample" rel = "nofollow noopener noreferrer" target = "_blank" > demo repo of this project </ A > . < / P > < P > < / P > < P > Alors allez-y et voyez si vous pouvez commencer à extraire des mixins dans votre projet et peut-être simplifier la maintenance de votre application . Vous pourriez découvrir que vous aimez vraiment la capacité à réutiliser le comportement entre différents widgets , < EM > tirer davantage parti de tout le travail acharné que vous avez investi dans votre code </ EM > . < / P > < P > < / P > < P > Pour plus d'astuces geodev , consultez mon blog : < A href = "http://odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank" > my blog </ A > .< / P >< / BODY >< / HTML >