{"id":3560,"date":"2018-04-08T16:54:36","date_gmt":"2018-04-08T16:54:36","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/04\/08\/implementar-patron-observador-javascript\/"},"modified":"2024-04-06T01:27:19","modified_gmt":"2024-04-06T07:27:19","slug":"implementar-patron-observador-javascript","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/implementar-patron-observador-javascript\/","title":{"rendered":"Patr\u00f3n de dise\u00f1o observador en Javascript"},"content":{"rendered":"

\u00bfQu\u00e9 es el patr\u00f3n de dise\u00f1o observador?<\/h2>\n\n\n\n
\n

El patr\u00f3n de dise\u00f1o observador, define una dependencia de uno a muchos objetos de tal manera que cuando un objeto cambio de estado, todos sus dependientes son notificados y actualizados autom\u00e1ticamente<\/p>\nDel libro “Design patterns: elements of reusable object-oriented software”<\/cite><\/blockquote>\n\n\n\n

Si a\u00fan no sabes que es un patr\u00f3n de dise\u00f1o, revisa primero esta publicaci\u00f3n sobre patrones de dise\u00f1o<\/a>.<\/p>\n\n\n\n

Si has utilizado eventos del navegador, como escuchar el evento click <\/em>sobre un bot\u00f3n, ah\u00ed est\u00e1s utilizando el patr\u00f3n observador, tu funci\u00f3n callback es tu objeto observador <\/strong>y el bot\u00f3n es el sujeto<\/strong>, tu funci\u00f3n callback esta interesada en la actividad de dar click <\/em>sobre el bot\u00f3n.<\/p>\n\n\n\n

Se compone de un Sujeto <\/strong>y uno o m\u00e1s Observadores<\/strong>. Veamos el diagrama tomado del libro Design Patterns: Elements of reusable Object-Oriented software<\/strong><\/a>:<\/p>\n\n\n\n

\"Patr\u00f3n
Patr\u00f3n de dise\u00f1o observador<\/figcaption><\/figure>\n\n\n\n

He Sujeto <\/strong>est\u00e1 compuesto por las siguientes m\u00e9todos importantes que usaremos en nuestro c\u00f3digo javascript:<\/p>\n\n\n\n

    \n
  • Una colecci\u00f3n de observers<\/code><\/li>\n\n\n\n
  • M\u00e9todo attach()<\/code> <\/li>\n\n\n\n
  • M\u00e9todo detach()<\/code><\/li>\n\n\n\n
  • M\u00e9todo notify()<\/code><\/li>\n<\/ul>\n\n\n\n

    Normalmente un Observador <\/strong>contiene un m\u00e9todo update()<\/code> que el Sujeto <\/strong>utiliza.<\/p>\n\n\n\n

    Para tener m\u00e1s claro esto, vamos a ver dos ejemplos del patr\u00f3n observador, el primero ser\u00e1 el Observador puro <\/strong>y el segundo en su modo Publicador\/Suscriptor<\/strong>.<\/p>\n\n\n\n

    Simplificando el observador<\/h2>\n\n\n\n

    Simplificando el diagrama anterior, el patr\u00f3n observador <\/strong>funciona as\u00ed:<\/p>\n\n\n\n

    \"Patr\u00f3n
    Patr\u00f3n de dise\u00f1o observador simplificado<\/figcaption><\/figure>\n\n\n\n

    Juega con el ejemplo de abajo, y agrega nuevos checkbox, si has agregado m\u00e1s de un nuevo checkbox, podemos notar que cuando damos click <\/strong><\/em>en el checkbox ‘Seleccionar<\/strong>‘ todos los dem\u00e1s checkbox nuevos se enteran de esa actividad y se actualizan autom\u00e1ticamente. <\/p>\n\n\n\n

    Todo esto sin necesidad de estar al pendiente de que el checkbox ‘seleccionar<\/strong>‘ ha cambiado su estado, el encargado de notificar del cambio es el Sujeto <\/strong>y solo si existe alg\u00fan cambio. Esto es muy eficiente si tienes cientos o miles de checkbox observando ese cambio.<\/p>\n\n\n\n

    Si das click<\/em> sobre uno de los checkbox, se ejecuta el m\u00e9todo subject.detach()<\/strong><\/code>, entonces ese checkbox ya no es un observador, por lo que si ahora activas y desactivas el checkbox seleccionar<\/strong> nunca es notificado sobre el cambio.<\/p>\n\n\n\n