Monitoreo de métodos en diferentes componentes de react - eventProxy modo publicación-suscripción

1. Problemas de demanda:

Al hacer React-ant-design-mobileproyectos de APP. La página de la lista debe actualizarse cuando se determina el evento de reinicio en la barra de navegación. Y estos dos componentes no tienen nada que ver entre sí. En este momento, eventProxyse utilizan las funciones del método para monitorear diferentes componentes.
2,

• on, one: Los suscriptores utilizan las funciones on y one para monitorear los eventos correspondientes y usar la función en respuesta al evento como un parámetro. La única diferencia entre on y one es que la función que usa one para suscribirse solo será activada una vez, mientras se usa en La función suscrita se activará cada vez que ocurra el evento.
• Activador: el editor utiliza el activador para publicar eventos y toma otros parámetros, excepto el primer parámetro (nombre del evento), como nuevos parámetros para activar la función de suscripción mediante uno y otro.
• off: se utiliza para liberar todas las funciones suscritas a un evento.

3. Primero, necesita importar eventProxyarchivos.
Colóquelo en un archivo por separado, use un script para importar o importe importante para usar 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. Utilice

• En el método de componente que necesita ser monitoreado:
• import eventProxy from '../../utils/eventProxy' Importar archivo
• En el método que necesita ser monitoreado,
  estoy aquí para determinar el evento.

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

• Luego utilícelo en el componente que necesita realizar la acción correspondiente
• En el componentDidMountuso de Go

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

Después de su uso, asegúrese de borrar el detector de eventos cuando se desinstale el componente

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

5. De esta manera, los diferentes métodos y eventos de los componentes están conectados.

Puede referirse al modo de apariencia

El modo de apariencia es un modo relativamente simple y ubicuo. El modo de apariencia proporciona una interfaz de alto nivel, lo que hace que sea más conveniente llamar al cliente o al subsistema. Expresado en un código que no podría ser más simple:

Implementar un
modelo simple de editor / observador de suscripción , que define una relación de dependencia de uno a varios entre objetos. Cuando el estado de un objeto cambia, todos los objetos que dependen de él serán notificados.
De hecho, siempre que haya vinculado una función de evento a un nodo DOM, ¡entonces ha utilizado el modo de observador!
document.body.addEventListener ('clic', función () { alerta (2); });

Pero este es solo el uso más simple del modo de observador En muchos escenarios, a menudo implementamos algunos eventos personalizados para satisfacer nuestras necesidades.
Por ejemplo:
vas a una empresa para postularte a un trabajo, y después de una charla, hr te dice: "¡Está bien, regresa y espera el aviso!".
En este momento, 1. Le pedirá el número de teléfono de la empresa, y luego lo llamará todos los días para preguntar el resultado
2. Deje su número de teléfono móvil en hr, y luego espere a que él lo llame

Creo que muchas veces todo el mundo elige lo último.
En caso de que lo molestes llamando a recursos humanos todos los días, tal vez originalmente planeó reclutarte, ¡y ahora ya no planea atacarte!
Entonces, en este momento, hr es equivalente a un editor, ¡y usted es un suscriptor!
Bueno, la mayoría de las personas que te piden que regreses y esperes las noticias no ayudan ...
¡También me he encontrado con una empresa que ni siquiera te notifica si no eres admitido!
Entonces, ¿cómo debería implementarse un patrón de observador simple?
Para especificar un editor;
agregue una lista de caché al editor para almacenar funciones de devolución de llamada para notificar a los suscriptores; (muchas personas de esta compañía vienen a postularse) Cuando el
mensaje finalmente se publique, el editor recorrerá la lista de caché y lo activará a su vez Almacenado función de devolución de llamada del suscriptor; (tú arriba o tú más)

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

Mejore el código anterior, cree un objeto global para implementar el modo de observador,
use cierres para implementar variables privadas y exponga solo las API necesarias a los usuarios:

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)