{"id":95717,"date":"2022-09-21T22:54:21","date_gmt":"2022-09-21T20:54:21","guid":{"rendered":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/"},"modified":"2020-12-07T02:56:26","modified_gmt":"2020-12-07T05:56:26","slug":"escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/","title":{"rendered":"Write a JavaScript Framework - Data Binding with ES6 Proxy"},"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\">Contents<\/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\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#Pre-requisitos\" >Pre requirements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#La-biblioteca-nx-observe\" >The nx-observe library<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#Implementando-un-observable-simple\" >Implementing a simple observable.<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#Registro-de-cambios\" >Change Log<\/a><\/li><\/ul><\/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\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#Enlace-de-datos-JavaScript-con-proxy-es6-%E2%80%93-ejemplo-de-codigo-observable\" >JavaScript data binding with es6 proxy - observable code example<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#Corriendo-los-observadores\" >Running watchers<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#Construyendo-un-arbol-observable-dinamico\" >Building a dynamic observable tree<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div itemprop=\"articleBody\">\n<p>In this chapter, I&#039;ll explain how to create a simple yet powerful datalink library with the new ES6 proxies.<span id=\"more-139\"\/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Pre-requisitos\"><\/span>Pre requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ES6 made JavaScript much more elegant, but most of the new features are just syntactic. Proxies are one of the few non-refillable additions. If you are not familiar with them, please take a look at the MDN Proxy docs before proceeding.<\/p>\n<p>A basic understanding of the ES6 Reflection API and Set, Map, and WeakMap objects will also be helpful.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"La-biblioteca-nx-observe\"><\/span>The nx-observe library<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>nx-observe is a data binding solution in less than 140 lines of code. It exposes the observable (obj) and observe (fn) functions, which are used to create observable objects and observer functions. An observer function runs automatically when an observable property used by it changes. The following example demonstrates this.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">\/\/ this is an observable example const person = observable ({name: &#039;John&#039;, age: 20}) function print () {console.log (`$ {person.name}, $ {person.age}`)} \/\/ this creates an observer function \/\/ outputs &#039;John, 20&#039; to console observer (print) \/\/ console output &#039;Dave, 20&#039; setTimeout (() =&gt; person.name = &#039;Dave&#039;, 100) \/ \/ console output &#039;Dave, 22&#039; setTimeout (() =&gt; person.age = 22, 200)\n<\/pre>\n<p>\nThe print function passed to observe () is rerun every time the person.name or person.age changes, print calls an observer function again.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Implementando-un-observable-simple\"><\/span>Implementing a simple observable.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this section, I am going to explain what goes on under the hood of nx-observe. First, I will show you how changes in the properties of an observable are detected and combined with observers. Then I&#039;ll explain a way to run the observer functions triggered by these changes.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Registro-de-cambios\"><\/span>Change Log<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Changes are recorded by wrapping observable objects in ES6 proxies. These proxies seamlessly intercept get and set operations with the help of the Reflection API.<\/p>\n<p>Variables <strong>currentObserver\u00a0<\/strong>and queueObserver () are used in the code below, but will only be explained in the next section. For now, it&#039;s enough to know that currentObserver always points to the currently running observer function, and queueObserver () is a function that queues an observer to run soon.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">\/ * maps the observable properties to a set of observer functions, using the property * \/ const observers = new WeakMap () \/ * points to the observer function currently being carried out, it can be undefined * \/ let currentObserver \/ * makes an object observable by wrapping it in a proxy, it also adds a blank Map for the property-observer pairs to be saved later. * \/ function observable (obj) {observers.set (obj, new Map ()) return new Proxy (obj, {get, set})} \/ * this trap intercepts operations, it does nothing if no observer is executing on that moment. * \/ function get (target, key, receiver) {const result = Reflect.get (target, key, receiver) if (currentObserver) {registerObserver (target, key, currentObserver)} return result} \/ * if a function is executing As an observer, this function pairs the observer function with the currently retrieved observable property and saves it to the Observer Map. * \/ function registerObserver (target, key, observer) {let observersForKey = observers.get (target) .get (key) if (! observersForKey) {observersForKey = new Set () observers.get (target) .set (key, observersForKey )} observersForKey.add (observer)} \/ * this trap intercepts set operations, queues each observer associated with the currently set property to be executed later * \/ function set (target, key, value, receiver) {const observersForKey = observers.get (target) .get (key) if (observersForKey) {observersForKey.forEach (queueObserver)} return Reflect.set (target, key, value, receiver)}\n<\/pre>\n<p>The gett ramp does nothing if currentObserver is not set. Otherwise, it matches the obtained observable property observers and the currently running observer and saves them to the weak map. Observers are stored in an observable Set property. This ensures that there are no duplicates.<\/p>\n<p>The sett ramp is to retrieve all the observers paired with the modified observable property and queue them for later execution.<\/p>\n<p>You can find a figure and a step-by-step description explaining the sample code from nx-observe below.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Enlace-de-datos-JavaScript-con-proxy-es6-%E2%80%93-ejemplo-de-codigo-observable\"><\/span>JavaScript data binding with es6 proxy - observable code example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>The person observable object is created.<\/li>\n<li>currentObserver is set to print.<\/li>\n<li>print begins to run.<\/li>\n<li>person.name is retrieved inside print.<\/li>\n<li>The proxy get capture is invoked in person<\/li>\n<li>The set of observers belonging to the (person, name) pair is<\/li>\n<li>retrieved by observers.get (person) .get (&#039;name&#039;).<\/li>\n<li>currentObserver (print) is added to the set of observers.<\/li>\n<li>Step 4-7 run again with person.age.<\/li>\n<li>$ {person.name}, $ {person.age} Printed to the console.<\/li>\n<li>print finishes executing.<\/li>\n<li>currentObserver is set to undefined.<\/li>\n<li>Some other code starts executing.<\/li>\n<li>person.age is set to a new value (22).<\/li>\n<li>The proxy set capture is invoked in person<\/li>\n<li>The set of observers belonging to the (person, age) pair is<\/li>\n<li>retrieved by observers.get (person) .get (&#039;age&#039;).<\/li>\n<li>The observers in the observer set (including print)<\/li>\n<li>they are queued for execution.<\/li>\n<li>print runs again.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Corriendo-los-observadores\"><\/span>Running watchers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Queued observers run asynchronously in a batch, resulting in superior performance. During registration, observers are synchronously added to the Set queuedObservers. Set cannot contain duplicates, so queuing the same observer multiple times will not result in multiple executions. If Set was empty before, a new task is scheduled to iterate and execute all queued observers after some time.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">\/ * contains the activated observer functions, which should run soon * \/ const queuedObservers = new Set () \/ * points to the current observer, can be undefined * \/ let currentObserver \/ * the exposed observation function * \/ function observe (fn) {queueObserver (fn)} \/ * adds the observer to the queue and makes sure the queue executes soon * \/ function queueObserver (observer) {if (queuedObservers.size === 0) {Promise.resolve (). then (runObservers)} queuedObservers.add (observer)} \/ * executes queued observers, currentObserver is set to undefined at the end * \/ function runObservers () {try {queuedObservers.forEach (runObserver)} finally {currentObserver = undefined queuedObservers.clear ()}} \/ * sets the global currentObserver to observer, and then executes it * \/ function runObserver (observer) {currentObserver = observer observer ()}\n<\/pre>\n<p>\nThe above code ensures that every time an observer runs, the global currentObserver variable points to it. Activating currentObserver &#039;turns on&#039; the gett ramps to listen and match currentObserver to all observable properties it uses while running.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Construyendo-un-arbol-observable-dinamico\"><\/span>Building a dynamic observable tree<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>So far our model works fine with single-level data structures, but forces us to wrap each new object-valued property in an observable by hand. For example, the following code would not work as expected.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">const person = observable ({data: {name: &#039;John&#039;}}) function print () {console.log (person.data.name)} \/\/ console output &#039;John&#039; observe (print) \/\/ does nothing setTimeout (() =&gt; person.data.name = &#039;Dave&#039;, 100)\n<\/pre>\n<p>\nTo make this code work, we would have to replace observable ({data: {name: &#039;John&#039;}}) with observable ({data: observable ({name: &#039;John&#039;})}). Fortunately, we can eliminate this drawback by modifying a get.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction get (target, key, receiver) {&#13;\nconst result = Reflect.get(target, key, receiver)&#13;\nif (currentObserver) {&#13;\nregisterObserver(target, key, currentObserver)&#13;\nif (typeof result === 'object') {&#13;\nconst observableResult = observable(result)&#13;\nReflect.set(target, key, observableResult, receiver)&#13;\nreturn observableResult&#13;\n}&#13;\n}&#13;\nreturn result&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>\nThe get capture above wraps the returned value in an observable proxy before returning it, in case it is an object. This is also perfect from a performance point of view, as observables are only created when they are actually needed by an observer.<\/p><\/div>","protected":false},"excerpt":{"rendered":"<p>En este cap\u00edtulo, explicar\u00e9 c\u00f3mo crear una biblioteca de enlace de datos simple pero potente con los nuevos proxy de ES6. Pre-requisitos ES6 hizo que JavaScript fuera mucho m\u00e1s elegante,&#8230;<\/p>","protected":false},"author":1,"featured_media":95718,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1374],"tags":[],"class_list":["post-95717","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 Enlace de datos con proxy ES6 - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"En este cap\u00edtulo, explicar\u00e9 c\u00f3mo crear una biblioteca de enlace de datos simple pero potente con los nuevos proxy de ES6. Pre-requisitos ES6 hizo que\" \/>\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\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Escribir un marco de JavaScript \u2013 Enlace de datos con proxy ES6\" \/>\n<meta property=\"og:description\" content=\"En este cap\u00edtulo, explicar\u00e9 c\u00f3mo crear una biblioteca de enlace de datos simple pero potente con los nuevos proxy de ES6. Pre-requisitos ES6 hizo que\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-21T20:54:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/es2016-proxy-5701615.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"379\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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-enlace-de-datos-con-proxy-es6\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Escribir un marco de JavaScript \u2013 Enlace de datos con proxy ES6\",\"datePublished\":\"2022-09-21T20:54:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/\"},\"wordCount\":859,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/es2016-proxy-5701615.png\",\"articleSection\":[\"Javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/\",\"name\":\"Escribir un marco de JavaScript \u2013 Enlace de datos con proxy ES6 - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/es2016-proxy-5701615.png\",\"datePublished\":\"2022-09-21T20:54:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"En este cap\u00edtulo, explicar\u00e9 c\u00f3mo crear una biblioteca de enlace de datos simple pero potente con los nuevos proxy de ES6. Pre-requisitos ES6 hizo que\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/es2016-proxy-5701615.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/es2016-proxy-5701615.png\",\"width\":1024,\"height\":379,\"caption\":\"es2016-proxy-5701615-4167931-png\"},{\"@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\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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":"Writing a JavaScript Framework - Data Binding with ES6 Proxy - R Marketing Digital","description":"In this chapter, I&#039;ll explain how to create a simple yet powerful datalink library with the new ES6 proxies. ES6 prerequisites made","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\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/","og_locale":"en_US","og_type":"article","og_title":"Escribir un marco de JavaScript \u2013 Enlace de datos con proxy ES6","og_description":"En este cap\u00edtulo, explicar\u00e9 c\u00f3mo crear una biblioteca de enlace de datos simple pero potente con los nuevos proxy de ES6. Pre-requisitos ES6 hizo que","og_url":"https:\/\/rmarketingdigital.com\/en\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-21T20:54:21+00:00","og_image":[{"width":1024,"height":379,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/es2016-proxy-5701615.png","type":"image\/png"}],"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-enlace-de-datos-con-proxy-es6\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Escribir un marco de JavaScript \u2013 Enlace de datos con proxy ES6","datePublished":"2022-09-21T20:54:21+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/"},"wordCount":859,"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/es2016-proxy-5701615.png","articleSection":["Javascript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/","url":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/","name":"Writing a JavaScript Framework - Data Binding with ES6 Proxy - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/es2016-proxy-5701615.png","datePublished":"2022-09-21T20:54:21+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"In this chapter, I&#039;ll explain how to create a simple yet powerful datalink library with the new ES6 proxies. ES6 prerequisites made","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/javascript\/escribir-un-marco-de-javascript-enlace-de-datos-con-proxy-es6\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/es2016-proxy-5701615.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/es2016-proxy-5701615.png","width":1024,"height":379,"caption":"es2016-proxy-5701615-4167931-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | 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":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/wp-json\/wp\/v2\/posts\/95717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=95717"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/95717\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/95718"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=95717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=95717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=95717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}