¿Cuál es el modelo de suscripción de editor?
El modelo de suscripción del editor también se denomina modelo de observador. Define una relación de dependencia de uno a muchos entre objetos. Cuando el estado de un objeto cambia, todos los objetos que dependen de él serán notificados.
En resumen (shuo) y (ju) (ren) (hua), el modelo editor-suscripción es un escenario de aplicación compuesto por editores y suscriptores. Tomando el equipo del proyecto como ejemplo, el gerente de producto (o la Parte A) a menudo asume la responsabilidad del editor y es responsable de impulsar la demanda a un determinado grupo de trabajo. Una vez emitida la demanda, los teléfonos móviles de otros empleados sonarán, chisporroteando. Entonces, esto se debe a que estos asalariados se suscriben a estas noticias, y luego los asalariados con diferentes responsabilidades pueden hacer diferentes cosas para responder a esta demanda. Por supuesto, también puede estar el jefe de la empresa en este grupo. Suele bloquear este grupo. Este tipo de persona también es un "suscriptor". Si quiere suscribirse, se suscribirá y se dará de baja si no quiere suscribirse. Se pueden extraer las siguientes conclusiones del ejemplo anterior:
- No hay conexión entre el editor y el suscriptor mismo
- Los editores pueden publicar mensajes sin suscriptores
- Los suscriptores pueden optar por suscribirse a la información de cualquier editor y realizar un procesamiento diferente para la información diferente
Obtenga más información sobre el modelo de suscripción de editor más común de los eventos dom
De hecho, siempre que hayamos vinculado funciones de eventos a los nodos DOM, hemos utilizado el modelo de publicación-suscripción. Por ejemplo, realizamos una operación de clic en una página en blanco. No importa si hay un botón o no, activará muchos eventos. Un clic del mouse puede activar eventos de mousedown, mouseup, clic, etc. Pero todos sabemos que no habrá respuesta cuando haga clic en el espacio en blanco. Esto se debe a que no vinculamos a los suscriptores relevantes a esta operación, o a nadie le importa en qué haga clic en el espacio en blanco. Esto también corresponde a las dos primeras características del modelo de suscripción de editor.
Implementar un modelo de suscripción de editor más simple
Después de comprender las características prácticas del modelo de suscripción de editor, podemos resumir algunas características del código del modelo de suscripción de editor. Tome el grupo de trabajo como ejemplo:
- Necesitamos un editor
- Necesitamos un grupo de trabajo (puente)
- Necesitamos algunos suscriptores
Después de aclarar la idea básica, la traducimos a código.
let publisher = {
mySubscriber:[],//订阅者们
addSubscriber:function(subscriber){
this.mySubscriber.push(subscriber)
}, //添加订阅者
releaseNews(msg){
this.mySubscriber.forEach((item)=>{
item.call(this,msg)
})
}//发布消息给订阅者
}
function ui(msg){
if(msg==='出图'){
//接收到自己的任务开始干活
console.log(msg)
}else{
console.log('指令卜对，不鸟你')
}
}
function manong(msg){
if(msg==='写代码'){
//接收到自己的任务开始干活
console.log(msg)
}else{
console.log('指令卜对，不鸟你')
}
}
publisher.addSubscriber(ui) //ui订阅消息
publisher.addSubscriber(manong) //码农订阅消息
publisher.releaseNews('出图')
También podemos hacer algunas pequeñas modificaciones al código anterior para hacerlo más perfecto, como agregar la función de eliminar suscriptores, reemplazar el parámetro msg por un argumento más riguroso, etc. Los lectores pueden estudiar estas preguntas detalladas por sí mismos. Solo daré los ejemplos mejor entendidos y los códigos más simples y efectivos para que todos los recuerden rápidamente.
Modelo de suscripción de editor en Vue
El enlace bidireccional de datos del código fuente central de Vue (mvvm) se refiere al modelo de suscripción del editor, pero agrega una capa más de suscripción que el modelo de suscripción del editor, es decir, el dominio virtual y los datos son tanto editores como suscriptores. Con respecto al enlace bidireccional de datos Le sugiero que consulte mi artículo anterior para la exploración del código fuente específico, que es muy, muy, muy detallado, y las ideas y el código son muy, muy, muy claros. Tengo que hacer una ola, por qué tengo tanto tiempo para estudiar el código fuente. Portal: prueba avanzada de Vue que explora el principio de enlace de datos bidireccional.