Mischen Sie es auf

ReneRubalcava

<\/HEAD>

<\/P>

Haben Sie schon einmal mit einer Anwendung mit einigen benutzerdefinierten Widgets begonnen und bemerkt, dass Ihr Widget vielleicht ein wenig ungezogen<\/STRONG> wird? Vielleicht ist es von 50 Zeilen Code auf 100, vielleicht 200, 1000<\/EM> angewachsen? Schämen Sie sich nicht, je nach Ihren Bedürfnissen können einige Widgets viel erfordern, um die Aufgabe zu erledigen, und genau darum geht es doch, oder? Die Aufgabe erledigen<\/EM>.<\/P><\/P>Machen Sie einen Schritt zurück und überlegen Sie, wie Sie dieses Widget vielleicht aufteilen können. Fügen Sie beispielsweise Grafiken zur Karte basierend auf bestimmten Widget-Ereignissen hinzu? Hören Sie auf Kartenaktivitäten, um eine Analyse mit dem aktuellen Kartenbereich und einem anderen Dienst durchzuführen, der möglicherweise nicht in der Karte geladen ist? Vielleicht müssen Sie einfach den aktuellen Standort des Benutzers bei jeder Aktivierung eines Widgets an einen FeatureService senden, möchten diese Funktionalität aber über alle Widgets hinweg portieren? Ich kenne Ihren Anwendungsfall nicht, aber wenn Sie einen Schritt zurücktreten und Ihr Widget in kleinere Teile zerlegen können, können wir die Verwaltung vielleicht einfacher machen.<\/P><\/P>Verhalten aufteilen<\/H2>Eine gute Möglichkeit, die Zusammensetzung von Widgets zu betrachten, besteht darin, das Verhalten zu betrachten, das Sie in Ihrem Widget benötigen. Zum Beispiel schauen wir uns das allseits berühmte dijit\/_WidgetBase<\/A> an, das Sie wahrscheinlich verwendet haben, um Ihre eigenen Widgets zu erstellen. Wenn Sie ein _WidgetBase<\/STRONG> erweitern, erhalten Sie eine Reihe von Verhaltensweisen, insbesondere den dijit-Lebenszyklus, eine Reihe von Methoden, die Sie überschreiben können, um Ihr Widget während seiner Erstellung zu bauen. Für weitere Details zu benutzerdefinierten Widgets und dem dijit-Lebenszyklus können Sie sich dieses Video in meinem Blog<\/A> ansehen. Außerdem erhalten Sie eine weitere Verhaltensweise, nämlich die set\/_get<\/STRONG>-Methoden für Attribute aus dojo\/_Stateful<\/A>, die es Ihnen ermöglichen, Änderungen zu beobachten.<\/P>

<\/P>

Wenn Sie nun möchten, dass dieses Widget eine vorgefertigte HTML-Zeichenkette verwendet, um seine Benutzeroberfläche zu definieren, können Sie das

dijit\/_TemplatedMixin<\/A> erweitern, das Ihnen eine einfache Eigenschaft hinzufügt: die templateString<\/STRONG>. Diese eine Eigenschaft ermöglicht es Ihnen, eine gesamte Benutzeroberfläche um Ihr Widget herum zu erstellen. Das ist ziemlich mächtig, wenn man darüber nachdenkt.<\/P><\/P>

Seien Sie auf Ihrem besten Verhalten<\/H2>Wie genau könnten Sie also beginnen, Mixins in Ihre eigenen Projekte einzubauen? Nehmen wir an, Ihnen fällt auf, dass Sie in Ihren Widgets ständig die Fähigkeit hinzufügen, die Karte neu zu zentrieren, wenn etwas passiert. Eine Möglichkeit dies zu erreichen besteht darin, dieses Verhalten in ein Mixin auszulagern. Ich weiß nicht ob es Konvention ist, aber mir fällt in der dijit-Bibliothek<\/A> auf, dass Mixins mit einem Unterstrich beginnen. Also nennen wir ein Mixin _RecenterMixin<\/STRONG>.<\/P><\/P>Das könnte ungefähr so aussehen:<\/P>define([\n  'dojo\/_base\declare'\n], function(declare) {\n  return declare(null, {\n    \/\/- dieses Mixin geht davon aus\n    \/\/- dass Ihrer Widget eine Karte zugewiesen ist.\n    \/\/- es wird auch angenommen, dass die Karte mit\n    \/\/- einem Zentrum und Zoom initialisiert wurde\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>Jetzt können Sie also ein Widget erstellen, das dieses Mixin erweitert und einfach die recenter-Methode aufruft, wenn Sie sie brauchen. Ich kann es in einem Widget verwenden, das BasemapGallery<\/A> umschließt und die Karte neu zentriert, wenn die Basiskarte geändert wird.<\/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  & nbsp ; hide: function() { \ n & nbsp ; & nbsp ; esriDomUtils.hide(this.domNode); \ n & nbsp ; }, \ n & nbsp ; show: function() { \ n & nbsp ; & nbsp ; esriDomUtils.show(this.domNode); \ n & nbsp ; } \ n }); \ n }); < \/ PRE > < P > < SPAN style = "font-size: 8pt ; color : #505050 ; " > < EM > Wenn ich mir dieses Beispiel anschaue , könnte ich sogar die Methoden hide/show in ein Mixin verschieben und anderswo wiederverwenden < \/ EM > < \/ SPAN > < \/ P > < P > < \/ P > < H2 id = "toc-hId-1015442459" id = "toc-hId-1015442459" > Warte mal kurz < \/ H2 > < P > Vielleicht fragen Sie sich , < EM > was der Unterschied ist < \/ EM > zwischen etwas wie < STRONG > _WidgetBase < \/ STRONG > und einem Mixin ? Typischerweise ist ein Mixin für sich genommen ziemlich nutzlos . Im obigen Beispiel , wenn Sie nur < STRONG > _RecenterMixin < \/ STRONG > allein erweitern würden , hätten Sie nicht die Methode < STRONG > postCreate < \/ STRONG > oder eine < STRONG > templateString < \/ STRONG > zur Verfügung . Ein Mixin kann sogar von etwas wie < STRONG > _WidgetBase < \/ STRONG > abhängen , indem es sich in Lebenszyklusmethoden einklinkt . Im Kern erweitern Sie immer noch Module , erweitern das Verhalten von Widgets . < \/ P > < P > < \/ P > < P > Ich habe ein < A href = "https:\/\/github.com\/odoe\/esrijs-mixin-sample" rel = "nofollow noopener noreferrer" target = "_blank" > Demo-Repo dieses Projekts < \/ A > auf github für Sie zum Ausprobieren bereitgestellt . < \/ P > < P > < \/ P > < P > Also gehen Sie raus und sehen Sie , ob Sie Mixins in Ihrem Projekt auslagern können und vielleicht die Wartung Ihrer Anwendung vereinfachen . Vielleicht stellen Sie fest , dass Ihnen die Möglichkeit gefällt , Verhalten zwischen verschiedenen Widgets wiederzuverwenden , und so mehr Nutzen aus all der harten Arbeit ziehen , die Sie in Ihren Code gesteckt haben . < \/ P > < P > < \/ P > < P > Für weitere geodev Tipps und Tricks besuchen Sie meinen Blog unter < A href = "http:\/\/odoe.net\/blog\/" rel = "nofollow noopener noreferrer" target = "_blank" > meinem Blog 

.