{"id":95586,"date":"2022-09-01T05:50:04","date_gmt":"2022-09-01T03:50:04","guid":{"rendered":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/"},"modified":"2020-12-03T19:58:15","modified_gmt":"2020-12-03T22:58:15","slug":"escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/","title":{"rendered":"R\u00e9daction d&#039;un framework JavaScript - Introduction \u00e0 la liaison de donn\u00e9es, au-del\u00e0 de la v\u00e9rification sale"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Una-introduccion-al-enlace-de-datos\" >Una introducci\u00f3n al enlace de datos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Control-sucio\" >Control sucio<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#La-sintaxis\" >La sintaxis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Escuchando-sobre-los-cambios\" >Escuchando sobre los cambios<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#La-tecnica-accesora\" >La t\u00e9cnica accesora.<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#La-sintaxis-2\" >La sintaxis<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Escuchando-sobre-los-cambios-2\" >Escuchando sobre los cambios<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#La-tecnica-de-enlace-de-datos-de-acceso\" >La t\u00e9cnica de enlace de datos de acceso.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Comparacion-de-las-tecnicas\" >Comparaci\u00f3n de las t\u00e9cnicas.<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Sintaxis\" >Sintaxis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Actuacion\" >Actuaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Flexibilidad\" >Flexibilidad<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#Alternativas-de-tiempo\" >Alternativas de tiempo<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div itemprop=\"articleBody\">\n<p>En este cap\u00edtulo, te explicar\u00e9 las t\u00e9cnicas de comprobaci\u00f3n sucia y de enlace de datos de accesores y se\u00f1alar\u00e9 sus fortalezas y debilidades.<span id=\"more-156\"\/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Una-introduccion-al-enlace-de-datos\"><\/span>Una introducci\u00f3n al enlace de datos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El enlace de datos es una t\u00e9cnica general que une los or\u00edgenes de datos del proveedor y el consumidor y los sincroniza.<\/p>\n<p>Esta es una definici\u00f3n general, que describe los bloques de construcci\u00f3n comunes de las t\u00e9cnicas de enlace de datos.<\/p>\n<ul>\n<li>Una sintaxis para definir el proveedor y el consumidor.<\/li>\n<li>Una sintaxis para definir qu\u00e9 cambios deber\u00edan desencadenar la sincronizaci\u00f3n.<\/li>\n<li>Una forma de escuchar estos cambios en el proveedor.<\/li>\n<li>Una funci\u00f3n de sincronizaci\u00f3n que se ejecuta cuando ocurren estos cambios. De ahora en adelante llamar\u00e9 a esta funci\u00f3n hhandler()andler().<\/li>\n<\/ul>\n<p>Los pasos anteriores se implementan de diferentes maneras mediante las diferentes t\u00e9cnicas de enlace de datos. Las pr\u00f3ximas secciones tratar\u00e1n sobre dos t\u00e9cnicas de este tipo, a saber, la verificaci\u00f3n de errores y el m\u00e9todo de acceso. Ambos tienen sus fortalezas y debilidades, las cuales tratar\u00e9 brevemente despu\u00e9s de presentarlas.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Control-sucio\"><\/span>Control sucio<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La comprobaci\u00f3n sucia es probablemente el m\u00e9todo de enlace de datos m\u00e1s conocido. Es de concepto simple, y no requiere caracter\u00edsticas de lenguaje complejas, lo que lo convierte en un buen candidato para el uso heredado.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La-sintaxis\"><\/span>La sintaxis<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Definir el proveedor y el consumidor no requiere ninguna sintaxis especial, solo objetos simples de Javascript.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconst provider = {&#13;\nmessage: 'Hola Mundo'&#13;\n}&#13;\nconst consumer = document.createElement('p')&#13;\n&#13;\n<\/pre>\n<p>La sincronizaci\u00f3n generalmente se desencadena por mutaciones de propiedades en el proveedor. Las propiedades que deben observarse para los cambios deben ser mapeadas expl\u00edcitamente con sus <strong>handler().<\/strong><\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nobserve(provider, 'message', message =&gt; {&#13;\nconsumer.innerHTML = message&#13;\n})&#13;\n&#13;\n<\/pre>\n<p>La funci\u00f3n\u00a0<strong>observe()<\/strong> simplemente guarda la\u00a0asignaci\u00f3n <em>(provider, property) -&gt; handler<\/em> para su uso posterior.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction observe (provider, prop, handler) {&#13;\nprovider._handlers[prop] = handler&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Con esto, tenemos una sintaxis para definir el proveedor y el consumidor, y una forma de registrar\u00a0funciones <strong>handler()<\/strong> para los cambios de propiedad. La API p\u00fablica de nuestra biblioteca est\u00e1 lista, ahora viene la implementaci\u00f3n interna.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Escuchando-sobre-los-cambios\"><\/span>Escuchando sobre los cambios<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La comprobaci\u00f3n sucia se llama sucia por una raz\u00f3n. Ejecuta controles peri\u00f3dicos en lugar de escuchar directamente los cambios de propiedad. Llamemos a este cheque un ciclo de digesti\u00f3n de ahora en adelante. Un ciclo de resumen se itera a trav\u00e9s de cada\u00a0entrada <strong>(provider, property) -&gt; handler<\/strong> agregada a <strong>observe()<\/strong> y verifica si el valor de la propiedad cambi\u00f3 desde la \u00faltima iteraci\u00f3n. Si cambi\u00f3, ejecuta la funci\u00f3n <strong>handler().<\/strong> Una implementaci\u00f3n simple se ver\u00eda a continuaci\u00f3n.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction digest () {&#13;\nproviders.forEach(digestProvider)&#13;\n}&#13;\n&#13;\nfunction digestProvider (provider) {&#13;\nfor (let prop in provider._handlers) {&#13;\nif (provider._prevValues[prop] !== provider[prop]) {&#13;\nprovider._prevValues[prop] = provider[prop]&#13;\nhandler(provider[prop])&#13;\n}&#13;\n}&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>La funci\u00f3n <strong>digest()<\/strong> debe ejecutarse de vez en cuando para garantizar un estado sincronizado.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La-tecnica-accesora\"><\/span>La t\u00e9cnica accesora.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La t\u00e9cnica de acceso es la tendencia actual. Es un poco menos ampliamente compatible ya que requiere la funcionalidad de obtenci\u00f3n \/ configuraci\u00f3n de ES5, pero esto lo compensa con elegancia.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"La-sintaxis-2\"><\/span>La sintaxis<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>La definici\u00f3n del proveedor requiere una sintaxis especial. El objeto de proveedor plano debe pasarse a la\u00a0funci\u00f3n <strong>observer(),<\/strong> que lo transforma en un objeto observable.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconst provider = observer({&#13;\ngreeting: 'Hola',&#13;\nsubject: 'Mundo'&#13;\n})&#13;\nconst consumer = document.createElement('p')&#13;\n&#13;\n<\/pre>\n<p>Este peque\u00f1o inconveniente est\u00e1 m\u00e1s que compensado por la sintaxis de mapeo simple <strong>handler().<\/strong> Con la verificaci\u00f3n sucia, tendr\u00edamos que definir cada propiedad observada expl\u00edcitamente como se muestra a continuaci\u00f3n.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nobserver(provider, 'greeting', greeting =&gt; {&#13;\nconsumer.innerHTML = greeting + ' ' + provider.subject&#13;\n})&#13;\n&#13;\nobserve(provider, 'subject', subject =&gt; {&#13;\nconsumer.innerHTML = provider.greeting + ' ' + subject&#13;\n})&#13;\n&#13;\n<\/pre>\n<p>Esto es detallado y torpe. La t\u00e9cnica de acceso puede detectar autom\u00e1ticamente las propiedades del proveedor utilizado dentro de la funci\u00f3n\u00a0<strong>handler(),<\/strong> lo que nos permite simplificar el c\u00f3digo anterior.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nobserver(() =&gt; {&#13;\nconsumer.innerHTML = provider.greeting + ' ' + provider.subject&#13;\n})&#13;\n&#13;\n<\/pre>\n<p>La implementaci\u00f3n de <strong>observe()<\/strong> es diferente de la comprobaci\u00f3n sucia. Simplemente ejecuta la\u00a0funci\u00f3n <strong>handler()<\/strong> pasada y la marca como activa actualmente mientras se est\u00e1 ejecutando.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nlet activeHandler&#13;\n&#13;\nfunction observe(handler) {&#13;\nactiveHandler = handler&#13;\nhandler()&#13;\nactiveHandler = undefined&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Ten en cuenta que explotamos la naturaleza de un solo hilo de JavaScript aqu\u00ed mediante el uso de la \u00fanica\u00a0variable <strong>activeHandler<\/strong> para realizar un seguimiento de la <strong>funci\u00f3n handler()<\/strong> actualmente en ejecuci\u00f3n.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Escuchando-sobre-los-cambios-2\"><\/span>Escuchando sobre los cambios<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Aqu\u00ed es de donde viene el nombre de <em>\u2018t\u00e9cnica accesoria\u2019<\/em>. El proveedor se complementa con <em>getters \/ setters<\/em>, que hacen el trabajo pesado en el fondo. La idea es interceptar las operaciones de<em> obtenci\u00f3n \/ ajuste<\/em> de las propiedades del proveedor de la siguiente manera.<\/p>\n<ul>\n<li><strong>get:<\/strong> si hay una\u00a0ejecuci\u00f3n <strong>activeHandler,<\/strong> guardar la\u00a0asignaci\u00f3n\u00a0<strong>(provider, property)<\/strong> <strong>-&gt; activeHandler<\/strong> para su uso posterior.<\/li>\n<li><strong>set:<\/strong> Ejecutar todas las\u00a0funciones <strong>handler(),<\/strong> que se asignan con el par <strong>(provide, property)<\/strong>.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"La-tecnica-de-enlace-de-datos-de-acceso\"><\/span>La t\u00e9cnica de enlace de datos de acceso.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El siguiente c\u00f3digo muestra una implementaci\u00f3n simple de esto para una propiedad de un solo proveedor.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction observableProp (provider, prop) {&#13;\nconst value = provider[prop]&#13;\nObject.defineProperty(provider, prop, {&#13;\nget () {&#13;\nif (activeHandler) {&#13;\nprovider._handlers[prop] = activeHandler&#13;\n}&#13;\nreturn value&#13;\n},&#13;\nset (newValue) {&#13;\nvalue = newValue&#13;\nconst handler = obj._handlers[prop]&#13;\nif (handler) {&#13;\nactiveHandler = handler&#13;\nhandler()&#13;\nactiveHandler = undefined&#13;\n}&#13;\n}&#13;\n})&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>La funci\u00f3n <strong>observable()<\/strong> mencionada en la secci\u00f3n anterior recorre las propiedades del proveedor y las convierte en observables con la funci\u00f3n anterior <strong>observableProp().<\/strong><\/p>\n[\/php]\n<p>function observable (provider) {<br \/>for (let prop in provider) {<br \/>observableProp(provider, prop)<br \/>if (typeof provider[prop] === \u2018object\u2019) {<br \/>observable(provider[prop])<br \/>}<br \/>}<br \/>}<\/p>\n[\/php]\n<p>Esta es una implementaci\u00f3n muy simple, pero es suficiente para una comparaci\u00f3n entre las dos t\u00e9cnicas.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Comparacion-de-las-tecnicas\"><\/span>Comparaci\u00f3n de las t\u00e9cnicas.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>En esta secci\u00f3n, describir\u00e9 brevemente las fortalezas y debilidades de la verificaci\u00f3n sucia y la t\u00e9cnica de acceso.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Sintaxis\"><\/span>Sintaxis<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>La comprobaci\u00f3n sucia no requiere una sintaxis para definir el proveedor y el consumidor, pero asignar el\u00a0par <strong>(provider,property) handler()<\/strong> es torpe y no flexible.<\/p>\n<p>La t\u00e9cnica de acceso requiere que el proveedor se ajuste a la funci\u00f3n <strong>observable(),<\/strong> pero la asignaci\u00f3n autom\u00e1tica\u00a0<strong>handler()<\/strong> lo compensa. Para grandes proyectos con enlace de datos, es una caracter\u00edstica imprescindible.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Actuacion\"><\/span>Actuaci\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>La comprobaci\u00f3n sucia es notoria por su mal desempe\u00f1o. Tienes que verificar cada entrada\u00a0<strong>(provider, property) -&gt; handler<\/strong>\u00a0posiblemente varias veces durante cada ciclo de resumen. Adem\u00e1s, tienes que moler incluso cuando la aplicaci\u00f3n est\u00e1 inactiva, ya que no puede saber cu\u00e1ndo suceden los cambios de propiedad.<\/p>\n<p>El m\u00e9todo de acceso es m\u00e1s r\u00e1pido, pero el rendimiento podr\u00eda degradarse innecesariamente en el caso de objetos observables grandes. Reemplazar cada propiedad del proveedor por accesores es generalmente una exageraci\u00f3n. Una soluci\u00f3n ser\u00eda construir el \u00e1rbol <strong>getter \/ setter<\/strong> din\u00e1micamente cuando sea necesario, en lugar de hacerlo por adelantado en un lote. Alternativamente, una soluci\u00f3n m\u00e1s simple es envolver las propiedades innecesarias con una funci\u00f3n <strong>noObserve(),<\/strong> que le indica a <strong>observable()<\/strong> que deje esa parte sin tocar. Esto lamentablemente introduce alguna sintaxis extra.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Flexibilidad\"><\/span>Flexibilidad<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>La verificaci\u00f3n sucia, naturalmente, funciona tanto con las propiedades expando (agregadas din\u00e1micamente) como con las propiedades de acceso.<\/p>\n<p>La t\u00e9cnica de acceso tiene un punto d\u00e9bil aqu\u00ed. Las propiedades de Expando no son compatibles porque se quedan fuera del \u00e1rbol de obtenci\u00f3n \/ establecimiento inicial. Esto causa problemas con las matrices, por ejemplo, pero se puede solucionar ejecutando manualmente <strong>observableProp()<\/strong> despu\u00e9s de agregar una nueva propiedad. Las propiedades de funci\u00f3nno son compatibles ya que los <strong>accessors<\/strong> no pueden ser envueltos por los <strong>accessors<\/strong> nuevamente. Una soluci\u00f3n com\u00fan para esto es usar una\u00a0funci\u00f3n <strong>computed()<\/strong> en lugar de un <strong>getter.<\/strong> Esto introduce a\u00fan m\u00e1s sintaxis personalizada.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Alternativas-de-tiempo\"><\/span>Alternativas de tiempo<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>La verificaci\u00f3n sucia no nos da mucha libertad aqu\u00ed, ya que no tenemos forma de saber cu\u00e1ndo suceden los cambios reales en la propiedad. Las funciones <strong>handler()<\/strong> solo se pueden ejecutar de forma as\u00edncrona, ejecutando el <strong>ciclo digest()<\/strong> de vez en cuando.<\/p>\n<p>Los activadores \/ definidores agregados mediante la t\u00e9cnica de accesores se activan de forma s\u00edncrona, por lo que tenemos libertad de elecci\u00f3n. Podemos decidir ejecutar el archivo\u00a0<strong>handler()<\/strong> de inmediato o guardarlo en un lote que se ejecuta de forma as\u00edncrona m\u00e1s tarde. El primer enfoque nos da la ventaja de la previsibilidad, mientras que el segundo permite mejoras de rendimiento mediante la eliminaci\u00f3n de duplicados.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>En este cap\u00edtulo, te explicar\u00e9 las t\u00e9cnicas de comprobaci\u00f3n sucia y de enlace de datos de accesores y se\u00f1alar\u00e9 sus fortalezas y debilidades. Una introducci\u00f3n al enlace de datos El&#8230;<\/p>","protected":false},"author":1,"featured_media":95572,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1374],"tags":[],"class_list":["post-95586","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"En este cap\u00edtulo, te explicar\u00e9 las t\u00e9cnicas de comprobaci\u00f3n sucia y de enlace de datos de accesores y se\u00f1alar\u00e9 sus fortalezas y debilidades. Una\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia\" \/>\n<meta property=\"og:description\" content=\"En este cap\u00edtulo, te explicar\u00e9 las t\u00e9cnicas de comprobaci\u00f3n sucia y de enlace de datos de accesores y se\u00f1alar\u00e9 sus fortalezas y debilidades. Una\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-01T03:50:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1-7058065.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia\",\"datePublished\":\"2022-09-01T03:50:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/\"},\"wordCount\":1317,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1-7058065.jpg\",\"articleSection\":[\"Javascript\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/\",\"name\":\"Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1-7058065.jpg\",\"datePublished\":\"2022-09-01T03:50:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"En este cap\u00edtulo, te explicar\u00e9 las t\u00e9cnicas de comprobaci\u00f3n sucia y de enlace de datos de accesores y se\u00f1alar\u00e9 sus fortalezas y debilidades. Una\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1-7058065.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1-7058065.jpg\",\"width\":400,\"height\":300,\"caption\":\"1-7058065-3581311-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia - R Marketing Digital","description":"Dans ce chapitre, je vais vous expliquer les techniques de liaison de donn\u00e9es d&#039;accesseur et de v\u00e9rification incorrecte et souligner leurs forces et leurs faiblesses. Ongle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/","og_locale":"fr_FR","og_type":"article","og_title":"Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia","og_description":"En este cap\u00edtulo, te explicar\u00e9 las t\u00e9cnicas de comprobaci\u00f3n sucia y de enlace de datos de accesores y se\u00f1alar\u00e9 sus fortalezas y debilidades. Una","og_url":"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-01T03:50:04+00:00","og_image":[{"width":400,"height":300,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1-7058065.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia","datePublished":"2022-09-01T03:50:04+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/"},"wordCount":1317,"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1-7058065.jpg","articleSection":["Javascript"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/","url":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/","name":"Escribir un marco de JavaScript \u2013 Introducci\u00f3n al enlace de datos, m\u00e1s all\u00e1 de la comprobaci\u00f3n sucia - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1-7058065.jpg","datePublished":"2022-09-01T03:50:04+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Dans ce chapitre, je vais vous expliquer les techniques de liaison de donn\u00e9es d&#039;accesseur et de v\u00e9rification incorrecte et souligner leurs forces et leurs faiblesses. Ongle","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-introduccion-al-enlace-de-datos-mas-alla-de-la-comprobacion-sucia\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1-7058065.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1-7058065.jpg","width":400,"height":300,"caption":"1-7058065-3581311-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=95586"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95586\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/95572"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=95586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=95586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=95586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}