Surveillance de méthode dans différents composants de react - mode de publication-abonnement eventProxy

1. Problèmes de demande:

Lorsque vous faites des React-ant-design-mobileprojets APP. La page de liste doit être actualisée lorsque l'événement de réinitialisation est déterminé dans la barre de navigation. Et ces deux composants n'ont rien à voir l'un avec l'autre. À ce stade, eventProxyles fonctions de méthode pour surveiller différents composants sont utilisées.
2,

• on, one: les fonctions on et one sont utilisées par les abonnés pour surveiller les événements correspondants et utiliser la fonction en réponse à l'événement comme paramètre. La seule différence entre on et one est que la fonction qui en utilise un pour s'abonner ne sera déclenchée une fois, lors de l'utilisation de La fonction souscrite sera déclenchée à chaque fois que l'événement se produit.
• Déclencheur: le déclencheur est utilisé par l'éditeur pour publier des événements et prend d'autres paramètres à l'exception du premier paramètre (nom de l'événement) comme nouveaux paramètres pour déclencher la fonction d'abonnement à l'aide de one and on.
• off: permet de libérer toutes les fonctions souscrites à un événement.

3. Tout d'abord, vous devez importer des eventProxyfichiers.
Mettez-le dans un fichier séparément, utilisez un script pour importer ou importez important pour utiliser eventProxy;

const eventProxy = {
    
    
  onObj: {
    
    },
  oneObj: {
    
    },
  on: function (key, fn) {
    
    
    if (this.onObj[key] === undefined) {
    
    
      this.onObj[key] = [];
    }
    const args = [].concat(Array.prototype.slice.call(arguments, 1));
    for (let i = 0; i < args.length; i++) {
    
    
      this.onObj[key].push(args[i]);
    }
  },
  one: function (key, fn) {
    
    
    if (this.oneObj[key] === undefined) {
    
    
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function (key) {
    
    
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  trigger: function () {
    
    
    let key, args;
    if (arguments.length == 0) {
    
    
      return false;
    }
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));
    if (this.onObj[key] !== undefined
      && this.onObj[key].length > 0) {
    
    
      for (let i in this.onObj[key]) {
    
    
        this.onObj[key][i].call(null, args[i]);
      }
    }
    if (this.oneObj[key] !== undefined
      && this.oneObj[key].length > 0) {
    
    
      for (let i in this.oneObj[key]) {
    
    
        this.oneObj[key][i].apply(null, args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};

export default eventProxy;

4. Utilisez

• Dans la méthode des composants à surveiller:
• import eventProxy from '../../utils/eventProxy' Importer le fichier
• Dans la méthode à surveiller,
  je suis ici pour déterminer l'événement

  queryClick = () => {
    
    
   eventProxy.trigger('query', 'list')
    this.setState({
    
    
      visible: false,
    })
  }

• Ensuite, utilisez-le dans le composant qui doit effectuer l'action correspondante
• En cours d' componentDidMountutilisation

  componentDidMount() {
    
    
    // 清除事件监听
    eventProxy.on('query', () => {
    
    
      this.getDynamicsList()
    })
    // eventProxy.on('clear', () => {
    
    
    //   this.getDynamicsList()
    // })
  }

Après utilisation, veillez à effacer l'écouteur d'événements lorsque le composant est désinstallé

  componentWillUnmount = () => {
    
    
    // 清除监听
    eventProxy.off('query', '');
  }

5. De cette manière, les différentes méthodes et événements des composants sont connectés.

Peut faire référence au mode d'apparence

Le mode d'apparence est un mode relativement simple et omniprésent. Le mode d'affichage fournit une interface de haut niveau, ce qui rend le client ou le sous-système plus pratique à appeler. Exprimé dans un morceau de code qui ne pourrait pas être plus simple:

Implémentez un
modèle d' éditeur / observateur d' abonnement simple , qui définit une relation de dépendance un-à-plusieurs entre les objets. Lorsque l'état d'un objet change, tous les objets qui en dépendent sont notifiés.
En fait, tant que vous avez déjà lié une fonction d'événement à un nœud DOM, vous avez utilisé le mode observateur!
document.body.addEventListener ('clic', function () { alert (2); });

Mais ce n'est que l'utilisation la plus simple du mode observateur. Dans de nombreux scénarios, nous implémentons souvent des événements personnalisés pour répondre à nos besoins.
Par exemple:
vous allez dans une entreprise pour postuler à un emploi, et après un entretien, hr vous dit: "D'accord, vous revenez et attendez l'avis!".
À ce moment, 1. Vous allez demander le numéro de téléphone de l'entreprise, puis l'appelez tous les jours pour demander le résultat
2. Laissez votre numéro de téléphone portable à hr, puis attendez qu'il vous appelle

Je crois que plusieurs fois, tout le monde choisit ce dernier.
Au cas où vous le dérangeriez en appelant hr tous les jours, peut-être qu'il avait initialement prévu de vous recruter, et maintenant il n'a plus l'intention de vous attaquer!
Alors à ce moment, hr équivaut à un éditeur, et vous êtes abonné!
Eh bien, la plupart des gens qui vous demandent de revenir en arrière et d'attendre les nouvelles ne sont d'aucune aide ...
J'ai aussi rencontré une entreprise qui ne vous avertit même pas si vous n'êtes pas admis!
Alors, comment mettre en œuvre un modèle d'observateur simple?
Pour spécifier un éditeur;
ajouter une liste de cache à l'éditeur pour stocker des fonctions de rappel afin d'avertir les abonnés; (de nombreuses personnes de cette société viennent postuler) Lorsque le
message est finalement publié, l'éditeur parcourra la liste de cache et la déclenchera à son tour Stocké fonction de rappel d'abonné; (vous ou vous plus)

var event = {
    
    }; //发布者（hr）
event.clietList = []; //发布者的缓存列表（应聘者列表）
event.listen = function(fn) {
    
     //增加订阅者函数
this.clietList.push(fn);
};
event.trigger = function() {
    
     //发布消息函数
for (var i = 0; i < this.clietList.length; i++) {
    
    
    var fn = this.clietList[i];
    fn.apply(this, arguments);
}
};
event.listen(function(time) {
    
     //某人订阅了这个消息
console.log('正式上班时间：' + time);
});
event.trigger('2016/10',yes); //发布消息
//输出 正式上班时间:2016/10
到这里，我们已经实现了一个最简单的观察者模式了！
但是上面的函数其实存在一个问题，那就是发布者没办法选择自己要发布的消息类型！
比如这家公司同时在招php，web前端，如果使用上面的函数就没办法区分职位了！只能一次性把全部订阅者都发送一遍消息。
对上面的代码进行改写：
var event = {
    
    }; //发布者（hr）
event.clietList = []; //发布者的缓存列表（应聘者列表）
event.listen = function(key, fn) {
    
     //增加订阅者函数
if (!this.clietList[key]) {
    
    
    this.clietList[key] = [];
}
this.clietList[key].push(fn);
};
event.trigger = function() {
    
     //发布消息函数
var key = Array.prototype.shift.call(arguments),
    fns = this.clietList[key];
for (var i = 0; i < fns.length; i++) {
    
    
    var fn = fns[i];
    fn.apply(this, arguments);
}
};
event.listen('web前端', fn1 = function(time) {
    
     //小强订阅了这个消息。
console.log('姓名：小强');
console.log('正式上班时间：' + time);
});
event.listen('web前端', fn2 = function(time) {
    
     //大大强订阅了这个消息
console.log('姓名：大大强');
console.log('正式上班时间：' + time);
});
//发布者发布消息
event.trigger('web前端','小强', '2016/10'); //姓名：小强 正式上班时间：2016/10
event.trigger('php','大大强', '2016/15'); //姓名：大大强 正式上班时间：2016/15
通过添加了一个key，我们实现了对职位的判断。
有了订阅事件，我们怎么能少了取消订阅事件呢？
event.remove = function(key, fn) {
    
    
var fns = this.clietList[key];
if (!fns) {
    
    
    return false;
}
if (!fn) {
    
     //如果没有传入fn回调函数，直接取消key对应消息的所有订阅
    this.clietList[key] = [];
} else {
    
    
    for (var i = 0; i < fns.length; i++) {
    
     //遍历回调函数列表
        var _fn = fns[i];
        if (_fn === fn) {
    
    
            fns.splice(i, 1); //删除订阅者的回调函数
        }
    }
}
};
//这时候必须指定回调函数，否则无法在remove函数中进行对比删除。
event.listen('web前端', fn1 = function(time) {
    
     //小强订阅了这个消息。
console.log('姓名：小强');
console.log('正式上班时间：' + time);
});
event.listen('web前端', fn2 = function(time) {
    
     //大大强订阅了这个消息
console.log('姓名：大大强');
console.log('正式上班时间：' + time);
});
event.remove('web前端',fn1);
//发布者发布消息
event.trigger('web前端','2016/10');
//输出 姓名：大大强 正式上班时间：2016/10

Améliorez le code ci-dessus, créez un objet global pour implémenter le mode observateur,
utilisez des fermetures pour implémenter des variables privées et exposez uniquement les API nécessaires aux utilisateurs:

var event = (function() {
    
    
var clietList = []; //发布者的缓存列表（应聘者列表）

var listen = function(key, fn) {
    
     //增加订阅者函数
    if (!this.clietList[key]) {
    
    
        this.clietList[key] = [];
    }
    this.clietList[key].push(fn);
};

var trigger = function() {
    
     //发布消息函数
    var key = Array.prototype.shift.call(arguments),
        fns = this.clietList[key];
    for (var i = 0; i < fns.length; i++) {
    
    
        var fn = fns[i];
        fn.apply(this, arguments);
    }
};

var remove = function(key, fn) {
    
    
    var fns = this.clietList[key];
    if (!fns) {
    
    
        return false;
    }
    if (!fn) {
    
     //如果没有传入fn回调函数，直接取消key对应消息的所有订阅
        this.clietList[key] = [];
    } else {
    
    
        for (var i = 0; i < fns.length; i++) {
    
     //遍历回调函数列表
            var _fn = fns[i];
            if (_fn === fn) {
    
    
                fns.splice(i, 1); //删除订阅者的回调函数
            }
        }
    }
};

return{
    
    
    listen:listen,
    trigger:trigger,
    remove:remove
}
})();

观察者模式进阶：
使用命名空间防止事件名冲突
实现先发布后订阅功能
[观察者模式引自原作者](https://segmentfault.com/a/1190000023447952)