Restez sur le sujet

ReneRubalcava

<\/HEAD>

Précédemment, j'avais parlé de la façon dont vous pouvez étendre dojo\/on<\/A> pour faire quelques astuces sympas avec les écouteurs d'événements. Cette fois, j'aimerais parler de dojo\/topic<\/A>. Vous pouvez considérer le module topic comme un EventBus<\/EM>. Voici une bonne explication (non JavaScript) d'un EventBus en ce qui concerne Java<\/A>. C'est essentiellement un système de messagerie singleton ou global pour votre application.<\/P>

<\/P>

Ce que vous faites peut-être maintenant<\/STRONG><\/SPAN><\/P>Disons par exemple que vous aviez deux widgets que vous vouliez utiliser dans votre application et que vous vouliez passer des informations entre les deux. Vous pourriez essayer de passer chaque widget dans l'autre et essayer d'écouter des événements, mais cela deviendrait rapidement désordonné. Vous pourriez simplement avoir un seul module qui écoute les événements dans chaque widget, similaire à quelque chose comme ceci.<\/P><\/P>on(widget1, 'load', function() {
  widget2.doSomething();
});
on(widget2, 'load', function() {
  widget1.doSomething();
});<\/PRE><\/P>Ce n'est pas si mal, mais si votre application doit grandir, vous allez trouver que cela peut devenir franchement laid et difficile à déboguer après un certain temps.<\/P><\/P>Ce que vous pourriez faire<\/STRONG><\/SPAN><\/P>C'est là que dojo\/topic intervient. Chaque widget peut utiliser dojo\/topic pour s'abonner à certains messages. C'est similaire aux événements, mais ce n'est pas dépendant des dijits individuels.<\/P><\/P>topic.subscribe('dijit-message', function(payload) { \/** faire quelque chose **\ });<\/PRE>Puis tout dijit ou autre partie de votre application peut publier sur ce canal.<\/P><\/P>topic.publish('dijit-message', { message: 'hello' });<\/PRE><\/P>Remarquez les méthodes subscibe\/publish<\/EM>? C'est exact, dojo\/topic<\/EM> est un

pubsub.<\/A><\/STRONG> BOUM!<\/EM><\/P><\/P>Démo<\/STRONG><\/SPAN><\/P>Voici une démo simple<\/A> de la façon dont vous pourriez utiliser cela dans votre application.<\/P>

require([
  'esri\/map',
  'dojo\/_base\/_declare',
  'dojo/on',
  'dojo/topic',
  'put-selector',
  'dijit\/_WidgetBase',
  'dojo/domReady!'
], function(Map, declare, on, topic, put, _WidgetBase) {
  
  var Dijit1 = declare([_WidgetBase], {
    postCreate: function() {
      this.btnNode = put(this.domNode, 'button', 'Cliquez-moi !');
      this.own(on(this.btnNode, 'click', this.onClick.bind(this)),
        topic.subscribe('dijit2-click', function(data) {
        var oldValue = this.btnNode.innerHTML;
        this.btnNode.innerHTML = data.value;
        setTimeout(function() {
          this.btnNode.innerHTML = oldValue;
        }.bind(this), 1000);
      }.bind(this)));
    },
    onClick: function() {
      topic.publish('dijit1-click', { value: 'Bonjour de dijit1 !' });
    }
  });
  
  var Dijit2 = declare([_WidgetBase], {
    postCreate: function() {
      this.btnNode = put(this.domNode, 'button', 'Cliquez-moi !');
      this.own(on(this.btnNode, 'click', this.onClick.bind(this)),
        topic.subscribe('dijit1-click', function(data) {
        var oldValue = this.btnNode.innerHTML;
 &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; this.btnNode.innerHTML = data.value;
 . & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.setTimeout(function() {
& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.this.btnNode.innerHTML = oldValue;
& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; }.bind(this), 1000);
& nbsp.; }.bind(this)));
& nbsp.; },
& nbsp.; onClick: function() {
& nbsp.; & nbsp.; topic.publish('dijit2-click', { value: 'Bonjour de dijit2 !' });
& nbsp.; }
& });

& var d1 = new Dijit1(null, document.getElementById('dijit1'));
& var d2 = new Dijit2(null, document.getElementById('dijit2'));

& var map = new Map('map', {
& & center: [-118, 34.5],
& & zoom: 8,
& & basemap: 'topo'
& });
});< / PRE >< P >< / P >< P >< SPAN style = "font-size: 14pt ; " >< STRONG > Pouvez-vous voir la lumière ? < / STRONG >< / SPAN >< / P >< P > Espérons que vous pouvez voir comment cela pourrait être un moyen puissant de transmettre des données entre vos widgets personnalisés dans votre application. J'utilise cela assez souvent pour gérer quels widgets sont visibles dans une application. Par exemple, cliquez sur un bouton, affichez < EM > widget1 < / EM > , cliquez sur un autre bouton, fermez < EM > widget1 < / EM > et ouvrez < EM > widget2 < / EM > . Je l'utilise également pour transmettre une fonctionnalité dont d'autres widgets pourraient dépendre.< / P >< P >< / P >< P > Il existe de nombreuses façons créatives d'utiliser < EM > dojo/topic < / EM > dans votre application. Ceci était juste une introduction rapide à un module que je trouve utile au quotidien.< / P >< / BODY >< / HTML >

KyleMorgan

Fantastic write-up that's easy to follow along. 

Rene, great job as always.