Mézclalo

ReneRubalcava

<\/HEAD>

<\/P>

¿Alguna vez has empezado a trabajar en una aplicación con algunos widgets personalizados y comienzas a notar que tal vez tu widget está empezando a volverse un poco indisciplinado<\/STRONG>? ¿Quizás ha pasado de 50 líneas de código a 100, tal vez 200, 1000<\/EM>? No te avergüences, dependiendo de tus necesidades, algunos widgets pueden requerir muchas cosas para hacer el trabajo, y de eso se trata todo, ¿verdad? Hacer el trabajo<\/EM>.<\/P><\/P>Toma un paso atrás y comienza a mirar cómo tal vez puedes dividir ese widget. ¿Estás haciendo cosas como agregar gráficos al mapa basados en ciertos eventos del widget? ¿Estás escuchando la actividad del mapa para hacer algún análisis usando la extensión actual del mapa y otro servicio que puede no estar cargado en el mapa? Tal vez solo necesitas enviar la ubicación actual del usuario a un FeatureService cada vez que se activa un widget, pero te gustaría portar esta funcionalidad a todos los widgets. No conozco tu caso de uso, pero si puedes dar un paso atrás y comenzar a dividir tu widget en piezas más pequeñas, tal vez podamos empezar a hacer las cosas más fáciles de manejar.<\/P><\/P>Divide el comportamiento<\/H2>Una buena forma de ver la composición de widgets es observar el comportamiento que necesitas en tu widget. Por ejemplo, veamos el siempre famoso dijit\/_WidgetBase<\/A> que probablemente hayas usado para construir tus propios widgets. Cuando extiendes un _WidgetBase<\/STRONG>, se te da un conjunto de comportamientos, notablemente el ciclo de vida dijit, que es un conjunto de métodos que puedes sobrescribir para construir tu widget durante su creación. Para más detalles sobre widgets personalizados y el ciclo de vida dijit, puedes consultar este video en mi blog<\/A>. También obtienes otro conjunto de comportamientos, que son los métodos set\get<\/STRONG> para atributos de dojo\Stateful<\/A>, que te permiten observar cambios.<\/P>

<\/P>

Ahora, si quieres que este widget use una cadena HTML templada para definir su interfaz de usuario, puedes extender el

dijit\/_TemplatedMixin<\/A> que añade una propiedad simple para ti, la templateString<\/STRONG>. Esa única propiedad te permite construir toda una UI alrededor de tu widget. Eso es bastante poderoso cuando lo piensas.<\/P><\/P>

Compórtate bien<\/H2>Entonces, ¿cómo exactamente podrías empezar a incorporar mixins en tus propios proyectos? Supongamos que notas que en tus widgets constantemente estás añadiendo la capacidad de recentrar el mapa cuando algo sucede. Una forma de lograr esto es separar ese comportamiento en un mixin. No sé si es convención, pero noto en la biblioteca dijit<\/A> que los mixins tienen prefijo con un guion bajo, así que hagamos un mixin llamado _RecenterMixin<\/STRONG>.<\/P><\/P>Podría verse algo así:<\/P>define([\n  'dojo\/_base\declare'\n], function(declare) {\n  return declare(null, {\n    \/\/- este mixin funciona bajo la suposición\n    \/\/- de que tienes un mapa asignado a tu widget.\n    \/\/- también asume que el mapa fue inicializado con\n    \/\/- un centro y 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>Así que ahora puedes hacer un widget que extienda este mixin y simplemente llamar al método recenter cuando lo necesites. Puedo usarlo en un widget que envuelve BasemapGallery<\/A> y recentrar el mapa cuando se cambia el mapa base.<\/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&nbsp:& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;;& nbsp;; & nbsp ; esriDomUtils.hide(this.domNode); \ n & nb sp ; }, \ n & nb sp ; show: function() { \ n & nb sp ; & nb sp ; & nb sp ; & nb sp ; & nb sp ; & nb sp ; & nb sp ; & nb sp ; esriDomUtils.show(this.domNode); \ n & nb sp ; } \ n }); \ n}); < / PRE > < P > < SPAN style = " font-size: 8pt ; color : #505050 ; " > < EM > Mirando este ejemplo , incluso podría mover los métodos hide/show a un mixin y reutilizarlo en otro lugar < / EM > < / SPAN > < / P > < P > < / P > < H2 id = " toc-hId-1015442459 " id = " toc-hId-1015442459 " > Espera un segundo < / H2 > < P > Podrías preguntarte a ti mismo < EM > ¿cuál es la diferencia < / EM > entre algo como < STRONG > _WidgetBase < / STRONG > y un mixin? Típicamente , un mixin por sí solo es bastante inútil . En el ejemplo anterior , si solo extendieras < STRONG > _RecenterMixin < / STRONG > solo , no tendrías el método < STRONG > postCreate < / STRONG > ni una < STRONG > templateString < / STRONG > con qué trabajar . Un mixin puede incluso depender de algo como < STRONG > _WidgetBase < / STRONG > , enganchándose en métodos del ciclo de vida . En esencia , todavía estás extendiendo módulos , extendiendo el comportamiento o widgets . < / P > < P > < / P > < P > He puesto un repositorio demo de este proyecto en github para que juegues con él . Puedes verlo aquí : < 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 > Así que sal ahí y ve si puedes empezar a separar mixins en tu proyecto y tal vez simplificar el mantenimiento de tu aplicación . Podrías descubrir que realmente te gusta la capacidad de reutilizar comportamientos entre diferentes widgets , < EM > sacar más provecho de todo el trabajo duro que pusiste en tu código </ EM > . </ P >< P >< / P >< P > Para más consejos y trucos geodev , visita mi blog : < A href = " http://odoe.net/blog/ " rel = " nofollow noopener noreferrer " target = " _blank " > mi blog </ A > . </ P >< / BODY >< / HTML >