Misture tudo

ReneRubalcava

<\/HEAD>

<\/P>

Você já começou a trabalhar em uma aplicação com alguns widgets personalizados e começou a perceber que talvez seu widget esteja começando a ficar um pouco indisciplinado<\/STRONG>? Talvez tenha passado de 50 linhas de código para 100, talvez 200, 1000<\/EM>? Não se envergonhe, dependendo das suas necessidades, alguns widgets podem exigir muita coisa para fazer o trabalho, e é disso que se trata, certo? Fazer o trabalho<\/EM>.<\/P><\/P>Dê um passo atrás e comece a olhar como talvez você possa dividir esse widget. Você está fazendo coisas como adicionar gráficos ao mapa com base em certos eventos do widget? Está ouvindo a atividade do mapa para fazer alguma análise usando a extensão atual do mapa e outro serviço que pode não estar carregado no mapa? Talvez você só precise enviar a localização atual dos usuários para um FeatureService toda vez que um widget for ativado, mas gostaria de portar essa funcionalidade para todos os widgets? Eu não conheço seu caso de uso, mas se você puder dar um passo atrás e começar a dividir seu widget em pedaços menores, talvez possamos começar a tornar as coisas mais fáceis de gerenciar.<\/P><\/P>Divida o comportamento<\/H2>Uma boa forma de olhar para a composição do widget é observar o comportamento que você precisa no seu widget. Por exemplo, vamos olhar para o famoso dijit\/_WidgetBase<\/A> que você provavelmente usou para construir seus próprios widgets. Quando você estende um _WidgetBase<\/STRONG>, você recebe um conjunto de comportamentos, principalmente o ciclo de vida dijit, que é um conjunto de métodos que você pode sobrescrever para construir seu widget durante sua criação. Para mais detalhes sobre widgets personalizados e o ciclo de vida dijit, você pode conferir este vídeo no meu blog<\/A>. Você também obtém outro conjunto de comportamentos, que são os métodos set\get<\/STRONG> para atributos do dojo\Stateful<\/A>, que permitem observar mudanças.<\/P>

<\/P>

Agora, se você quiser que esse widget use uma string HTML templateada para definir sua interface de usuário, você pode estender o

dijit\/_TemplatedMixin<\/A> que adiciona uma propriedade simples para você, a templateString<\/STRONG>. Essa única propriedade permite construir uma interface completa ao redor do seu widget. Isso é bastante poderoso quando você pensa nisso.<\/P><\/P>

Comporte-se bem<\/H2>Então, como exatamente você poderia começar a incorporar mixins em seus próprios projetos? Vamos supor que você percebeu que em seus widgets está constantemente adicionando a capacidade de recentralizar o mapa quando algo acontece. Uma forma de conseguir isso é separar esse comportamento em um mixin. Não sei se é convenção, mas percebo na biblioteca dijit<\/A> que mixins são prefixados com um sublinhado, então vamos criar um mixin chamado _RecenterMixin<\/STRONG>.<\/P><\/P>Poderia ser algo assim:<\/P>define([\n  'dojo\/_base\declare'\n], function(declare) {\n  return declare(null, {\n    \/\/- este mixin funciona sob a suposição\n    \/\/- de que você tem um mapa atribuído ao seu widget.\n    \/\/- também assume que o mapa foi inicializado com\n    \/\/- um centro e 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>Agora você pode criar um widget que estenda esse mixin e apenas chamar o método recenter quando precisar. Posso usá-lo em um widget que envolve o BasemapGallery<\/A> e recentralizar o mapa quando o mapa base for alterado.<\/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 ; esriDomUtils.hide(this.domNode); \ n & nbsp ;& nbsp ;}, \ n & nbsp ;& nbsp ; show: function() { \ n & nbsp ;& nbsp ; esriDomUtils.show(this.domNode); \ n & nbsp ;& nbsp ;} \ n }); \ n}); < / PRE > < P > < SPAN style = "font-size: 8pt ; color : #505050 ; " > < EM > Olhando este exemplo , eu poderia até mover os métodos hide / show para um mixin e reutilizá-los em outro lugar < / EM > < / SPAN > < / P > < P > < / P > < H2 id = "toc-hId-1015442459" id = "toc-hId-1015442459" > Espere um segundo < / H2 > < P > Você pode estar se perguntando < EM > qual é a diferença < / EM > entre algo como < STRONG > _WidgetBase < / STRONG > e um mixin ? Normalmente , um mixin por si só é bastante inútil . No exemplo acima , se você apenas estendesse o < STRONG > _RecenterMixin < / STRONG > sozinho , não teria o método < STRONG > postCreate < / STRONG > ou uma < STRONG > templateString < / STRONG > para trabalhar . Um mixin pode até depender de algo como o < STRONG > _WidgetBase < / STRONG > , conectando-se aos métodos do ciclo de vida . No fundo , você ainda está estendendo módulos , estendendo o comportamento ou widgets . < / P > < P > < / P > < P > Eu coloquei um repositório demo deste projeto no GitHub para você brincar : < A href = "https : \/ \/ github.com \/ odoe \/ esrijs-mixin-sample " rel = "nofollow noopener noreferrer" target = "_blank" > demo repo deste projeto </ A > . </ P >< P >< / P >< P > Então vá lá e veja se consegue começar a separar mixins no seu projeto e talvez simplificar a manutenção da sua aplicação . Você pode descobrir que realmente gosta da capacidade de reutilizar comportamentos entre diferentes widgets , < EM > aproveitar mais todo o trabalho duro que colocou no seu código </ EM > . </ P >< P >< / P >< P > Para mais dicas e truques geodev , confira meu blog : < A href = "http : \/ \/ odoe.net \/ blog \/ " rel = "nofollow noopener noreferrer" target = "_blank" > meu blog </ A > . </ P >< / BODY >< / HTML >